top of page
kidchart_in_app_logo.png

KidChart

A Healthcare Application for Parents/Guardians of Young Children

Introduction

Solo Project: Maherah Muqri
Duration: October-November 2025

This case study will discuss and showcase the process of the designing of KidChart. KidChart is a healthcare application geared towards parents/guardians of young children (infancy to adolescence+). The goal of this project was to create an all-in-one platform where parents/guardians can:

  • Print and view records for school/camp requirements

  • Track visits

  • Keep up to date on immunizations

The process began with background research and a competitive analysis.​

Background Research and Competitive Analysis

Citations (All citations in MLA format)

(1) Vanderhout, Shelley, et al. “Patient Experiences and Perspectives When MyChart Is Introduced in a Large Community Hospital: Mixed Methods Study.” Journal of Medical Internet Research, U.S. National Library of Medicine, 23 Jan. 2025, pmc.ncbi.nlm.nih.gov/articles/PMC11803326/.

(2) “The Surprising List of Disadvantages of Patient Portals.” Etactics, etactics.com/blog/disadvantages-of-patient-portals#:~:text=If%20a%20user%20doesn’t,to%20discuss%20it%20with%20them. Accessed 28 Oct. 2025.

(3) Epstein, David G. “Advocating for Patients: Understanding the Pros and Cons of Patient Portal and Emrs Is Critical to Better Healthcare Outcomes; Wellness Professionals Should Understand How to Maximize Their Impact and Address Shortcomings.” NWI Journal, 18 Aug. 2023, nwijournal.com/advocating-for-patients-understanding-the-pros-and-cons-of-patient-portal-and-emrs-is-critical-to-better-healthcare-outcomes-wellness-professionals-should-understand-how-to-maximize-their-impact-and/.

In order to fully understand what people want in this type of application, I first had to understand what people did not like about other healthcare applications, specifically MyChart. 

I have compiled my research into the following key points:

  • Test results often do not have doctor's notes that help users understand the context of the results or next steps (1)

    • This can cause people to inaccurately understand their diagnosis or results, leading to anxiety, googling, and other reactions (2)​

  • Having to switch portals for different providers is a very annoying task (1)

  • Healthcare applications help them schedule appointments easily (1)

  • They receive information in a timely manner, and the it is generally correct (1)

  • Some people feel as if they need a call from the provider before viewing major test results (3)

  • Allows you to download and send information, see lab results, and ask questions through messages (3)

After the background research and feedback shown above, I also did my own analysis of MyChart to understand the important parts of a healthcare application, and what problems I may have with MyChart.

My results came out similar to the ones discussed above, specifically the issue with changing portals every time you need to schedule with a different provider if they are not under the same system. The application can also feel very cluttered and claustrophobic at times, especially when you view doctor's notes or your after visit summary. The font spacing tends to be quite tight and a little bit difficult to read.

I set the goal of creating KidChart in my own style, which I describe to be minimalist and clean, while keeping in mind the aforementioned research, wants, and observations. 

Pain Points

The following pain points were derived from the research and competitive analysis done previously:

  • Losing paper records

  • Keeping vaccination forms organized

  • Remember appointments

  • Having a record of what vaccinations are due and which ones have been adminstered

User Personas

Isabella Wang

28 | Bachelors | SC | Nurse

Family: 2 daughters aged 11

Goal: To able to see if their children are up to date on vaccines they need before starting middle school, and being able to print the vaccine records from home.

Frustrations: Not knowing what vaccines are due and by when they need to be administered without having to call the doctor's office.

Scenario: Working parent of 2 that doesn't have time to spend on calls or running back and forth from the doctors office for questions. Needs a way to see if they are up to date on everything.

Isabella.png

Jason Green

42 | Trade School | NY | Stay at Home Dad

Family: Wife, 2 sons (age 4) & 1 daughter (13)

Goal: Being able to see records, appointments, and tests for his son's multiple doctor's in one portal.

Frustrations: Having to log in to multiple portals to see information from different physicians and keeping track of which information goes with which doctor.

Scenario: His son has a total of three doctors, each with their own portal. Thinks its tedious and confusing to have to switch portals each time he wants to check his son's records. Has a hard time keeping all of the records straight. 

Jason.png

Amina Mustafa

33 | Masters | WA | Software Engineer

Family: Husband, 1 daughter (age 9)

Goal: Being able to understand what test results mean

Frustration: Often times feels anxious seeing her daughter's results and needs context, but rarely finds any in an obvious place.

