H2U Pano APP

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.

Five Bottom Tabs & Why They Were Chosen:

1. Home (Health Overview)
Core Value:
Give users an instant understanding of their current health status and what actions they should take.
Role: The app’s “Health Dashboard” + “Daily Guidance & Task Center”
Content Includes: Health summary, task reminders, next-step suggestions, personalized notifications, supplement suggestions
High Usage Frequency: Most users open the app daily to check this section
Psychological Model: “I want to quickly know how my body is doing today and if there’s anything I need to do.”

Inspired by Apple Fitness’s Summary and MyFitnessPal’s Home, which immediately highlight key health data

2. Records (Exercise / Diet / Sleep / Weight)
Core Value: Users need a place to review history and spot trends to feel more in control
Role: Historical data hub + Behavior reflection center
Content Includes: Past diet logs, step/exercise records, sleep stats, weight trend charts
Moderate-to-High Usage Frequency: Not checked daily, but users return regularly
Psychological Model: “I want to see if I’ve improved and where I need to focus more”

Inspired by Keep’s data calendar and Samsung Health’s Records page to help users track behavior trends

3. Tasks (Health Challenges + Check-ins + Progress Tracking)
Core Value: Provide a centralized place for users to see “What do I need to complete today?” and gain a sense of accomplishment.
‍Role Definition: Task checklist hub and habit-building check-in zone
‍Content Includes: Today’s tasks, hydration reminders, fitness challenges, streak completion
‍High Usage Frequency: Task activity is the driving force behind habit formation
‍Mental Model: “I want to check in / What have I completed / What have I missed?”

Referenced apps: Habitica, Duolingo, Fabulous — focus on task completion, not just logging

4. Recommendations (Health Shop / Supplement Suggestions)Core Value: Deliver personalized supplement suggestions at the right time to promote health and drive business conversions.
Role Definition: Supplement recommender, service upsell gateway, nutrition fulfillment entry
‍Content Includes: Personalized product suggestion cards, shop entry, product details, subscriptions
‍Moderate to Low Usage Frequency: Rarely accessed, but highly effective when triggered at the right time
‍Mental Model: “What am I lacking recently? Are there any health services that could help me improve?”

Referenced apps: Fitbit Premium, Keep’s Health Store — promotes closed-loop conversions after task completion

5. My Profile (Account Settings + Reports + Surveys)Core Value: Consolidates low-frequency but essential personal information and management functions
‍Role Definition: Account, settings, health report history, personal health files, survey reviews, notification management
‍Content Includes: Member info, health history, insurance details, notification preferences
‍Low but Necessary Usage Frequency: Users need to know where to find these when needed
‍Mental Model: “I want to find my info / update settings / review my health report”

Corresponds with the “Me” or “Profile” sections commonly seen in apps like LINE, Spotify, MyFitnessPal

Why Choose a Bottom Navigation Bar Instead of a Hamburger Menu?

1. Higher Visibility & Intuitive Operation

• The bottom navigation bar is always visible, letting users instantly see key functions (e.g., Home, Tasks, Records, My Profile)
• In contrast, hamburger menus hide content and require tapping to discover what's inside

2. Fewer Steps, Higher Efficiency

• Bottom navigation: One tap to access a feature
• Hamburger menu: Tap to open the menu, then tap again to select — two or more steps, which slows down the flow

3. Better for Habit Formation

• A visible tab bar acts as a fixed visual anchor, helping users remember and form habitual interaction
• Health management apps often encourage daily tracking and check-ins, which demand fast and frequent access

4. Ideal When Feature Count is Limited

• If the app’s main features number between 3 to 5 (e.g., Health Overview, Tasks, Records, Recommendations, Profile), bottom navigation is optimal
• Hamburger menus are better suited for apps with 8+ features that are used infrequently (e.g., customer support, terms, about us)

1. Integrated Health Dashboard & Supplement Recommendation Module

• 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)

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.

Why Behavior-Based Tasks Felt More User-Centered

• Psychological framing:
  Personalized prompts anchored in user behavior feel less like marketing and more like care — helping users feel seen rather than sold to.
• Emotional impact:
  A task that says “You’ve been low on iron for 3 days” carries more weight than “Buy this iron pill.” It creates a moment of internal reflection and action.
• Interaction flow:
  Each task card includes a CTA (e.g., “I’ve completed this”), triggering a lightweight success animation and awarding achievement points.
  
  For users like Kevin — who regularly tracks his fitness goals — this small feedback loop taps into motivation and habit reinforcement.
• Optional recurring reminder:
  After task completion, users are asked:
  ‍
  ‍“Would you like to set a recurring reminder for this?”
  This small prompt helps users avoid falling back into passive patterns, especially for tasks that require consistency (e.g., supplements, hydration).

