The primary audience of the Mercury Marine mobile app is boaters. To create an optimal user experience, we must understand their unique needs and behaviors. When building personas, we consider the following key variables:
We wanted to ensure the new maintenance experience could accommodate a wide range of boaters—from those who take their boats to a dealer for servicing to experienced boaters who prefer to handle maintenance themselves. With this in mind, we considered the following user stories when redesigning the maintenance experience:
Unlike the automotive industry, which has been standardized in many ways, the marine industry remains largely unstandardized. When exploring new design concepts, we often look to the automotive space as the closest comparison to boating. Below is an example of how we benchmarked the maintenance experience in Nissan’s mobile app.
When starting the design process, I like to hand-sketch low-fidelity wireframes to outline key features for my higher-fidelity designs. This allows me to quickly explore ideas while also beginning to map out the user flow.
As we developed our designs, we created user flows to map out the user journeys and ensure a well-structured maintenance experience. Below is the user flow detailing the steps a boater takes to record maintenance in the mobile app.
When I joined Mercury, Sketch was the primary design tool for the UX/UI team to develop concepts. We later transitioned maintenance concepts and all other design work to Figma.
In our final design, we accounted for variations in the maintenance experience based on whether the user had the SmartCraft Connect module to track engine hours. We ensured that even without a connection, users could still manually record maintenance, view engine health, and access maintenance history.
When recording maintenance, we gave users the option to log standard service intervals (yearly and three-year) with auto-populated details for quicker entry, while still allowing customization as needed.
In addition to making sure our designs align with WCAG guidelines, we must consider the unique challenges boaters face when using the mobile app on the water. Environmental factors like sunlight, wind, water, and waves can all impact visibility and usability, making it essential to design for real-world conditions.
Some ways we accounts for these factors include:
Please contact me for access to the Figma prototype link.
Typically, when designing new experiences in the mobile app, we conduct usability tests on our final designs to assess whether real users can navigate them intuitively. These tests often reveal gaps we hadn’t initially caught, leading to valuable iterations.
Unfortunately, due to time and resource constraints, we couldn't conduct usability tests on the new maintenance experience. Since we immediately moved on to the next project, we never had the opportunity to revisit and test it.
However, since our design was informed by the shortcomings of the maintenance experience in the VesselView mobile app, we were able to validate that our new design introduced meaningful and impactful improvements.
Upon finalizing the new maintenance experience, we handed off the designs to our software development team for implementation, ensuring the new features were delivered within our set deadline.
Overall, we saw significant improvements to the maintenance experience, including a streamlined maintenance recording flow, and the addition of features like a detailed engine health breakdown, easier dealer contact, and access to maintenance education for boaters who perform their own upkeep.
We continue to track key metrics to assess the new maintenance experience’s impact and performance among app users.
When time permits, I’d like to conduct usability tests with real users to uncover any pain points and identify opportunities for further improvement. As the mobile app continues to evolve, we will refine the maintenance experience to meet new requirements.
This was my first project creating a new experience for the Mercury Marine mobile app. One of the biggest challenges was having to concept designs in Sketch without a design system. This project inspired the need to transition to Figma and create a design system for future concept work (ask me about how we did this!).
Another challenge was having to design within an already established visual DNA, pushing me to think creatively to meet the new maintenance experience requirements.
If I were to approach this project again, I would advocate for conducting 3-5 usability tests earlier on in the design process. Even a few quick tests could have provided valuable feedback to confirm our designs were intuitive and addressing user needs.
Designing for an app that boaters interact with on a regular basis requires careful planning of complex user flows, with every design decision thoroughly reviewed and questioned. Through this process, I also built a strong working relationship with our software engineers, laying the foundation for smoother collaboration on future projects.