Mercury Marine Mobile App

UX/UI Design | B2C Mobile Design | iOS/Android

Mercury Marine Mobile App

UX/UI Design | B2C Mobile Design | iOS/Android

TEAM

Abby Grinberg
Jacob Neuman
Mark Henker
Software Engineers

MY ROLE

User Research
Wireframing
UI Design
Prototyping

DURATION

Sep 2023 - Present

BACKGROUND

Designing a digital companion for on-and-off water experiences

What's the Mercury Marine app all about? It's a boating companion that connects owners with all the essential information they need—engine performance, fuel management, maintenance tracking, GPS mapping, and educational resources. Many boaters use it alongside their multi-functional displays or as a handy substitute.

The app wirelessly connects to engines via the SmartCraft Connect module for real-time monitoring. Don't have the hardware? No sweat! Owners can still access manuals, tutorials, and other helpful resources.

Back in 2022, the old VesselView Mobile app was transformed into the Mercury Marine app with a fresh look (and new name!) and expanded capabilities. The team refined what was working and added new features to enhance the boating experience.

TEAM

Abby Grinberg - UX/UI Designer
Jacob Neuman - UX/UI Designer
Mark Henker - UX Manager
Software Engineers

Abby Grinberg
Jacob Neuman
Mark Henker
Software Engineers

MY ROLE

User Research
Wireframing
UI Design
Prototyping

DURATION

Sep 2023 - Present
(Maintenance experience - 3 months)

Sep 2023 - Present

BACKGROUND

Designing a digital companion for on-and-off water experiences

Designing a digital companion for on-and-off water experiences

What's the Mercury Marine app all about? It's a boating companion that connects owners with all the essential information they need—engine performance, fuel management, maintenance tracking, GPS mapping, and educational resources. Many boaters use it alongside their multi-functional displays or as a handy substitute.

The app wirelessly connects to engines via the SmartCraft Connect module for real-time monitoring. Don't have the hardware? No sweat! Owners can still access manuals, tutorials, and other helpful resources.

Back in 2022, the old VesselView Mobile app was transformed into the Mercury Marine app with a fresh look (and new name!) and expanded capabilities. The team refined what was working and added new features to enhance the boating experience.

PROBLEM

PROBLEM

When I hopped aboard the Mercury UX team in 2023, the app's new visual DNA had been established but we needed to polish up the features that already existed and innovate some new ideas to take it to the next level.

Improve app's accessibility for real-world boating conditions

Improve app's accessibility for real-world boating conditions

Improve app's accessibility for real-world boating conditions

Accomadate a diverse range of users, from first-time boaters to seasoned experts

Accomadate a diverse range of users, from first-time boaters to seasoned experts

Accomadate a diverse range of users, from first-time boaters to seasoned experts

Develop innovative solutions for new features

Develop innovative solutions for new features

Develop innovative solutions for new features

How might we enhance the new Mercury Marine mobile app to create a more user-friendly and engaging experience, enabling boaters to quickly and easily access criticial information while on and off the water?

DESIGN PROCESS

User Research

User Research

OUR USERS

So who's using the Mercury Marine app?

Boaters, of course! If we want to create an experience they'll actually enjoy using, we need to understand their specific needs. When we're developing our user personas, here are the key factors we're considering:

So who's using the Mercury Marine app?


Boaters, of course! If we want to create an experience they'll actually enjoy using, we need to understand their specific needs. When we're developing our user personas, here are the key factors we're considering:

EXAMPLE PERSONA

What does a boater's journey look like?

What does a boater's journey look like?

What does a boater's journey look like?

REDESIGNING THE MAINTENANCE EXPERIENCE

A maintenance makeover


After reviewing the VesselView mobile app and learning more about what users really needed, we spotted an opportunity to improve the maintenance experience and build something more comprehensive in the new Mercury Marine app.


Keeping up with boat maintenance can be daunting, especially for less experienced boaters. Prior to the mobile app, owners had to flip through manuals and check engine decals to find maintenance information.


While VesselView mobile brought digital maintenance tracking to the table, we knew we could make the experience smoother and more user-friendly.

A maintenance makeover

After reviewing the VesselView mobile app and learning more about what users really needed, we spotted an opportunity to improve the maintenance experience and build something more comprehensive in the new Mercury Marine app.

Keeping up with boat maintenance can be daunting, especially for less experienced boaters. Prior to the mobile app, owners had to flip through manuals and check engine decals to find maintenance information.

While VesselView mobile brought digital maintenance tracking to the table, we knew we could make the experience smoother and more user-friendly.

A maintenance makeover


After reviewing the VesselView mobile app and learning more about what users really needed, we spotted an opportunity to improve the maintenance experience and build something more comprehensive in the new Mercury Marine app.