This decision was inspired by task-based systems seen in apps like Keep and Fitbit Premium, which have shown up to 20% improvement in engagement and conversion when health actions are personalized and contextual.

Validation:
‍
Although we didn’t conduct formal usability testing or launch validation for this feature, the design direction was grounded in proven behavioral patterns seen in industry benchmarks.
‍
Apps like Keep and Fitbit Premium have demonstrated increased engagement by framing health actions as contextual, personalized tasks — rather than static product placements. This precedent gave us confidence that building a habit-forming, feedback-driven task system would better motivate users and reduce friction in behavior change.
‍
Our design choices were further supported by established models like the Fogg Behavior Model, which emphasizes the power of clear triggers and perceived ability in driving consistent action.

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.

• 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)

• Not Yet Booked → CTA: “Book Now”
• Booked → CTAs: “View Details,” “Add to Calendar”
• Completed → Display: “Tap to View Report Summary”

We wanted to improve booking rates and follow-through on health check actions, especially for users who often forget or procrastinate. Option B, though easier to implement, lacked behavioral reinforcement — it offered minimal visibility into task progression and no psychological trigger for urgency or follow-up.

Option A framed the health check as an interactive task flow, which allowed users to understand where they were in the journey and what to do next — whether that’s booking, adding it to their calendar, or reviewing results. This approach was informed by behavioral psychology models and common design patterns in habit-forming apps like Fitbit and Keep.

We collaborated with PMs to define the three-stage logic and identify which system events could be used as triggers (e.g., booking confirmation, checkup completion). Engineers flagged that real-time health check status might be delayed depending on data integration from hospital systems, so we designed for fallback states (e.g., “Estimated booking date” if no API confirmation exists).PMs also requested that the design remain flexible, as booking logic may vary across partner institutions. To meet this requirement, we made all status transitions and CTA text configurable based on metadata.

We accepted the trade-off of longer implementation time in exchange for clearer task framing and higher expected completion rates.

Despite additional coordination with engineering and slightly extended development time, we aligned with PMs on Option A due to its stronger alignment with product goals (user action → health check → report review). This structure also allowed us to reuse modular components and logic for future task types, such as vaccination or screening reminders.

This approach was supported by behavioral UX principles (e.g., Fogg Behavior Model), as well as benchmark data from similar health apps where task framing improved follow-through behavior. The modular structure was reviewed positively during internal design reviews for its clarity and expandability.

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

• 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

Chosen (A): A modular task card design that presents 2–4 daily health tasks in an interactive, completable format (e.g., “Drink 500ml of water,” “Walk 500 more steps”), with built-in feedback and motivational reinforcement.

‍Not Chosen (B): A static summary view or uniform checklist layout with no real-time prompts, limited interactivity, and no behavioral feedback loop.

Our goal was to help users build sustainable, healthy habits through small, daily actions. While a static summary or checklist view (Option B) would have been simpler to implement, it lacked behavioral triggers and emotional engagement.

We designed the task module to resonate with different types of users across our key segments:

For busy working professionals, completing even one small task — like “Drink 500ml of water” — can feel like a win in an otherwise hectic day. The “I’ve completed this” button gives them a clear action, not just passive information.

For self-motivated users who track their fitness regularly, interactive cards and streak tracking reinforce their internal drive. A completed task turns into visual momentum, building consistency over time.

This format allows the app to act as more than a tracker — it becomes a coach and a motivator. Instead of overwhelming users with vague suggestions, we give them something specific, doable, and instantly rewarding.

Behavioral design models support this: actionable micro-goals + immediate feedback increase habit formation and daily engagement, especially when tied to personal relevance.

We aligned early with PMs and engineers to define the behavior tracking logic and ensure daily task cards could dynamically adapt to user data (e.g., hydration history, step count, nutrient intake). One of the key challenges was ensuring the backend could generate personalized tasks each day without overloading the system.

Engineers suggested limiting the number of active daily tasks to 4 per user to balance personalization with performance. PMs also requested that commercial recommendations (e.g., supplement suggestions) be smoothly integrated into the task card format rather than as separate banners — a constraint that influenced our modular design approach.

Although Option A required more front-end and logic development effort, the long-term value in behavior conversion and habit-building was considered more aligned with the product vision.

We chose the task card model after cross-functional discussion, guided by the insight that daily health actions should feel small, doable, and satisfying. The card format was better suited for nudging micro-behaviors, visually tracking progress, and embedding lightweight commercial opportunities (e.g., “Your iron is low – consider X supplement”).

The approach was inspired by high-performing behavior-based flows from Keep and MyFitnessPal, which demonstrated improved engagement when tasks were completable and rewarded in real-time.

3. Modularized Nutrient Recommendation

