Asthma Tracker App for Children

Nearly 30% of U.S. caregivers are estimated to have below or basic health literacy, which negatively affects children’s health outcomes. The goal of this project was to create a mobile application for children and parents with low health literacy to better manage asthma and increase their understanding of the medical condition.


Duration: January - April 2019

Team: Utility

Role: UX/UI Designer

I worked with the Creative Director to produce end-to-end UX/UI designs. Some of my responsibilities included:

1. Conducting initial user research and synthesizing research insights,
2. Creating user flows, wireframes, and prototypes,
3. Designing brand guidelines and visual assets,
4. Providing user-interface specifications for engineers,
5. Participating in QA sessions and working with project managers and engineers to fine-tune the final user experience of the application.

Problem: Children suffering from asthma and their parents with low health literacy need an efficient way to track their conditions.

Goal: Create an asthma tracker app for children and parents to monitor children's asthma symptoms, access their personalized mediation list and action plan, and learn about asthma.

Final Outcome:


To better define the problem and user needs, I began with a series of research, which mainly consisted of online literature review and competitive analysis.

Literature Review

My research findings from the study "Parent Health Literacy, Depression, and Risk for Pediatric Injury" provided a deeper understanding of the risk of low parental health literacy and our problem at hand. The study examined 17,845 English- and Spanish-speaking parents of children and examined its association with pediatric health risks. One of the measurements was the caregivers’ adherence to asthma treatment and 36.6% of the participants were reported to not adhering, which resulted in children’s increased emergency room visits and hospitalizations. In the discussion the researchers suggested that “pictographic instructions and color coding improve the accuracy of their child’s medication.” Another study on low health literacy ("Interventions to Improve Care for Patients with Limited Health Literacy") suggests that when presenting health education materials, it is important to select “large-font text written at or below the 5th-grade level, pictures that help explain the text, and clear headings and layout that enhance readability.”

Competitive Analysis

I performed competitive analysis on an asthma tracker app (AsthmaMD) and a few health journaling apps (Headspace, Aaptiv, Calm, Medisafe) to get a better sense of how other apps approached a similar goal. I evaluated these apps based on its usability and overall aesthetics to see possible usability issues that we should avoid and get some inspirations. An example of my competitive analysis and some key takeaways:

Pros: Graphs/charts of asthma activity, easy to log symptoms and triggers, ability to share with doctors
Cons: Not engaging for children, no educational materials on asthma, data hard to interpret


User Groups

Core Functionalities

User Flow

I created a user flow to define the process the users will be going through to better understand their motivations and experiences interacting with the product.



Low Fidelity Mock-up

Brand Identity

I kept in mind that the visual design of the app was a crucial part of encouraging children to consistently use the app to track their asthma. Some words that inspired the brand identity were "fun" "kid-friendly" "bold" and we wanted to use large text with a lot of visuals to keep children engaged.

Home Screen Iterations

High Fidelity Mock-up


After evaluating the InVision prototype with project managers and developers we iterated the design process. Because there were several main features of the app that the client wanted to highlight, figuring out the organization of the features and establishing clear information architecture was crucial. Then we had a series of QA sessions to ensure the final product was functional and accessible.

Final User Experience


This project was my first end-to-end product design and seeing my work in the app store was a very rewarding experience. I struggled a lot to balance between moving forward and getting the details right, but eventually I had to embrace the uncertainty and messiness of a real world project.

Working on a cross-functional team

Working as part of a cross-functional team requires being able to explain design choices in a language that product managers and engineers understand and also being able to understand their language. I learned that getting feedback from PMs and engineers and iterating based on that feedback was extremely helpful in understanding the holistic picture of the development of a product. As for technical communication, I learned the importance of organizing my Sketch files and InVision specification documentations to make the hand-off process as smooth as possible.

Time management and Prioritization

From our initial research to product launch, we only had three months to design and build the entire app. Because of the scope and time limitation, we had to move as efficiently as possible, which meant focusing on the most critical features rather than spending too much time perfecting secondary features. Even though there were times I was hung up on small visual elements and put too much effort into features that were not necessary to the launch, I eventually learned how to prioritize and maximize the efficiency of the team.

Future Work

The launch of the product was a priority for this phase of the project and there is definitely some room for improvement. Usability testing with the patients will be conducted and improvements on the main features especially the asthma education section will be made.