2025.03 — Present

H2U Pano APP

This project is a behavior-driven health management app that combines personalized tasks, health tracking, and contextual supplement recommendations to help users build sustainable wellness habits.

Goal

Empower users to take action on their health through behavior-driven design.
To redesign the health dashboard experience of a wellness app, transforming it from a passive data display into an action-oriented daily guide. The goal is to help users:

  • Understand their current health status
  • Take small, manageable actions daily (e.g. hydration, protein intake, exercise)
  • Build sustainable health habits
  • Increase engagement and retention
  • Create business value by connecting tasks with health services and product recommendations (e.g. supplements, checkups)

Background & Product Positioning

This product is a behavior-driven health management app designed for everyday users who aim to build healthy habits and improve their lifestyle. Unlike traditional health apps that focus solely on data logging or medical reports, this app emphasizes turning “daily micro-tasks” into actionable steps. It guides users to gradually adopt better routines in nutrition, exercise, and physiological tracking through consistent, manageable actions integrated into their daily lives.

Role

Product Designer

Deliverables

User Flow
IA
Wireframe
Design System
Iterations

Design Tool

Figma

Cooperate with

1 PM
1 Android & iOS Engineer
1 Front-End Engineer

Get to know more about persona,  user journey and their pain point

Define questions and problems

Figure out the solution

Validate ideas（Tracking data & User Interview & Usibility Test）

Get to know more about persona,  user journey and their pain point

Define questions and problems

Figure out the solution

Validate ideas（Tracking data & User Interview & Usibility Test）

Pain Points Definition

User research insights

1. Unclear state presentation
2. Inconsistency in the operation methods between WEB and APP
3. Features that users intuitively expect but are currently missing

" I'm not quite sure what filter I'm currently using, and I don't know the differences between the filters underneath. "

H2U Pano is a personalized health management platform that integrates health checkups, health records, and lifestyle habits. The platform emphasizes its role as a "Health Dashboard" to help users monitor their physical condition and health trends. However, based on my observations, the following issues exist:
1. Fragmented Information

  • Various health data (e.g., step count, test reports, questionnaires) are displayed separately and lack an integrated overview.
  • There is no clear “Health Summary” or dashboard-style card, making it difficult for users to quickly understand their overall health status.

2. Mixed Module Types Without Clear Hierarchy

  • Some modules are tool-based (e.g., “Settings,” “Questionnaires”), some are information-based (e.g., “Health Reports,” “Consultation”), and others are commerce-driven (e.g., “Nutritional Supplements,” “Massage & SPA”).
  • Users may struggle to distinguish between primary tasks they should act on now, and secondary features meant for support or browsing.

3. Lack of Action Guidance

  • The homepage lacks a clear “Next Step” task guidance area, leaving users uncertain about what to do even after seeing their health data.
  • For example: “How many more steps are needed?” “Should I take a protein supplement?” “Is it time to schedule a health check?” – these actionable prompts are missing.

4. Unclear Prioritization and Guidance

  • Modules are not prioritized or rearranged based on the user’s current health status, causing key information to be diluted by less relevant modules.
  • Without personalized recommendations or strong visual focus, users can easily get lost in the overwhelming amount of content.

Competitive Analysis

Apple
‍HealthThe “Summary” page integrates various health data and presents key metrics using charts and trend graphs. According to Apple’s official website, “meaningful insights help you better understand your overall health and fitness—everything from daily activity to long-term trends—so you can see the full picture.” The focus is on offering users comprehensive, long-term health trend analysis for a clear overview of their condition.

MyFitnessPal
The home screen displays the calorie intake for the day versus the set goal, along with a progress bar showing the proportion of each nutrient. This allows users to instantly understand whether they are meeting their targets. The interface is minimal, displaying only the most relevant information (e.g., remaining calories), making it easy to understand and quickly log the next meal.
‍
Samsung Health
The homepage emphasizes multi-dimensional health tracking, including steps, heart rate, sleep, and stress. For example, Samsung highlights that after sleep tracking, users receive “a detailed sleep pattern report and overall sleep quality score,” along with actionable suggestions like stress reduction and meditation guides. The homepage modules are clearly divided, allowing users to quickly swipe through stats and get improvement tips.