Keeping up with boat maintenance can be daunting, especially for less experienced boaters. Prior to the mobile app, owners had to flip through manuals and check engine decals to find maintenance information.


While VesselView mobile brought digital maintenance tracking to the table, we knew we could make the experience smoother and more user-friendly.

Recording maintenance in VesselView Mobile


Below you can see how maintenance was recorded in the previous app, showing the main usability hurdles boaters faced along the way.

Recording maintenance in VesselView Mobile

Below you can see how maintenance was recorded in the previous app, showing the main usability hurdles boaters faced along the way.

Recording maintenance in VesselView Mobile


Below you can see how maintenance was recorded in the previous app, showing the main usability hurdles boaters faced along the way.

USER STORIES

We needed the new maintenance experience to work well for all kinds of boaters—whether they take their boat to a dealer for service or roll up their sleeves and do it themselves. With this in mind, we focused on these user stories when redesigning the maintenance experience:

We needed the new maintenance experience to work well for all kinds of boaters—whether they take their boat to a dealer for service or roll up their sleeves and do it themselves. With this in mind, we focused on these user stories when redesigning the maintenance experience:

We needed the new maintenance experience to work well for all kinds of boaters—whether they take their boat to a dealer for service or roll up their sleeves and do it themselves. With this in mind, we focused on these user stories when redesigning the maintenance experience:

BENCHMARKING

Finding inspiration in the automotive industry


While the automotive world has plenty of standards in place, the marine industry is still charting its own course. When we're exploring new design ideas, we often look to car apps as the closest comparison to what we're doing for boaters. Below is an example of how we benchmarked the maintenance experience in Nissan's mobile app as a reference point.

Finding inspiration in the automotive industry

While the automotive world has plenty of standards in place, the marine industry is still charting its own course. When we're exploring new design ideas, we often look to car apps as the closest comparison to what we're doing for boaters. Below is an example of how we benchmarked the maintenance experience in Nissan's mobile app as a reference point.

Finding inspiration in the automotive industry


While the automotive world has plenty of standards in place, the marine industry is still charting its own course. When we're exploring new design ideas, we often look to car apps as the closest comparison to what we're doing for boaters. Below is an example of how we benchmarked the maintenance experience in Nissan's mobile app as a reference point.

UNDERSTANDING ACCESSIBILITY GUIDELINES

Accessibility on the water


The marine world doesn't have standard accessibility guidelines for digital devices on boats yet. While WCAG standards and best practices from other industries provide a foundation, we also need to address the unique challenges boaters face out on the water. Things like bright sunlight, wind, splashing water, and rocky waves can make screens hard to see and use, so designing for these real-world conditions is crucial. Some ways we address these factors include:

Accessibility on the water


The marine world doesn't have standard accessibility guidelines for digital devices on boats yet. While WCAG standards and best practices from other industries provide a foundation, we also need to address the unique challenges boaters face out on the water. Things like bright sunlight, wind, splashing water, and rocky waves can make screens hard to see and use, so designing for these real-world conditions is crucial. Some ways we address these factors include:

Accessibility on the water


The marine world doesn't have standard accessibility guidelines for digital devices on boats yet. While WCAG standards and best practices from other industries provide a foundation, we also need to address the unique challenges boaters face out on the water. Things like bright sunlight, wind, splashing water, and rocky waves can make screens hard to see and use, so designing for these real-world conditions is crucial. Some ways we address these factors include:

Improve visibility in bright sunlight


  • Provide dark mode option for adaptability

  • Use large, bold fonts when possible

  • Color contrast


Improve visibility in bright sunlight

  • Provide dark mode option for adaptability

  • Use large, bold fonts when possible

  • Color contrast

Improve visibility in bright sunlight


  • Provide dark mode option for adaptability

  • Use large, bold fonts when possible

  • Color contrast


Simple UI for quick glanceability


  • Clear iconography

  • Minimal text

  • Prioritize essential information on primary screens

Simple UI for quick glanceability

  • Clear iconography

  • Minimal text

  • Prioritize essential information on primary screens

Simple UI for quick glanceability

  • Clear iconography

  • Minimal text

  • Prioritize essential information on primary screens

Design for motion and stability


  • Large, well spaced touch targets for easy interaction

  • Reduce the need for precise gestures

  • Minimize reliance on scrolling or swiping for critical actions

Design for motion and stability

  • Large, well spaced touch targets for easy interaction

  • Reduce the need for precise gestures

  • Minimize reliance on scrolling or swiping for critical actions

