H2U pano
About H2U pano
H2U Pano is a comprehensive health benefits platform designed for businesses, focusing on the collection and tracking of health screening data. It offers AI-powered personal health management, making it easy for users to take control of health.
My Roles
1 Designer
-
40% Design Strategy
-
30% UX Design
-
20% UI Design
-
10% Art Director
Challenge
Pano, as a health management platform, must meet diverse needs, including various age groups and services for both general and corporate users. Accessibility principles are essential to ensure a positive experience all.
The key challenge is completing product design within a tight timeframe, covering strategy, exploration, art, and interface design.
Therefore, the design system focuses on scalability, componentization, and continuation.
Insights
Taking over the product design of H2U pano is not an easy task.
This brand has not been optimized for a long time, and all design experiences are stuck 10 years ago.
Problem Statement
-
design lacks a cohesive system, resulting in inconsistency.
-
Optimizations were made without thorough planning, leading to negative impacts.
-
The product now appeals to broader audience with a different user profile.
-
Over the past decade, the design hasn't been optimized, making it substandard compared to current technology and visual styles.
Main Goal
-
Systematized design
-
Product content structure adjustment
-
Redesign pano vision
-
Strengthen pano brand expression and competitiveness
Our Target
Design Strategy
We redesigned Pano by examining its story, gathering user feedback, and analyzing competitors Users should perceive the product as a source of companionship, protection, warmth, and stress.
The product's core comprises valuable services, precise guidance, and support.
Break down the into design experience, then further divide that into four design directions.
I refined these four design directions into achievable design experiences and implemented them in all pano products.
Example - 01 Cards
There are multiple information blocks in the system. The list is changed from a dividing line to a card-style design.
The information is clearly hierarchical, which better integrates and distinguishes content and enhances readability.
Example - 02 Buttons
The design of new buttons emphasizes visual distinction between CTA general buttons. Important buttons are more visible and easier to click, while less urgent buttons are less prominent, ensuring normal operations remain unaffected.
Current design
Buttons lack primary or secondary differentiation.
New design
Buttons have no primary or secondary distinction
Example - 03 Icons
Optimize icons that are higher-level, more complex, and difficult to read to enhance brand recognition. Neutral, frequently appearing icons should maintain their original design.
.png)
Delivery
About the LINE mini App
To expand its user base, pano has partnered with LINE to release a mini app.
You can search for pano on LINE or access the mini app through the official pano account.
The mini-program can be accessed from the LINE official business account menu.
lightweight version of Pano tracks health data, measures daily health status manages check-up appointments, and connects with AI health experts.
I revamped the product architecture to align with user habits. In 2026, we'll introduce an AI Agent and a personalized health assistant using existing data.
original design
Optimized home page
Business services preferred
Personalized experience first
.png)
The original product's main pages and functions.
The redesigned main pages and functions of the product.
Highlight Feature: "pano Health Snap"
This is a health monitoring feature that can measure your basic health status in 1 minute. It also allows you to track your health data within a mini app.
Design system
The design system for this project focuses on communication with engineers and delivery.First, the basic design logic is defined.
This project attempts to use AI tools to help convert pre-defined design elements and Design tokens into code.
(Although the code was still not fully usable in this trial and required further adjustments, we significantly reduced the time spent communicating between designers and developers :)
Use the AI tools that come with Figma to check if there are any replacement design tokens in the design draft.
Illustration
The brand identity was revamped to shift from a serious, formal image to a warmer, vibrant one, while still conveying professionalism and trust.
Illustrations in the LINE mini app
LINE Official Account Menu
Workflow
We use AI tools to assist in the design workflow, optimize efficiency and quality delivery, and significantly reduce the amount of work in the early design phase and the time spent on design checks.
Original workflow
New workflow
User Feedback
There is not enough data to analyze yet.