Keep (Fitness App)
Keep integrates the workout flow into the main interface via the "Exercise Energy Ring" graphic, prominently placed at the center bottom of the homepage. Tapping the ring allows users to jump directly into a course or begin tracking a workout, seamlessly linking all training entry points. The homepage emphasizes the "Daily Workout Goal" and dynamic energy ring progress, reinforcing daily motivation and incorporating social challenges for added engagement.
‍
Key Findings:
‍All of the above competitors highlight information aggregation and action guidance. Health-related apps often use a dashboard or summary page as the homepage core, visually presenting key metrics and offering actionable task suggestions. Clear structure and prioritization help users quickly grasp their “current status + next step.”

User Research & Insights

Research Method:
Although no formal user interviews or corporate research collaborations were conducted for this project, we derived insights based on the following sources:User profiles of similar health apps in the market (e.g., Apple Health, MyFitnessPal, Keep)Product launch context within health checkup institutions and workplace wellness programs (e.g., core features of H2U Pano)Health behavior change models (e.g., Fogg Behavior Model, Hook Model)Personal usage experiences and observationsWe identified three primary target user groups and their core needs:

1. Health-conscious working professionals (ages 30–45)
Motivation:
Want to manage health systematically but lack time for in-depth research.
‍Behavioral pain points:Unsure how to choose supplements or interpret nutrition (e.g., “Am I getting enough protein? Did I drink enough water?”)Overwhelmed by data, unclear which metrics to focus on or how to act on them
‍Expectations:Want the app to intelligently recommend next stepsExpect clear reminders like “What to supplement” or “What action to take”

‍2. Middle-aged users with regular health checkups (ages 45–60)
Motivation:
Seek to understand health risks through checkups, with a focus on chronic and metabolic conditions
‍Behavioral pain points:Not accustomed to proactively using apps, but willing to follow remindersPrefer clear, concrete tasks without being overwhelmed by too much data
‍Expectations:Willing to take action (e.g., dietary changes, added exercise) based on suggestions

‍3. Younger users with strong self-tracking habits (ages 25–40)
Motivation:
Fitness-oriented, supplement users who value data and results
‍Behavioral traits:Regularly log metrics like weight, heart rate, stepsEnjoy motivation mechanisms like task-based challenges and badge unlocking
‍Expectations:Want to see progress and outcomes (e.g., task streaks, completion bars, achievement tracking)

Problems

The current homepage structure of H2U Pano is relatively fragmented, with modules displayed in a parallel layout lacking hierarchy or guidance. As a result, users may find it difficult to quickly grasp their overall health status or understand what action to take next.

Solutions

IA structure

The homepage information architecture is divided into four main sections: Health Checkup Progress, Daily Tasks, Personalized Supplement Recommendations, and Health Summary. The layout is designed based on users' cognitive priorities and daily usage frequency, helping them quickly understand their current health status and actionable tasks.

1. Integrated Health Dashboard & Supplement Recommendation Module
Design Goals:
  • Help users quickly understand their daily nutritional status and health behavior gaps
  • Increase the conversion rate of health suggestions (e.g., protein intake, SPA booking)
  • Create a closed loop from tracking → feedback → action (supplement, booking)
The UI centers on a "Daily Nutrient Progress Summary Card", guiding users to quickly grasp their current status and take the next step (view suggestions, tap recommendation, or update records).
Why Choose Option A Over Option B?

Chosen (A):
 Modular card design displaying daily supplement intake status (e.g., protein, fiber, hydration) and behavior progress bars (e.g., steps, sleep), each with actionable CTA buttons (e.g., “View suggestions,” “Update log,” “Book checkup”).

