Redesigning a digital health platform to improve onboarding, usability, and user satisfaction
Product
Role
Timeline
Team
Key Outcome
About the Product
H2U Pano is a digital health platform that connects hospitals with corporate staff. By integrating medical checkup data and lifestyle data, it delivers personalized health services and supports easier checkup booking.
Challenges
Project Process
The PM and assistant gathered some feedback, but they needed a UI/UX designer to set goals and lead. I took over, finished the design, and delivered a reusable design system.
How I Solved It
Simplifying the product structure
To address first objective:
Since no one had checked the old user flows, I mapped out the entire platform's flows for desktop and mobile. This helped me find confusing gaps such as incomplete signup and settings, and I streamlined flows that were too long or repetitive.
The user flows of the entire platform
Improved first-time user understanding
To address the second objective:
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
Third-Party Login Options
Strengthened accessibility and consistency
Colour Contrast:
The client wanted only light mode with their brand colour, but it was below contrast standards. I suggested adding dark mode for better readability, and they agreed.
Colour Contrast Check for Both Mode
Color Blindness:
I tested the interface for common types of colour blindness and confirmed key elements were still clear, making the experience more inclusive.
Colour Blind Check for Main Pages
Outcomes
Rating change:
Improved the iOS rating from 2.2 to 4.6 through clearer product structure, smoother onboarding, and stronger accessibility support.
Experience improvement:
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.
Design system / maintainability value
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.
UI Highlights - Before & After
Health Checkup Report:
Before, users had to scroll through a long list of results to find what they needed.
Now, filters and a report overview with key highlights and recommendations make it much easier to get the right information quickly.
Before
After - Light Mode
After - Dark Mode
Navigation:
Previously, poor structure and missing titles made it hard to navigate.
In the new design, content is grouped under clear headings with larger text for easier reading.
Before
After - Light Mode
After - Dark Mode
Personal Records:
Previously, poor contrast and a cluttered layout made reading difficult.
In the new design, a cleaner layout and clearer structure let users scan and find information easily.
Before
After - Light Mode
After - Dark Mode
