Solution — simplify the electric experience in one system.
Electrification enables digital dashboards that deliver real-time insights—reducing anxiety and boosting confidence on the water.
.svg)
marine dashboard human-machine interface
.png)
Product Designer
Design & product lead — scope and documents
UX — user research + testing
UI — wireframing + prototyping + design system
David Yan — PM
David Shi — Lead SWE
Harris Das — SWE
Muhammad ur Rehman — SWE
Ivan Lui — HWE
Sept 2024 - present
MVP launched Feb 2025
Designed a 10.1 inch HMI display delivering real-time data for electric boats. Led product from concept to MVP with 4 engineers, resolving key software and hardware challenges.
Delivered a functional MVP in 5 months, accelerating business timeline by 45% and streamlining real-time data integration, which reduced engineering development and enabled stakeholder demos.
Problem
Problem — boaters face range anxiety and limited real-time safety visibility.
Traditional dashboards lack real-time data, leading to poor UX and safety concerns. A simplified, unified display restores confidence and control on the water.
.svg)
.svg)
Solution — simplify the electric experience in one system.
Electrification enables digital dashboards that deliver real-time insights—reducing anxiety and boosting confidence on the water.
.png)
How can we ensure these problems are real and worth solving?
Speaking to users, understanding business goals, and proposing feasible designs with existing technology.
.svg)
.png)
TLDR — provide boaters with their needs in one glance.
Simplifying the electric experience means removing unnecessary information that doesn’t add value, allowing users to focus on what truly matters.
I led 3 software engineers to deliver a MVP in 5 months.
As product and design lead, I narrowed the product scope. This timeline included both user research (UX) and user interface (UI) design to ensure a user-centered approach.
.svg)
Defined the product vision.
There was a lot of preparation before starting the design process. What is the business objective? How is this product supporting this objective?
.svg)
.svg)
.svg)
Research
They were all boaters but in different generations.
Identifying our users was the first step before the design process. This step allowed our team to tailor every decision to the core needs of our target audience.
.png)
Interviewed 10 boating experts to gather as much insight as possible.
Our next priority was gathering user insights, as we had limited marine industry knowledge. I designed a set of 10 interview questions for a concise 30-minute session to maximize data collection.
.png)
.png)
Then came card sorting.
After conducting user interviews, card sorting emerged as the ideal strategy for organizing insights into categories. The goal was to facilitate group discussion and deeper analysis.
.png)
.svg)
Organized insights in Figjam.
We used Figjam to further organize information into appropriate categories: MVP, next version, hardware limitation, and exclude.
.svg)
.svg)
Finding our competition in the current market.
These events revealed key insights into current HMI technology and marine industry trends, helping us align our designs more effectively.
.png)
.png)
Structure
Mapped the structure and flow.
The foundation consisted of mapping the user flow - identifying all user entry points, gesture controls, call-to-actions, and exit points. The goal was to simplify the user experience.
.svg)
Structure
It wasn't about perfecting a single design. It was iterations.
I used low, mid, and high fidelity designs to establish visual hierarchy.
.png)
.png)
.png)
.png)
Final, final, final. We're all guilty of this.
I used trial and error to test designs, continuously improving through feedback and iteration.
.svg)
Imagined a perspective from our users.
Creating user stories enabled us to imagine scenarios as a boater. This also helped us understand the 3 click rule - to reach a destination with less than 3 actions.
.png)
.png)
Visuals
Established a design system tailored for a touchscreen model.
Before jumping into high fidelity, I created a design system for visual consistency. Since the user interface is touch-screen, text must be legible from a distance and buttons must have a comfortable radius for good user feedback.
.png)
Assisted developers to match desired results.
Coordinated on little details such as defining px to dp/sp for our android application.
.png)
.png)
Good design = strong rationale to solving a user's problem.
Ensured every decision was intentional and aligned with solving the user's problem.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Sometimes, less is more.
Not all screens made it to MVP. They were either out of scope, resource heavy, or impractical due to safety purposes.
.png)
.png)
Tested both alpha and beta stages of MVP.
Focused on WCAG standards such as contrast, usability, and flow. For example, some of the text was illegible due to sizing and low contrast ratio.
Testing
Aligned stakeholder requirements with product vision and company goals.
Enabled early demos, faster stakeholder alignment, and quicker iteration cycles—bringing the product to market ahead of schedule.
Testing
Challenging industry but rewarding.
This project pushed me to think beyond screens — to consider physical, environmental and systematic context. I learned that great product design means more than a good looking product; it’s about clear communication, trust, and control for users in high-stakes environments.
Testing
.png)
.png)