Not Chosen (B):
 A unified large-scale dashboard with visualizations (e.g., pie chart or tabbed line chart) summarizing all metrics primarily for passive review, without direct CTAs.

Rationale:
  • Daily health behavior is dynamic; modular cards allow users to focus on specific improvement suggestions
  • Separating record modules and recommendation modules creates clear action paths and boosts conversion
  • Visualized gap vs. streak completion increases motivation to close behavior gaps
Trade-off:
  • Lower visual consistency: Different modules (protein, sleep, hydration) use varied card formats, which may feel inconsistent to users preferring unified dashboards
  • Higher integration cost: Requires syncing with multiple data sources (e.g., Apple Health, Fitbit, manual logs), and backend support for daily refresh and aggregation
Collaboration with PM / Engineering / Business:
  • Discussed with PM to evaluate user learning curve and conversion potential of both options
  • Business stakeholders preferred keeping immediate purchase potential (e.g., protein supplements, checkup bookings), which modular design supports better
  • The technique is feasible.
Health Check Task Module
This module uses a “task-oriented” approach combined with personalized time-based prompts to divide the health check process into three stages (Not Yet Booked → Booked → Completed), aiming to enhance reminder effectiveness and completion rates.
Design Goals:
  • Increase booking rates and prevent missed health check opportunities
  • Clearly display task status and transition flow
  • Guide users through CTAs and offer supplementary suggestions (e.g., iron supplements)
Key Design Elements
1. Status Tags and Stage Prompts
  • Not Yet Booked → CTA: “Book Now”
  • Booked → CTAs: “View Details,” “Add to Calendar”
  • Completed → Display: “Tap to View Report Summary”
2. Task Countdown & Personalized Reminders
Example: “Only 10 days left until your recommended health check date” + emoji to enhance urgency
3. Data-Driven Personalized Recommendations
Suggest supplementary tasks based on age/gender
4. Visual Design
Progress bar + transition states + consistent module CTAs for clarity and engagement
2. Daily Task Module

To help users develop daily healthy habits, this module is built around "completable" health task cards. The system generates a modular task list daily, encouraging users to complete 2–4 essential health behaviors (such as hydration, protein intake, and steps), thereby increasing participation and conversion to action.

Design Goals:
  • Build a clear, achievable health task system
  • Guide users to complete basic healthy behaviors daily and develop micro-habits
  • Connect task completion with personalization, recommendations, and commercial conversion
  • Boost users’ sense of “I can do this” and trigger motivation
Design Goals:
User Insight–Driven Design Strategy:
Design Summary:
  • Task goals should be specific and actionable (e.g. “Walk 500 more steps”, “Drink 500ml water”), avoiding vague objectives
  • Behavior reward timing: CTA like “I’ve completed this” triggers immediate reward (emoji or compliment), boosting sense of success
  • Recommendations are personalized based on behavioral data (e.g. low iron = suggest iron intake)
  • Trackable feedback: Checklist + streaks encourage continued engagement
Trade-off analysis :
Chosen:
Task card design enables quick action and motivation, boosts behavior completion
Not Chosen:
Uniform list view or static summary chart lacks engagement and real-time prompting
Trade-off Explanation
Modular card design better supports behavior completion. Compared to passive chart-style layouts, it improves task clarity, action conversion, and long-term motivation.
3. Modularized Nutrient Recommendation (Quantum Nutrition Module)
Purpose:

This module aims to break down nutritional supplement recommendations into understandable, actionable micro-units (“quantized information”). It enables users to quickly comprehend the reasoning behind the suggestion based on their personal health records and guides them naturally toward the product selection and purchasing process.

Design Highlights
1. Personalized Summary Prompts
Dynamically delivers reminders based on users' last 3 days of records.
Example: “You’ve had insufficient protein intake for 2 days.”
Behavioral psychology insight: People are more receptive to suggestions tied directly to their personal behavior. This enhances emotional resonance and increases click-through rates.
2. Quantized Information Breakdown (step-by-step supplement rationale)
Displays micro-statements like:
  • Supports muscle recovery and satiety
  • Recommended before dinner