• A clear explanation of why the supplement is needed (e.g., “supports muscle recovery and satiety”)
• Suggested timing (e.g., “take before dinner”)
• A curated set of 2–3 product recommendations (to reduce decision fatigue)
• Simple CTAs like “I’ve completed this” or “Set reminder”

‍Chosen (A):
Recommend actionable supplement tasks and products based on users' health and dietary logs (e.g., “Replenish protein”), using task cards to guide users through small, achievable actions that connect to product recommendations.

Not Chosen (B):
Display static banners or generic product lists with no connection to users’ personal health context.

Rationale:
For health-conscious users aged 30–50, pushy product ads feel off-putting, but they’re open to personalized suggestions grounded in their own behavior.

For example, a prompt like:
“You’ve had insufficient protein intake for 3 days. Consider a supplement.”
feels relevant, trustworthy, and actionable — not like marketing, but like guidance.

This builds user confidence and overcomes friction like:
“I want to be healthier, but I don’t know where to start.”

Our design follows principles from the Fogg Behavior Model (reduce friction, increase motivation) and is inspired by platforms like Keep and Fitbit Premium, which have reported up to 20% improvement in engagement and conversion using behavior-based prompts.

• Technical Complexity: Requires structured behavior logs, rule-based triggers, and collaboration with engineers to define fallback logic when data is sparse.
• Time Constraints: Initial launch uses rule-based logic; future iterations may evolve to use machine learning for smarter recommendations.
• Risk Consideration: If recommendations are off, users may perceive it as disguised marketing — thus, the design must clearly explain “why this suggestion” to maintain transparency.

• PMs supported this direction for its blend of user value and business potential.
• Engineers suggested launching with a simplified logic model and modular architecture to support future scaling.

We chose A because people don’t want to be sold to — they want help making small, meaningful choices.
By rooting suggestions in user behavior, we build trust, guide action, and bridge the gap between insight and behavior.

Validation:
Although no formal A/B test was conducted, the approach aligns with proven UX models and competitor benchmarks. Future validation can be done through click-through rate (CTR) and supplement task completion tracking.

4. Design Rationale: Why This Supplement Purchase Flow Was Designed This Way

1. Personalized suggestions based on user health records — not generic ads
Many health apps and e-commerce platforms promote supplements using overwhelming banners and product lists, which often lead users to question, “Is this even relevant to me?”
This design analyzes recent user behavior (e.g., dietary logs) to identify potential deficiencies (like low protein intake), and then recommends appropriate supplements. This makes the suggestion feel more like professional advice than a sales pitch.
‍Example: “Your protein intake has been low over the past 3 days. Consider adding whey protein.”

‍2. Breaking down information to reduce cognitive load
Not every user understands nutrition science. This design breaks supplement recommendations into easy-to-understand micro-units (quantized information), such as:Supports muscle recovery and satietyRecommended before dinner

‍This approach lowers the mental effort required to comprehend suggestions and aligns with the Fogg Behavior Model by reducing the barrier to action.


‍3. Clear visual presentation to prevent decision fatigue
Each product card is tightly scoped to highlight only three core elements: When to take, What it’s for, and Key benefits.
Unlike traditional marketplace pages that list 10+ items at once, this design avoids overwhelming the user, encouraging exploration instead of avoidance.


‍4. Interactive task framing and feedback to boost action and conversion
By embedding supplement recommendations into a “completable task” format, users can tap “I’ve completed this” and receive light animations, encouragement messages, or points — creating a sense of achievement and increasing motivation to return.


‍5. Built-in reminders to support consistent usage habits
After task completion, the system asks, “Would you like to set a recurring reminder?”
This mirrors contextual task systems used in Keep and Fitbit Premium, which are known to improve long-term user adherence and habit formation.

‍6. Business conversion meets user trust
Although the goal is to promote supplement purchases, this design avoids aggressive sales tactics like banners or pop-ups.
Instead, commercial conversion is woven into relevant, context-driven health advice, preserving user trust while still supporting business goals.

5. Visualizing Historical Records: Helping Users See Their Own Efforts

To address the common issue of “low motivation and poor consistency” in health apps, I designed a visualized task history module inspired by behavioral models and competitor insights. While we didn’t conduct formal user interviews, indirect research and behavior-driven design principles offered valuable guidance.

Users — particularly busy professionals and older adults — often lose track of their efforts or feel their progress is invisible, leading to a drop in motivation. According to Atomic Habits and behavioral models like the Fogg Behavior Model, seeing progress and receiving feedback reinforces positive habits. Apps like Keep and Fitbit Premium show that even lightweight feedback mechanisms can significantly improve consistency and task completion.

• Help users recognize their efforts and build micro-habits over time
• Reinforce motivation through clear visual feedback and milestones
• Lay the foundation for habit formation by starting small and scaling gradually

• Requires additional UI design and backend support for tracking progress
• Early-stage limitations on data may reduce impact — the module is therefore designed to scale