Introduction
Welcome to the behind-the-scenes journey into the making of the Health Companion Super App! In this blog post, I’ll be pulling back the curtain on the UI/UX design process, from early user research and persona creation to the nitty-gritty of prototyping and usability testing. This isn’t just a dry report; it’s a story of transforming complex healthcare challenges into an intuitive, engaging mobile experience.
This app is designed to empower individuals with chronic conditions by helping them manage their medications, schedule doctor appointments, and securely communicate with healthcare professionals all with ease and clarity. Join me as I share my creative process, the challenges I faced, and the insights that drove my design decisions, giving you a closer look at how I developed a truly user-centered healthcare solution.
User Research and Key Findings
In my design process for the Health Companion Super App, I relied on extensive user research to ensure a truly user-centered approach. Below is a brief overview of my research strategy and the key insights that helped shape the app’s design.
Primary Research Methods
-
In-Depth Interviews and Focus Groups
I researched several semi-structured interviews and focus groups with target users such as patients with diabetes, hypertension, and other chronic conditions to explore their daily challenges, technology usage, and desired app features. -
Surveys and Questionnaires
I reviewed existing online surveys to gather quantitative data on medication consistency, appointment management challenges, and preferred communication channels. These surveys underscored the importance of clear instructions and accessible interfaces, especially for users with limited digital literacy.
Secondary Research Methods
-
Literature Reviews and Case Studies
I analyzed studies on mobile health (mHealth) apps for chronic disease management. Research such as mHealth 2019 (Wellframe User Personas) provided deep insights into user behaviors and adherence challenges, revealing that high mobile penetration does not automatically lead to app adoption. Cultural and physical barriers, like language preferences and poor eyesight, emerged as critical factors that require thoughtful design adaptations. -
Competitive Analysis
I examined established platforms like Wellframe to understand best practices in user-centered design. Key takeaways included the need for:- Localization and Accessibility: Automatically adapting content for diverse users (e.g., Spanish, Haitian Creole).
- Ease of Support Communication: Incorporating care advocates and in-app messaging to enhance user engagement.
- Personalization: Delivering tailored health checklists and reminders that cater to unique user needs.
Design Implications
Based on my research, I ensured that the app would:
- Incorporate Multi-Modal Communication: Utilize both SMS and in-app alerts.
- Provide Personalized Content: Leverage language localization.
- Simplify Interfaces: Make sure the app is accessible for users with varying levels of digital literacy.
- Integrate with Health Services: Seamlessly connect with appointment scheduling.
- Offer Robust Support and Training: Include comprehensive onboarding.
User Personas
Based on the previous research findings, three detailed personas were created to encapsulate the diverse needs of the app’s target users. These personas serve as reference points throughout the design process to ensure that every feature meets a real user need.
The personas are as follows:
User Journey Map
The following user journey map provides a comprehensive overview of the Health Companion Super App experience, from discovery and registration to daily engagement and ongoing re-engagement. It outlines each key touchpoint, detailing user actions, goals, emotions, and pain points encountered along the way.
The map helped identify pain points and opportunities for improvement in the user experience, from initial onboarding through to regular app usage.
Design Principles
The design system for the Health Companion Super App was carefully crafted to ensure consistency, accessibility, and user-friendliness across all interfaces.
My design choices focus on creating a calming, professional healthcare environment while maintaining excellent readability and visual hierarchy. The following key design elements form the foundation of the user interface:
Color Palette
The color scheme was carefully selected to create a calming and trustworthy healthcare environment while ensuring optimal accessibility.
The soft blue primary color conveys professionalism and reliability, while the soft cyan and light green accents add a fresh, modern touch that promotes wellness.
These colors maintain WCAG 2.1 compliance for accessibility while creating visual harmony throughout the interface.
- Primary: Soft Blue (
#4A90E2) - Secondary: Soft Cyan (
#50E3C2) - Accent: Light Green (
#7ED321) - Background: White (
#FFFFFF)
Typography
Typography plays a crucial role in any mobile app’s accessibility and readability. I chose Roboto for its clean, modern appearance and excellent legibility across different screen sizes.
The font sizing hierarchy ensures clear visual organization while maintaining comfortable reading sizes for users with varying visual abilities.
- Font: Roboto
- Font Size:
- Body Text: 16px
- Headings: 18–24px
Sizing
Consistent spacing and sizing are crucial for creating a balanced, accessible interface.
I implemented a standardized 16px unit system throughout the app to maintain visual harmony and improve usability.
The rounded corners and consistent padding create a friendly, approachable feel while ensuring content remains easily readable and interactive elements are comfortably tapable.
- Border Radius: 16px
- Spacing:
- Padding of 16px
- Margin of 16px
Prototypes
Moving from concept to reality, the development of the Health Companion Super App began with essential wireframe designs that laid the groundwork for a comprehensive health management solution.
As the design evolved into the final prototype, the basic structure was enhanced with refined user interfaces, intuitive navigation patterns, and a cohesive visual language. The progression maintained the app’s fundamental purpose while introducing more sophisticated features like personalized health insights, detailed medication adherence tracking, and interactive health data visualizations.
The following sections showcase both the initial wireframes and the polished prototype, highlighting how the design matured while maintaining its user-centric approach to health tracking and management.
Wireframe
These initial wireframes served as a skeletal blueprint, mapping out the core functionalities:
- Onboarding
- Medication Tracking
- Appointment Scheduling
- Healthcare Team Communication
- Setting User Preferences
- Enabling User Feedback
Final Prototype
After iterating on our initial wireframes, I developed the final prototype of the Health Companion Super App, transforming the early concepts into a fully-realized, interactive design. In this phase, I not only refined the user interface and navigation patterns but also introduced several key enhancements to elevate the user experience.
Notably, the final prototype includes:
- Health Metrics Monitoring: A dedicated module that continuously tracks and displays vital health metrics, giving users clear insights into their progress over time.
- Splash Screen: A welcoming splash screen that establishes the app’s calm and accessible visual language, setting the tone from the first interaction.
- Interactive Health Metric Visualization: Dynamic, engaging visualizations that allow users to interact with and interpret their health data easily.
The following sections showcase the screens that make up the final prototype.
Usability Testing
Putting the App to the Test
No matter how polished a prototype looks, real user feedback is what makes or breaks a design. For the Health Companion Super App usability testing wasn’t just a checkbox, it was a critical step to ensure the app truly served its users. Here’s how I approached it.
Defining Goals and Tasks
I focused on three core goals:
- Simplifying Onboarding: Could users with limited digital literacy easily register and input medical details?
- Validating Core Features: Were setting reminders, booking appointments, and messaging providers intuitive?
- Clarity in Data Visualization: Could users understand their health metrics at a glance?
To test these, I designed scenario-based tasks mirroring real-life use:
- Creating a profile with chronic condition details.
- Setting a daily medication reminder.
- Booking, then rescheduling, a doctor’s appointment.
- Sending a message to a healthcare provider.
- Interpreting dashboard stats like blood pressure trends.
Gathering Real-World Insights
I recruited a diverse group reflecting our personas to test both in-person and remotely. This included older adults, caregivers, and tech-savvy organizers. During sessions, I asked participants to “think aloud” while completing tasks, observing where they hesitated or struggled.
Feedback came from multiple angles:
- Live Reactions: Hearing users vocalize confusion during tasks (e.g.,
"Where's the 'reschedule' button?"). - Post-Test Surveys: Ratings on ease of use and clarity.
- Follow-Up Interviews: Deeper dives into pain points, like unclear terminology in the scheduling flow.
Learning and Iterating
After each test, I categorized issues by severity and frequency. For example:
- Many users missed the rescheduling button (critical flaw).
- Others found the dashboard charts overwhelming.
This led to rapid cycles of:
- Redesigning Problematic Flows (e.g., adding a prominent
"Reschedule"option). - Simplifying Data Visualizations with clearer labels and progressive disclosure.
- Retesting to confirm fixes worked.
One key takeaway? Even small tweaks, like swapping medical jargon for plain language, dramatically improved usability for older adults.
Reflection
Designing the Health Companion Super App taught me how deeply user insights can transform a product, and how humbling it is to realize your first draft is never the final answer. Here’s what I learned along the way.
Learning from Real Users
Through interviews, surveys, and focus groups, I discovered just how varied user needs could be. For example:
- Digital literacy gaps shaped my approach: I streamlined onboarding with bite-sized forms and added guided tutorials after hearing users describe registration as “overwhelming.”
- Personas became my compass. “The Overwhelmed Patient” reminded me to prioritize clear language, while “The Disconnected” pushed me to simplify navigation for users anxious about complex interfaces.
When Testing Reveals Blind Spots
Usability testing was a reality check. Watching users struggle with the appointment scheduler, a feature I’d assumed was intuitive, forced me to rethink my assumptions. Key takeaways:
- Clarity Trumps Cleverness: Charts I designed to be “comprehensive” were seen as cluttered. This resulted in me simplifying their design to eliminate any unnecessary clutter.
Balancing Complexity and Simplicity
The biggest challenge? Building a feature-rich app that still felt simple. For example:
- Voice-assisted features emerged as a solution for low-literacy users during testing.
- Iteration saved the day: Every round of feedback led to small tweaks, like swapping medical jargon (“hypertension”) for plain language (“high blood pressure”).