Helps users gradually understand “why” the supplement is needed, reducing cognitive load and resistance.Behavioral psychology insight: Based on the Fogg Behavior Model—lower the barrier and provide clear calls to action.
3. Simplified Product Card Design (recommended 2–3 per view)
Each card includes:
  • Product type → Usage timing → Pairing suggestion → Highlight tags
    Clear visual hierarchy avoids decision fatigue. The “View More Recommendations” CTA leads to a complete list, maintaining clarity without sacrificing exploration.
4. Clear CTA Guidance
The CTA “View more supplement options” is placed at the bottom of each card, keeping the layout clean while encouraging exploration and conversion.
Task-Based Conversion Module Design
This module is designed as a behavior-driven conversion system based on task records. By leveraging users’ individual dietary logs and supplement behaviors, it dynamically recommends relevant nutritional products and actionable tasks—helping foster product affinity and improve conversion rates.
Design Components Include:
  • Recommend actionable supplement tasks based on records (e.g., “Replenish protein”)
  • Trigger visual feedback upon task completion (e.g., +1 point, encouragement message)
  • Offer “Add Reminder” functionality for periodic supplement notifications
  • Integrate contextual product recommendation cards (with persuasive rationale)
Trade-off Analysis
Why Choose Option A Over Option B?
Chosen (A): Recommend executable supplement tasks and products based on users' behavior logsNot Chosen (B): Use static commercial banners or product-only listings
Rationale:
  • Behavior-driven framing builds trust and improves click-through rates
  • Personalized actions feel more credible, reducing the perception of “being marketed to”
  • Data scarcity may affect accuracy—requires fallback to rule-based logic
  • Early collaboration with PMs/engineers is needed to define behavioral data fields and task triggers
Trade-off:
Task Cards Based on User Records
  • Example copy: “Based on your record, your protein intake has been low. Consider a supplement.”
  • Psychological basis: Personalized and relevant prompts increase emotional resonance and execution likelihood
  • UI Interaction: Task card with CTA (“I’ve completed this”), success animation, and achievement points
Reinforced Feedback Mechanism:
  • Clicking “I’ve completed this” triggers dynamic praise and +1 point
  • UI Interaction: Task card with CTA (“I’ve completed this”), success animation, and achievement points
Optional Recurring Reminders:
  • After completing a task, users are prompted: “Would you like to set a recurring reminder?”
  • Addresses forgetfulness and helps prevent unconscious behavioral lapses
Inspired by: Keep and Fitbit Premium’s contextual task systems, which have demonstrated up to 20% conversion improvement.
4. Visualizing Historical Records: Helping Users See Their Own Efforts

To address the problem of “low motivation and poor consistency in completing health tasks,” this solution proposes a visualized task history module, with core elements including:

  • Display of task completion records (e.g., checklist, streak, progress bar)
  • Enhanced visual feedback (colored bars, badges, +1 achievement messages)
  • Support for gradual goal achievement and accumulation of a sense of accomplishment
Trade-off Analysis
Chosen (A):
Display visual records (checklist, calendar view, progress bar)
Not Chosen (B):
Only display status text such as “Completed” without tracking historical records
Rationale:
  • Users can see the trace of their efforts, helping form habits and reinforce a sense of accomplishment
  • According to Atomic Habits, visualizing progress significantly improves habit formation and engagement
Trade-off:
  • Requires additional UI design and backend data structure support
  • If data is limited in the early stage, the visual impact will be low — but the module can be gradually upgraded
Achievement Guidance and Self-Feedback:
  • Upon task completion, trigger visual affirmations like:“+1 badge,” “You’ve completed 4 out of 5 days this week”
  • Combine gentle animations with positive reinforcement text to avoid disruption