Design for motion and stability

  • Large, well spaced touch targets for easy interaction

  • Reduce the need for precise gestures

  • Minimize reliance on scrolling or swiping for critical actions

Design

SKETCHING

Pen to pixel


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 explore ideas quickly while also beginning to map out the user flow.

Pen to pixel

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 explore ideas quickly while also beginning to map out the user flow.

Pen to pixel


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 explore ideas quickly while also beginning to map out the user flow.

MAPPING THE USER FLOW

How will boaters record maintenance?

While developing our designs, we mapped out user flows to visualize the journey and create a maintenance experience that makes the most sense. Below is the user flow detailing how a boater records maintenance in the mobile app.

How will boaters record maintenance?

While developing our designs, we mapped out user flows to visualize the journey and create a maintenance experience that makes the most sense. Below is the user flow detailing how a boater records maintenance in the mobile app.

How will boaters record maintenance?


While developing our designs, we mapped out user flows to visualize the journey and create a maintenance experience that makes the most sense. Below is the user flow detailing how a boater records maintenance in the mobile app.

DESIGN ITERATIONS

From Sketch to Figma

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.

From Sketch to Figma

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.

From Sketch to Figma


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.

Initial Concepts

Initial Concepts

Initial Concepts

Through multiple rounds of reviews, my team refined the designs to better serve our users. We also met with our software engineering team weekly to verify feasibility and keep our design intent aligned with technical constraints.

FINAL DESIGN

Supporting every type of boater

In our final design, we accounted for variations in the maintenance experience based on whether boaters have the SmartCraft Connect module to track engine hours. We wanted to make sure that even without a connection, boaters could still manually record maintenance, check engine health, and look back at their maintenance history.

Maintenance Experience

Record Maintenance

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.

FINAL DESIGN

Supporting every type of boater

In our final design, we accounted for variations in the maintenance experience based on whether boaters have the SmartCraft Connect module to track engine hours. We wanted to make sure that even without a connection, boaters could still manually record maintenance, check engine health, and look back at their maintenance history.

Supporting every type of boater

In our final design, we accounted for variations in the maintenance experience based on whether boaters have the SmartCraft Connect module to track engine hours. We wanted to make sure that even without a connection, boaters could still manually record maintenance, check engine health, and look back at their maintenance history.

Maintenance Experience

Maintenance Experience

Record Maintenance

Record Maintenance

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.

Prototype & Test

Please contact me for access to the Figma prototype link.

Please contact me for access to the Figma prototype link.

Please contact me for access to the Figma prototype link.

USABILITY TESTING

Usually when we create new experiences for the mobile app, we run usability tests with our final designs to see if real users can figure them out intuitively. These tests often reveal gaps we missed and lead to valuable iterations.

Unfortunately, time and resource limitations meant we couldn't conduct usability tests on the new maintenance experience. We had to jump straight into the next project, so we never got the chance to circle back and test it properly.

That said, since our design directly addressed the shortcomings we identified in the VesselView mobile app's maintenance experience, we were confident that our new approach delivered meaningful improvements for users.

Summary

PROJECT RESULTS

Once we wrapped up the new maintenance experience, we passed our final designs to the software engineering team and hit our deadline. Our improvements included a simpler flow for recording maintenance, a record of maintenance history, a breakdown of engine health, easier ways to contact dealers, and helpful maintenance education for DIY boaters.

During this project, we also transitioned to Figma, built a design system, and started integrating accessibility into all design work.

Once we wrapped up the new maintenance experience, we passed our final designs to the software engineering team and hit our deadline. Our improvements included a simpler flow for recording maintenance, a record of maintenance history, a breakdown of engine health, easier ways to contact dealers, and helpful maintenance education for DIY boaters.

During this project, we also transitioned to Figma, built a design system, and started integrating accessibility into all design work.

NEXT STEPS

  1. Monitor Key Metrics: Track performance data to evaluate the impact of the new maintenance experience

  2. Conduct Usability Testing: Gather insights from real users to identify pain points and improvement opportunities

  3. Improve Accessibility: Integrate accessibility into the design system while auditing and updating existing app pages for compliance with accessibility standards

PROJECT REFLECTION

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.

Avator Bag Usability Study

Avator Bag Usability Study

Developing a Design System

Developing a Design System

Scroll to top

Scroll to top

Scroll to top

More Projects

UI Design

Building a Design System

Coming Soon

UX/UI Design

Mobile Notification Design

Coming Soon

UX Research

Avator Bag Usability Study

Improving the Avator Bag design

Previous

Previous

Next

Next

Say Hello :)

©

Abigail Mira Grinberg

2024

Say Hello :)

©

Abigail Mira Grinberg

2024

Say Hello :)

©

Abigail Mira Grinberg

2024