H5000 & NMEA2000

Project Name:
H5000 & NMEA2000: Inputs and outputs


Problem Statement:
The previous system had significant usability issues, requiring extensive scrolling and making it difficult for users to understand. The goal was to create a scalable design across different devices that enhanced usability and clarity.


Client/Company:
B&G

Screenshot-2023-04-12-at-7.28.29-AM Screenshot-2023-04-12-at-7.37.19-AM

Research Process: While I did not personally conduct research, insights were provided by the UX and Product Directors. They gathered feedback from boat shows, customer service calls, and informal meetings with users.


Key Challenge Identified: The old design caused confusion, leading to frequent customer service calls. It required excessive scrolling and lacked clarity.

Placeholder: UX Double Diamond image
Create a clean, high-resolution version of the UX Double Diamond framework and save it as a PNG or SVG? Link to process page when I make one

Screenshot-2023-04-12-at-7.28.29-AM

Core problem statement:
The existing system suffered from usability issues due to excessive scrolling, lack of clarity, and text-heavy interactions. The new design needed to be scalable across devices, reduce cognitive load, and provide a more visual, intuitive user experience.


Prioritization approach:
The overarching usability issue was broken down into sub-issues, which were prioritized based on stakeholder feedback and user pain points.

Screenshot-2023-04-12-at-7.27.23-AM

Ideation and solution exploration:
Followed the Double Diamond process, starting with problem definition and research insights, then exploring multiple design directions before refining a final solution.
Conducted multiple iterations while maintaining continuous stakeholder communication.
Hardware schematics were required to gain a deeper understanding of constraints and possibilities.


Wireframes, prototypes and iterations:
Created multiple rounds of wireframes to refine the user flow and interaction design.
Built an interactive prototype to showcase navigation and user interaction.
Documented insights and notes throughout the process.


Collaboration:
Maintained constant communication with stakeholders, developers, and designers to refine direction, ensure consistency, and validate technical feasibility.


Placeholder: Wireframes & Prototypes
High-resolution wireframes as PNGs or SVGs for clarity.

Screenshot-2023-04-12-at-7.29.18-AM

Usability Testing:
Conducted by the research team, and feedback from that team indicated positive findings.


Key Iterations:
Due to the absence of a strict deadline for this particular part of the H5000 & NMEA2000 project, the design was refined through numerous iterations until all stakeholders were confident in the final product.

Screenshot-2023-04-12-at-7.29.28-AM

Final Design Summary:
The final solution leveraged visual elements to reduce cognitive load, introduced color-coding where only plain text and dropdowns previously existed, and minimized the need for excessive scrolling.


Key Design Decisions:
Shifted towards a more visual system to improve comprehension of complex interactions.
Introduced color-coded elements to replace plain text for easier navigation.
Optimized layout to ensure critical functions were accessible without excessive scrolling.

Placeholder: Final UI Screens
Export Recommendation: High-fidelity mockups should be exported in PNG/JPG format with a consistent aspect ratio.

 

Performance Metrics:
Reduced customer service inquiries related to navigation issues.
Improved word-of-mouth feedback at boat shows.


Stakeholder Feedback:
All stakeholders were impressed, particularly as this was my first project with them.

 

Learnings & Reflections - Successes:
Effective collaboration and communication ensured alignment with stakeholders.


What I Would Do Differently:
Be more assertive in presenting a refined selection of options rather than all iterations.
Ask key hardware-related questions earlier to avoid mid-process delays.

Growth as a Designer:
This project deepened my understanding of designing for hardware-centric products and how users experience complex systems in real-world scenarios.

Next Steps:
Future refinements based on long-term user feedback.
Potential scaling to other hardware interfaces.

 

Screenshot-2023-04-12-at-7.29.46-AM

H5000 & NMEA2000 inputs and outputs

Project Name: H5000 & NMEA2000 Inputs and Outputs


Problem Statement: The previous system had significant usability issues, requiring extensive scrolling and making it difficult for users to understand. The goal was to create a scalable design across different devices that enhanced usability and clarity.


Client/Company: B&G
Your Role: UX/UI Designer

Screenshot-2023-04-12-at-7.28.29-AM Screenshot-2023-04-12-at-7.37.19-AM
Screenshot-2023-04-12-at-7.28.29-AM
Screenshot-2023-04-12-at-7.27.23-AM
Screenshot-2023-04-12-at-7.29.18-AM
Screenshot-2023-04-12-at-7.29.28-AM
Screenshot-2023-04-12-at-7.29.46-AM
Screenshot-2023-04-12-at-7.30.19-AM
Screenshot-2023-04-12-at-7.30.04-AM
Screenshot-2023-04-12-at-7.30.36-AM
Screenshot-2023-04-12-at-7.30.45-AM
Screenshot-2023-04-12-at-7.33.46-AM
Screenshot-2023-04-12-at-7.31.53-AM
Screenshot-2023-04-12-at-7.31.18-AM
Screenshot-2023-04-12-at-7.32.04-AM
Screenshot-2023-04-12-at-7.32.41-AM
Screenshot-2023-04-12-at-7.32.04-AM
Screenshot-2023-04-12-at-7.33.25-AM
Screenshot-2023-04-12-at-7.31.43-AM
Screenshot-2023-04-12-at-7.34.32-AM
Screenshot-2023-04-12-at-7.32.58-AM
Screenshot-2023-04-12-at-7.36.23-AM
Screenshot-2023-04-12-at-7.37.19-AM
svg-image

Interested in working together? Get in touch!

Aska Lai
-

UX/UI Product designer
aska.j.lai@hotmail.com

Proficiencies
-
Figma
Figjam

Miro
Jira
Confluence
Photoshop
[Currently learning] Blender

Selected Works

LendleaseFull process