Health Hub
How I designed a responsive website that allows users to view, update, download, and share health documents of their children.
Parents need an easy way to access and manage their children’s medical records. Our app keeps everything secure, organized, and within reach, whether it is for school, camp, or upcoming healthcare visits.
Role & Timeline
Solo Product Designer
3 weeks
April 2025
Methods
User Research / User Journey Mapping / Competitive Analysis / Design Audit / Visual design / Prototyping / Testing
The Problem
Parents often face the challenge of managing their children’s medical records. Important documents can easily get lost, upcoming appointments are sometimes forgotten, and accessing records for school, camp, or emergencies can be stressful and time-consuming. Existing solutions on the market either feel too complicated or lack the security parents need, leaving them without a reliable way to stay organized.
This uncertainty can lead to anxiety and missed opportunities for proper care. Health Hub aims to provide parents with a secure, intuitive, and centralized platform so they can confidently manage their child’s healthcare information without added stress.
Pain Points and Assumed Needs
So what issues do we currently have? Well after research it seems many users have issues regarding ease of accessibility as well as the following:
Scattering
Medical records are scattered across multiple providers or systems, making them hard to access in one place.
Reminders
Parents forget when check-ups, vaccinations, or follow-ups are due.
Shuffling
Parents with more than one child struggle to manage separate health timelines.
Inconsistency
Parents want a calm, non-overwhelming interface, especially when dealing with something as important as their child’s health.
Persona
Demographic
41
AA in I.T
IT support specialist
Philadelphia, PA
Married with 3 Children
Meet Marcus Hernandez
Pain Points
Finds juggling multiple kid's health info overwhelming and confusing
No good/easy mobile versions of already existing services
Goals
Keep track of all 3 kids vaccination schedules, and health appointments
Have quick access to children's medical records on phone
Journey Map
To better understand user needs, I created a persona named Marcus. As a father, Marcus wants to have instant access to his children’s medical records and the ability to upload or share new documents as needed. His top priority is ease of access and minimizing obstacles that could slow him down. Health Hub is designed with Marcus in mind, featuring clear navigation and well-labeled tabs to reduce confusion. By prioritizing simplicity and clarity, the app builds trust and allows Marcus to manage his children’s healthcare efficiently, with confidence that he can handle any situation without unnecessary stress.
Competitive Analysis
To understand the landscape, I analyzed two direct competitors in the healthcare space: FollowMyHealth and MyChart. Both apps provide services for managing health records and reviewing documentation.
While they offer comprehensive data collection, they fall short in areas critical to the user experience, including clear navigation and modern accessibility standards. FollowMyHealth, for example, lacks responsive design, making the desktop and mobile experiences feel disconnected. These gaps revealed opportunities for Health Hub to create a platform that is not only functional but also intuitive, accessible, and easy to navigate across devices.
Strengths
Simple, centralized portal for accessing health records
Cross-platform support with mobile apps and web portal
Weaknesses
Poor navigation for complex family or multi-child management
Limited support for document downloads or printing
Mobile experience lacks polish and responsiveness
Strengths
Widely used by many healthcare providers across the U.S
Comprehensive patient data including visits, medications, lab results
Weaknesses
Mobile app can be clunky and unintuitive, especially for parents managing multiple children
Printing and downloading important records can be complicated or hidden
Site Map
Before beginning the design process, I needed to organize and structure all the content to ensure clarity and smooth navigation. I created a site map to arrange tabs and information hierarchically, allowing me to visualize how each section of the app would fit together. This structure made it easier to adjust layouts and ensured that users could navigate the platform intuitively from the very first interaction.
Starting the Design
With the site map finalized, I moved into the design phase. I transitioned from pen and paper to marker and paper to enhance clarity and explore visual improvements. These sketches provided early glimpses of the Health Hub homepage for both desktop and mobile versions.
Following a process similar to my other projects, I marked key features and organizational decisions with stars to indicate the elements that best supported the app’s goals. This step allowed me to experiment with layout, hierarchy, and usability before moving into digital prototypes.
The homepage wireframes were designed with simplicity, clarity, and emotional impact in mind. By emphasizing clean spacing and thoughtful use of negative space, the layout creates a calm and welcoming experience for parents. Larger imagery highlights the importance of family, reinforcing Health Hub’s family-centered purpose.
While the paper wireframes are minimal, they established a foundation for a spacious and intuitive interface. These principles were carried over to the mobile version, where ease of use was prioritized, allowing parents to quickly access, upload, and view essential documents with minimal friction.
Digital Wireframes
After completing the paper sketches, I transitioned to creating digital wireframes. The starred features and organizational choices from the paper versions were incorporated, along with additional adjustments based on early reflections. These digital wireframes allowed me to refine the layout, improve spacing, and focus on accessibility, ensuring that navigation would be intuitive for all users.
The digital versions provided a clear vision of how parents could easily access, upload, and manage their children’s medical records with minimal friction.
Upcoming appointments are immediately visible to user
Quick Actions are available, allowing faster navigation
Quick Access Cards allow users to view child profiles immediately
Recent Health Records gives summary of most recent visit
Mobile Digital Wireframes
Search bar implemented to assist in navigation
Vertical display of cards allows for more space and breathability
1st Rendition
With the digital wireframes complete, I moved into the visual design phase. The first rendition focused on creating a sense of space and calmness, helping parents navigate the app with ease. Simple elements, such as a clear toolbar and a limited set of buttons, were prioritized to reduce cognitive load and ensure that essential actions were easy to find. This initial design laid the groundwork for a user-friendly interface that balanced functionality with a welcoming, family-centered experience.
A language dropdown was added to promote accessibility and inclusivity, ensuring parents from diverse backgrounds can navigate the site with ease. Placing it on the homepage makes it immediately visible and accessible, meeting users where they first arrive.
White space was intentionally used to create visual clarity and calm, giving the design a sense of breathability that helps reduce stress when navigating important health information about a child.
Typographic hierarchy was used to separate content by importance, reinforcing a core principle of effective and accessible UI design.
3 uniform buttons were grouped together using consistent size to reinforce their shared purpose. This was a result of applying the Gestalt of similarity and proximity for a more intuitive and organize user experience.
Mobile Version
Why This Design?
F6F6F2
The chosen color palette creates a balanced and soothing visual environment, designed to support the emotional needs of parents managing their children’s health information. Warm, clear, and professional tones help users feel calm, focused, and in control. Psychologically, these soft colors reduce cognitive load and anxiety, making it easier for parents to complete tasks that can often feel stressful or urgent. This thoughtful use of color reinforces Health Hub’s goal of providing a reliable and reassuring experience.
Design System
Alongside the visual designs, I developed a design system to support the Health Hub app. This system serves as a blueprint, defining every color, font, size, and component used throughout the interface.
By establishing these standards, future updates or expansions can be implemented efficiently without the need to recreate elements like buttons or layouts. The design system ensures consistency across the app, reduces development time, and provides a scalable foundation that keeps the user experience cohesive as the platform grows.
Testing
With the first rendition of the Health Hub designs complete, it was time to gather feedback from real users. The goal was to collect rich insights that could guide meaningful improvements. To encourage participation, I once again used incentives, offering Chipotle gift cards to students around my campus.
This approach proved effective, attracting a strong group of participants who engaged with the app and provided valuable feedback. Their input became the foundation for refining the design and enhancing the overall user experience.
Initiating the Usability Study
With the designs finalized and participants gathered, it was time to conduct the usability study and gather actionable feedback.
The primary goal was to understand how easily users could navigate the full app experience and identify any challenges they encountered. Key questions guided the study: Could users quickly find and access their children’s medical records from the homepage or dashboard? Did the design elements, including layout, colors, and fonts, support a calm, accessible, and professional experience for parents? Most importantly, would users feel confident and comfortable using Health Hub to manage their children’s health information on a regular basis?
Details of the Study
The following chart below presents all the crucial information that went into organizing and conducting the usability study.
Attributes
Details
Study type
Unmoderated
Participants
5 participants who have children between the ages of 0-17 years of age
A user with a visual impairment
A user with an auditory impairment
Non-native English speakers or bilingual users
Length/Location
Each session will see a time of around 10 min based on prompts
United states, remote (each participant will complete the study within their home)
Tools
Figma Prototype + Zoom / Google Forms
Goals
how easily parents can navigate the app to access key health information like immunizations, medications, and appointments?
Evaluate the clarity and effectiveness of the UI, especially the use of hierarchy, color, and spacing.
Identify any points of confusion or friction in completing core tasks.
Gather emotional and trust-based feedback to see if the app feels secure, calming, and reliable.
After the Study
Once the usability study concluded, I compiled and organized all the feedback into key insights and actionable takeaways. A recurring theme emerged around miscommunication and unclear wording. Users often struggled to locate specific sections, such as downloads or document uploads. While many participants appreciated the overall visual design, it became clear that improvements were needed in the navigation bar and how information was communicated. These insights provided a roadmap for refining the app’s usability and ensuring a smoother, more intuitive experience for parents.
Key insights
Key takeaways
Couldn't locate "Allergies" section
Users found it confusing to locate the "Allergies" section within their child’s medical profile.
We will improve the visibility and labeling of the Allergies section by making it a clearly marked tab within each child's health summary.
Couldn't locate "print" button for documents
Users were unable to find the "Print" button for individual documents even when they were already viewing the correct page.
We will reposition and visually emphasize the Print button so it is consistently placed and clearly associated with each document.
No main "print" section for all documents
Users struggled to find a centralized location where they could print all documents for transfer purposes.
We will introduce a dedicated “Download & Print All” section within the dashboard for quick access to comprehensive record exporting.
2nd Iteration
With feedback and insights from the usability study in hand, it was time to put the improvements into action. A second draft of the designs focused on addressing navigation challenges identified by users. This included using clearer, more intuitive language throughout the app and providing multiple ways for parents to access and download important documents. These changes aimed to make the platform more user-friendly, ensuring that essential tasks could be completed quickly and confidently.
Lets Take a Closer Look
Can you spot the differences? While the changes in this iteration were subtle, their impact on the user experience was significant. This is what makes UX design so rewarding. It is not just about creating visually appealing interfaces; it is about refining the details that shape how users interact with the product. Small adjustments, such as wording or navigation cues, can dramatically improve the flow and ensure that parents can find and manage information quickly and confidently.
By examining these changes closely, we can see how thoughtful design decisions enhance usability and overall satisfaction.
Based on usability testing feedback, I moved the Allergies section from the child’s profile to a dedicated item in the dropdown menu. This improved accessibility by reducing the number of steps parents needed to take to locate important health information.
To enhance clarity and support accessibility, I updated the homepage tab label from “Documents” to “Downloads”. This change aligned the language more closely with user expectations, making it immediately clear that the section contained downloadable files.
In response to user feedback, I added a Download button to essential forms like Medications. This allowed parents to easily download or print documents without navigating away from the page streamlining access to critical health information and improving overall usability.
Overall, users responded positively to the visual design and layout, appreciating its clean and intuitive aesthetic. As a result, only minimal visual changes were necessary. However, feedback revealed several opportunities to improve accessibility and usability through clearer language and refined navigation. Key updates included renaming tab labels for clarity, repositioning critical sections such as Allergies for quicker access, and adding in-page download functionality for essential forms. These iterative adjustments created a smoother, more user-friendly experience, ensuring that Health Hub aligned closely with the needs and expectations of parents managing their children’s healthcare.
Post Re-design/ Next Steps
After completing the second redesign, the plan was to conduct another usability study and continue refining the app based on additional feedback. Due to limited resources for incentives, a second study was not feasible at this time. In the future, with more time and resources, ongoing feedback loops would become a regular part of improving the app. Once enough insights are gathered, the finalized designs would be handed off to engineers to bring Health Hub to life, creating a reliable and intuitive platform for parents to manage their children’s healthcare.
Reflection
This project deepened my understanding of how critical language is to the user experience. Even small wording changes, such as renaming a tab from “Documents” to “Downloads,” can reduce confusion and help users navigate more intuitively. Clear, user-friendly language is not just a detail; it is a fundamental part of accessibility.
Observing how users struggled to locate the Allergies section highlighted the importance of designing for visibility. Moving this section to a more accessible dropdown taught me to think beyond what seems logical to the designer and focus instead on what is immediately usable for the end user.
Adding a download button directly on key forms like Medications demonstrated how much users value efficiency. Thoughtful micro-interactions, such as avoiding unnecessary page switches, can significantly streamline tasks and reduce cognitive load.
One major insight from this project was that strong visual design alone is not enough. While users appreciated the look and feel of the interface, it was the structural and functional improvements, informed by feedback, that truly enhanced the experience. This reinforced my understanding of UX as more than surface-level polish.
Above all, this project reinforced the importance of testing and iteration. Each usability issue uncovered was an opportunity to refine the product and sharpen my own design thinking. Good design does not happen in isolation; it emerges from listening, adapting, and putting users first.