As the sole designer, I partnered with H2U’s PM and dev team to boost user satisfaction and streamline enrollment for 3M+ members, raising the iOS app rating from 2.2 to 4.6 by redesigning the landing page.
Product
Role
Duration
Team
What is H2U Pano
H2U Pano is a digital health platform (SaaS and mobile) that helps companies provide wellness benefits to employees by linking checkups and lifestyle data to personalized services.
Problem Statement
Results
Process
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.
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
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 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
Develop - Improving the Onboarding Experience
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
Integrated third-party login options for quicker and more convenient sign-ins.
Third-Party Login Options
Develop - Accessibility Audit
I checked colour contrast and tested for colour blindness, confirming strong accessibility and an inclusive experience.
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
UI Mockups - 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
Health Checkup Purchase:
The new feature lets users book health checkups directly on the platform. We tested layouts and picked the simplest for clarity, added breadcrumbs to guide them, and turned the hospital’s paper form into an easy-to-use interface.
Final Thoughts
Learning & Reflection
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.