Scenario: Daughter suffers from an illness in which a lot of hard to swallow results are given. Would love if the physician would call to talk while viewing the results before an appointment is scheduled, and wants to see some context even if a call can't be made.

Amina.png

User Flows

Lo-Fi Wireframes

Hi-Fi Frames and Interactive Prototype

After making some rough Lo-Fi sketches of the application, I moved into the design process and began creating wireframes in Figma. After testing different styles and moving things around, I came up with the wireframes that are to follow. An interactive Figma prototype will be linked below, but the follow frames will be discussed in more detail in the next few sections: 

  • Homepage

  • Viewing Test Results

  • Switching between different children and physicians

  • Viewing and printing records

  • Viewing Immunizations

There will also be a gallery containing screenshots of other frames after the discussion.​

Link to Figma project

Link to Prototype

Homepage

The first element that I designed, was the homepage for KidChart. The most important thing to me for this design was clarity. I wanted to create a homepage that is navigable, clearly labeled, and not overcrowded. I wanted the design to be accessible to someone who is visually impaired, so I did my best to ensure that the contrast between background and text was contrasting while keeping a playful theme. I also included labels under each menu icon so that it's clear what each icon represents. In order to avoid confusion and maintain clarity throughout the application, each page has the name of the child, the physician, and the page title. 

Changing Physicians and Children's Profiles

One of the things that really stood out to me, and that I have experienced myself, is the frustration users feel with having to switch portals just to switch providers. I decided that I wanted there to be a clear way in which users can easily switch between providers, as well as children if they have multiple. Below are screenshots of how can you can switch physicians and children through the homepage.

Switch Child.png
Switch Doctor.png
Homepage_Dr_Child_Switched.png
Choose_Test_Result.png

Viewing Test Results

During my background research, I discovered that some people felt anxious before seeing their test results and often didn't understand what they meant. So I created a test results page that allows the user to ask their provider to call them first. If they do not want this, they can view the results right away. If they do want a call from your provider, they will be asked to put in the best number to call and are notified that it may take up to 48 hours for a call back. After inputting their number, the user can choose to go back to the homepage and not view the results, or they can choose to view them anyways. I also wanted a clear way to display any doctors notes, so I've added a context box right underneath the test results. Below are screenshot of a few of the frames, and the full process can be viewed through the prototype linked here or through one of the links mentioned before.

Test Result Prompt.png
View Results Anyways.png
Blood Test Results.png
View Records.png
School Health Form.png

Printing Records for School

One of the pain points described earlier, was being able to keep track of records easily. So I wanted to have an entire page in KidChart dedicated to printing records they may need for school. The image on the left displays what options a user might have for printing the child's records. An example of a record they may print is also provided. 

Check Immunizations.png
Immunziation Record.png

Immunizations

Keeping on brand with school requirements and records, I wanted a dedicated section of the application where users can easily find which immunizations have been and need to be administered and also being able to print records of past immunizations. To the left are images depicting the frames for viewing immunizations as well a sample immunization record to be printed by the user. 

User Feedback

Before the completion of the Hi-Fi prototype of KidChart, I gathered the following suggestions from anonymous testers:

  • Add headings under the quick menu

  • Add section headings for each page so you can see where you are at all times

  • Add option to see results even after asking for a phone call from the physician for test results

After adding those suggestions in, I gave the prototype to more testers and gathered the following feedback:​

  • Looks very clean and easy to read

  • Clear and not overwhelming to look at

  • Looks like a more playful version of MyChart

  • Love being able to ask for a phone call from the physician before viewing test results.

Branding

The goal of the application was light, playful colors to lessen the intensity of the connotation behind a healthcare application, while also staying true to the kid-centered theme.

The following colors were used throughout the application.

  • Background: #F8FAFC

  • Primary Text: #475569

  • Card Background: #FFFFFF

  • Secondary Text: #FFFFFF

  • Accent Colors/Dividers: #E2E8F0

  • Action Buttons: #4C8BF5

  • Document Text: #000000

Conclusions and Key Takeaways

  • Learned a lot about designing apps for healthcare

  • Background research opened my eyes to the anxiety that people may feel while using apps like KidChart

  • How colors can affect the mood of an application. Bright = playful, less serious. Dark = more serious, somber.

  • Learned a lot about the intricacies of creating options for pathways that a user may take, specifically having an option to go back or do something again on every page. 

  • Was able to come up with solutions for every pain point and create an application suitable for each user persona. 

Link to Figma project

Link to Prototype

Gallery

bottom of page