Product
Role
Timeline
Team
What is H2U Pano and why it matters
H2U Pano is a digital health platform, available as both a SaaS and mobile app, that helps companies offer wellness benefits to employees. It connects medical checkups and lifestyle data to personalized health services like dashboards, wellness programs, and checkup booking.
Problem Statement
My Task
Redesigned the entire H2U Pano digital health platform across SaaS, iOS, and Android to provide corporate employees with wellness benefits, connecting health checkups to personalized services and products that support healthier lifestyles.
Results
Project Process
The product manager and assistant conducted research and gathered some feedback from users, but needed an experienced UI/UX designer to define the project goals and take over from the development stage. I led the design to completion and delivered a design system the client could maintain moving forward.
Industry & Product Immersion
Before diving into design, I took time to understand the client’s industry, business model, and product, especially since it was new to me. This research helped me uncover market trends, and competitive positioning, ensuring my design decisions were grounded in context and aligned with both user needs and business goals
Solutions for Time Constraints
Given the tight timeline (16 functions in 3 months), I implemented several strategies to keep the project on track:
Milestone Planning:
For more efficient progress, I broke down the UI work into 6 weekly milestones, grouping related features together.
Getting Extra Support:
Since the timeline was tight, I shared my concerns with my boss. As a result, we brought in a design intern to help move things forward.
Faster Feedback Loops:
To speed up the design process, I proposed weekly check-ins with the client’s decision-maker. This helped us get quick feedback and avoid long delays.
Define - Design Objectives
To guide the redesign and new feature integration, I defined the following key design questions:
How might we simplify the health report and personal record features to encourage regular use without causing confusion?
How might we improve the onboarding experience to help users adopt the platform more easily and increase retention?
How might we integrate new features, health checkup purchases and a membership point system, while keeping the user flow and interface intuitive?
Develop - Refining User Flows
To tackle the first HMW question, I mapped out the existing user flows, not just for the new features, but the entire platform ( Desktop & Mobile ). This helped me spot areas that were confusing or inconsistent, so I could redesign the flows in a simpler and more user-friendly way.
The user flows of the entire platform
Develop - Wireframes for New Features
To ensure the new health checkup and membership point features aligned with user needs, we held a workshop and built wireframes using Axure. This allowed the team to brainstorm freely, explore feasibility, and identify the most intuitive solutions.
General Member Page (Translated from Chinese)
Develop - Improving the Onboarding Experience
To address the second HMW question, I proposed and implemented the following design enhancements:
Collaborated with the visual designer to design a mascot that softens the platform’s formal tone and brings a more human, friendly touch.
The Mascot for Homepage
Redesigned the landing page to explain core features more visually and simply.
Landing Page
Integrated third-party login options for quicker and more convenient sign-ins.
Third-Party Login Options
Develop - Accessibility Audit
To ensure the platform met accessibility standards, I conducted color contrast checks and simulated various types of colour blindness. The results confirmed strong visual accessibility, supporting an inclusive user experience for a broader audience.
Colour Contrast:
Initially, the client preferred only light mode and insisted on using their brand color for key buttons. However, the contrast ratio did not meet accessibility standards. I proposed introducing a dark mode to improve contrast and offer users an alternative with better readability, which the client accepted.
Colour Contrast Check for Both Mode
Color Blindness:
I tested the interface against common types of color blindness. The results confirmed that key elements remained distinguishable, supporting a more inclusive and accessible user experience.
Colour Blind Check for Main Pages
UI Mockups - Before & After
Health Checkup Report:
The previous version displayed only a list of report results, requiring users to manually check each item to find the information they needed.
The new version introduces filters to help users locate relevant information more efficiently. Additionally, a report overview section has been added, allowing users to quickly view key highlights along with professional recommendations.
Before
After - Light Mode
After - Dark Mode
Navigation:
The previous version lacked a clear information architecture and proper grouping with titles, making it difficult for users to navigate and find what they needed.
In the new version, content is reorganized under clear category headings, and text size has been slightly increased to improve readability.
Before
After - Light Mode
After - Dark Mode
Personal Records:
The previous UI was difficult to read due to poor colour contrast and a cluttered layout that made it hard to scan information.
The redesigned version features a cleaner layout and clearer content structure, allowing users to easily skim and find what they need.
Before
After - Light Mode
After - Dark Mode
Health Checkup Purchase:
This new feature lets users book health checkups directly on the platform. We tested several layout options and chose the simplest one to make the process clear and easy to follow. Breadcrumbs were added to help users stay on track while browsing many options. We also transformed the hospital’s paper form into a user-friendly interface, so users can choose their services without confusion.
Learning
Prioritizing What Matters Under Time Constraints
Even with limited time, certain steps like accessibility checks and a full experience audit are too important to skip. I also learned that involving stakeholders early, instead of waiting to present a polished version, can improve efficiency and ensure better alignment.
