Mariner Exchange
Founding Design Team
March 2016 - September 2017
Overview
About
Mariner Exchange (MarEx) connects boaters with marine service providers. On MarEx, find ratings and reviews on boat mechanics, book a service provider, and pay seamlessly.
Team
Worked closely with Alexander Nicholson and software engineering consultants.
Need
Boat ownership and maintenance is challenging. MarEx standardizes quality so that booking marine services isn't a leap of faith.
Responsibilities
Developed site functionality for improved customer experience through research, prototyping, and incorporation of feedback. Delivered wireframes, mockups, and graphic assets.
Project
Process
MarEx had a functioning mobile app, but the team wanted help updating the UX and UI. I redesigned the existing mobile app and desktop experience for usability and aesthetic appeal.
Auditing: I started by mapping out the original app functionality and flow to take inventory of the existing experience.
Auditing: I took screenshots of the existing app and created a map of the user flow.
Research: Understanding MarEx’s user groups (boat owners and boat service providers), creating mood boards, and collecting examples of existing apps that executed relevant features well, helped me and the MarEx team understand the product landscape.
Sketching: After getting a grasp of the product landscape, pencil sketches enabled me to visualize the flow and functionality quickly to get feedback from my team before moving into digital wireframes.
Wireframes: Once pencil sketches were approved, I created digital wireframes in Sketch and provided alternative options for the flow and layout of core functionality.
Feedback: We held design review meetings and shared feedback over InVision.
Prototyping: Sketch and InVision enabled me to prototype and share progress with my team in real time.
Visual Design: After gaining consensus on the wireframes, I developed several directions for the visual design that, through iteration, turned into a cohesive design language for the final design deliverable.
Two options for visual design and the color scheme.
Validation: Feedback from boaters, site metrics, app reviews, and new partnership opportunities drove continued refinement and validation of product updates.
Evolution
Core updates included streamlining the process of searching, contacting, and tracking boat work and estimates and an overhaul of the provider profile as outlined below.
Deliverables:
The MarEx redesign incorporates increased functionality to better allow boaters to get and share information about marine service providers.
Core functionality of the mobile app.
Web Parity: After completion of the mobile app redesign, the MarEx team asked me to create a desktop version to reach parity. The desktop version was designed to be responsive in nature, in preparation for future mobile web rollout.
Key Takeaways
Additional Projects
Wayfair - Shop by Color
SproutsIO - Overview