Summer Intern Showcase
Mercury Mobile App Home Page Redesign
UX/UI Design Intern: Brynn Davis
Introduction
About Me
Overview
UX/UI Design
Summer Intern
01
Initial Research & Insights
03
Final Design Walkthrough
05
Recommendations
02
Pain Points
04
Resolved Pain Points
06
Takeaways
Agenda
Initial Research
Competitive Analysis
Audit of Similarities Between Other Vehicle App Experiences
Existing Data from Users
User Complaints & Unmet Needs
Stakeholder Interviews
Engaged stakeholders to identify key strengths, pain points, and opportunities from diverse organizational perspectives.
Previous Research Usability Concerns
Opportunity Areas Identified in Previous Research
Poor Information Hierarchy & Discoverability
Critical information, features & resources difficult to find due to cluttered layouts & lack of visual hierarchy
Unintuitive Interactions
Interface patterns (expandable menu & extensive nav bar) create friction and increase cognitive effort
Quick description about the section.
Ineffective Support
Software updates, instructional content & help resources lack visibility, context, and guidance, making them easy to overlook
Lack of Visual Engagement
Users and stakeholders felt the app relied too heavily on grayscale elements, making the experience feel less engaging and visually distinct.
Slow Performance
Delayed loading of features, data & app content interrupts workflow & reduces trust in the experience
Pain Points
User Pain Points Identified in Research That Guided Design Solutions
Final Design Walkthrough
Experience Enhancements Validated by Research and Testing Results
Before
“It is hard to know what is all on the app and find everything in it.”
User
Vertical Scroll
Improves discoverability, faster access to information, and stronger visual hierarchy make key features easier to find, prioritize, and use.
Before
After
“I saw that there was something cutoff there, so I usually just scroll when I see that.”
User
Before
“Toggling between multiple vessel engines should be made more efficient from the main vessels app page instead of going into each vessel configuration to select the engine”
User
Vessel Tile
Transforms the Home screen into a central hub by surfacing key vessel information, controls, and actions directly on the dashboard, reducing the need to navigate to a separate vessel page for common tasks.
Before
After
Vessel Selection Dropdown
Enables users to quickly switch between vessels directly from the Home screen, ensuring the vessel tile always displays the most relevant data and controls for the selected vessel.
“I really like this vessel selection method rather than having both vessels on the same page.”
User
Engine Button
Access engine-specific details such as specifications, manuals, and tutorials across connected engines from a tab controlled popup.
Devices
Provides a centralized area for device management, allowing users to view device details, install software updates, access troubleshooting tools, and find support resources in one place.
“I can see it needs an update without you telling me. I like having a place to find everything for that device.”
User
Vessel Settings
Manage vessel details, control which devices are displayed, and customize vessel-specific settings from a centralized location.
Never Connected
Not Connected
Connected w/ NOKI, Dual Engine
Connected
States
Before
"If you didn't know you could select more, you might look at the app and say it has limited functionality — you might not even know there's more in the background."
User
"So I pushed on this and then now I can lift it up. I didn't know that. It's hidden there. I did not know this menu went up."
User
Horizontal Scroll
By surfacing tutorials, devices, and related resources in a more accessible format, users can discover content more easily, browse more efficiently, and explore without adding visual clutter.
Before
After
Before
User defaults to “more” if they cannot find something
“More” label lacks a descriptive mental model, increasing cognitive load during navigation.
Simplifying Navigation
By prioritizing key destinations and aligning with familiar mobile patterns, users can navigate more confidently and reach important features faster.
Before
After
"I really like how everything is right here and I don’t have to search through other pages."
User
Poor Information Hierarchy & Discoverability
Critical boating information, features & resources difficult to find due to cluttered layouts & weak visual hierarchy
Unintuitive Interactions
Interface patterns create friction and increase cognitive effort
Quick description about the section.
Ineffective Support
Software updates, instructional content & help resources lack visibility, context, and guidance, making them easy to overlook
Lack of Visual Engagement
Users and stakeholders felt the app relied too heavily on grayscale elements, making the experience feel less engaging and visually distinct.
Slow Performance
Delayed loading of vessel data & app content interrupts workflows & reduces trust in the experience
Pain Points
User Pain Points Resolved in Design Solutions
Consolidating multi-vessel/engine experience and footer nav bar creates a simpler navigation experience, allows user to reach live data easier & adds value back to home page
Navigation Simplicity
Replacing expandable menu with vertical scroll & surfacing high-priority content on home screen makes key features & resources easier to find/ access
Hierarchy & Discoverability
Replacing complex interaction patterns with familiar vertical scrolling experience reduces friction & makes browsing content more natural
Intuitive Interactions
Presenting support resources, tutorials, and device management through dedicated horizontal carousel increases visibility & makes content easier to discover
Effective Support
Expanded beyond grayscale by introducing brand-aligned colors, in response to user and stakeholder feedback for a more engaging experience.
Palette Exploration
Consolidating key vessel information on home page reduces unnecessary calls to cloud & APIs, creating a more efficient experience
Performance & Efficiency
Recommendations
Screen Sizes
Adapt and optimize the experience for tablet, landscape, and larger mobile screen sizes to ensure consistency across devices.
Additional Testing
Test the redesigned experience with boat owners to confirm improvements in navigation, discoverability, and task completion.
Enhancing the Boating Experience
Features such as trip planning, boating how-to's, weather/radar integration, and interactive animations offer opportunities to increase engagement beyond core vessel management.
Where To Go From Here?
Takeaways
What Did I Learn?
All Feedback is Good Feedback
Every piece of feedback helped me improve and strengthen my designs.
Ask, Ask, Ask
The more questions I asked, the better I understood the problems I was solving.
Importance in Thinking Outside the Box
Stepping beyond the app's existing color palette and exploring broader brand standards helped me create a more flexible, engaging, and cohesive experience.
Balancing User and Business Goals
Creating successful solutions meant finding the right balance between user needs, stakeholder priorities, and technical constraints.
Thank You!
Connect with me on LinkedIn! @Brynndavis11
Icons Components
Use Cases
Icons Components