Decision Logic:
Additional Notes
  • If real user data is not yet available, label this feature as a “conceptual model” that can be validated with real data later
  • Design the module in a modular way to enable reuse across other health-related tasks.

Validation:
Behavioral Psychology Behind the Design

This design leverages multiple behavioral psychology theories to strengthen user motivation for completing health tasks and accepting supplement recommendations. Combined with task module details, it is supported by the following models:
‍
BJ Fogg Behavior Model (Behavior = Motivation × Ability × Trigger)
Design Application: Personalized task cards + CTA buttons

According to Fogg’s model, the key to triggering behavior is reducing execution barriers and providing a clear prompt.
 The task card directly displays messages like “Your protein intake is low—supplementation recommended,” along with a clear “I’ve completed it” button, acting as an effective behavior trigger.
‍
Nir Eyal’s Hooked Model (Trigger → Action → Variable Reward → Investment)
Design Application: Real-time praise + visual feedback after completing tasks

Each completed task triggers an animation and a +1 reward point, reinforcing emotional satisfaction and encouraging repeat behavior.
 This “check-in” feedback builds a sense of accomplishment and strengthens user engagement in the habit loop.

NN/g Research on User Sense of Control (Control increases trust and participation)
Design Application: Option to set recurring reminders with customized frequency

After completing tasks, users can choose whether to receive reminders and set their own frequency.


This gives users a sense of control, increasing receptiveness and long-term engagement.
Habit Formation Theory


Design Application: Visualized task list + accumulation of small wins

The tracking module shows streaks (consecutive days) and completed tasks, allowing users to see their progress.


Small, quickly completed tasks build momentum and reinforce healthy behaviors over time.
‍
Commercial Conversion Research (Keep / Fitbit Premium / Apple Fitness)
Design Application: Contextual product recommendation cards based on user data


By embedding supplement recommendations within the task module (“What to take → Why → Act now”), the design avoids intrusive advertising and increases conversion with a seamless, data-driven experience.

Success Metrics

User Behavior

Business Outcomes

Validation & Testing

Design System

This redesign aimed to help users better manage fragmented health data and take meaningful action through a more personalized, task-oriented home screen. Although no formal user validation was conducted before handoff, the design was intended to drive the following outcomes:

These design directions were informed by healthcare UX best practices and analogous apps like Healthily, Ada, and Samsung Health. Future validation could include tracking task completion rates, time spent on the homepage, and return frequency.

Design System

APP UI

Reflection & Key Learnings

This project marked my first time applying a modular design approach to a health-focused product. From information architecture planning to the breakdown of behavior-driven UI components, I learned how to transform complex health behaviors into actionable task modules that align with varying user cognitive loads and data comprehension levels.

It was also my first experience incorporating B2C purchase decision-making flows into health-related interactions—for example, guiding users from completing a hydration task directly to relevant supplement product recommendations and purchase triggers. This allowed me to explore how to integrate user motivation, task completion, and business conversion within a seamless experience.

Additionally, I reflected on:
1. How to prioritize modules on the homepage based on usage frequency and mental load
2. How to use elements like emoji, streaks, and performance summaries to strengthen behavioral triggers
3. How to balance limited homepage space with clear guidance and modular hierarchy

This project not only expanded my domain knowledge in health and wellness but also enhanced my practical skills in behavioral UX, modular system planning, and commerce-driven product thinking.

Related Digital Products

Noise Eraser Web & APP

#AIAudio #NoiseCancellation #VoiceEnhancement #AudioUX #WebAppDesign #AIUX  #SoundDesign #ProductivityTech

Crypto Website

#CryptoUX #DeFiDesign #Web3Design #BlockchainUX #FintechDesign #CryptoPlatform #SecurityByDesign #UXStrategy

Recruitment APP

#RecruitmentApp #UXDesign #TalentMatching #JobPlatform #B2BDesign #HRTech #MobileUX #FormOptimization #TaiwanUX

Welcome to contact me !

Email:  hmc10116@gmail.com

Line ID: hmc10116