JENNIFER WANG
Banner.png

Osler | Asthma Care App for Parents

cover-home.jpg
 
 

Overview

We were given the task from Premera Blue Cross to design a response that assists caregivers in finding care for others. Our team looked at how parents find care for their child with asthma. 

My Role: Information architecture, Interaction design, Prototyping, Illustrations, Research, Usability testing
Duration: 10 weeks
Sponsor: Premera Blue Cross
Team: Oliver Engel, Rohan Chavan
Tools: Figma, Principle, Origami, Illustrator, Photoshop

 
 
 

Design Challenge

give-enhaler2.jpg

How might we guide parents through their child’s asthma care journey?

 

Design Goals

We developed these goals from multiple rounds of primary and secondary research.

  • Empower parents with actionable care advice

  • Help parents schedule and manage appointments 

  • Inform parents about asthma triggers in the area

 
Intro-home.png
Intro-careplan2.png
Intro-appointment.png
Intro-trigger2.png
 

 

Design Process

01. Discover

I believe understanding parents care-finding experience will help us make design decisions based on their needs and wants. Our project began with a mix of primary & secondary research to better understand the design space and the problems parents face daily.

 
 

1. Asthma is the most common chronic disease among children.

Research1.png
 
 

2. Parents help their children communicate to a third party.

The probe was a set of questions that we gave to parents to ask their child, while we observed the body language, communication, and the interactions between them. We talked with 7 families, with children ages ranged from 4 to 10.

The probe was a set of questions that we gave to parents to ask their child, while we observed the body language, communication, and the interactions between them. We talked with 7 families, with children ages ranged from 4 to 10.

We used the cultural probe method to understand how parents and their children communicate with each other, and if it influences the process of parents finding care for their children. After talking with 7 families, we learned the following:

  • In the presence of a third party, kids were less likely to express themselves, and parents played an important role in making kids comfortable.

  • The kids we spoke to age ranged from 4 to 10. Parents had to provide context to help us understand what the kids were referencing.

 

3. Parents struggle to find and maintain the best care for their asthmatic children.

IMG_7792.JPG

We conducted semi-structured interviews with adults and parents of children with asthma. We learned that it is hard for parents to manage different types of medication, from control medicine to quick-relief medicine. Based on the child’s symptoms and peak flow, parents need to decide which medication their child takes.

 
 
quote.png
quote2.png
 
 

4. There are design problems with existing solutions.

We conducted a competitive analysis on the Treatment Plan document that is recommended by almost every medical association in the US. It’s a pairing of symptoms and peak flow measurements to medications. Unfortunately, the asthma patients we spoke to said that they either never were given this paper document or it ends up in a junk drawer.

Asthma Treatment Plan.png
AsthmaMD.jpg

I also looked at the Asthma MD App, which is one of the most popular asthma control apps available. It requires extensive user input for every medication and daily peak flow to provide useful suggestions. This limitation prompted us to look into linking user accounts with their electronic health records.

 

02. Define

Parent’s Decision Making Process

I created a flow diagram that defines the major actions and decisions parents encounter when taking care of their asthmatic child. We discovered that parents need help the most with (1) managing medications, (2) knowing when to visit the doctor, and (3) understanding asthma triggers. We decided to respond to these three problem areas that are color coded below.

 
 
 
 

System Map

We defined "Care plan" "Appointments" and "Triggers" as major problem areas and transformed each into a key path for our design. Below is an example of the many user flows I created for our system.

 
 

03. Design

Concept Development

Through a series of timed ideation exercises, we brainstormed a total of 90 ideas. This approach encouraged us to look at all the possible design responses.

To begin our down-selection process, we used the Six Thinking Hats Method and the Decision-matrix Method. These methods helped us thoughtfully evaluate, and rank our ideas as team. We combined the winner ideas together, and eventually came down to 3 concepts.

 
90 ideas.jpg
 
sketch copy.jpg
 

Low-fidelity wireframes were helpful in visualizing concepts, making quick iterations, and facilitating discussions with other team members.

In Figma, we collaboratively created mid-fidelity prototypes and presented them in class. Feedback from peers and instructors helped us further improve our design flow.

iteration2.jpg
 

User Flow

Below demonstrates the user flow of scheduling an appointment. After completing our final mockups, visualizing the user flows helped me create high-fidelity prototypes in Principle and Origami quicker.

 
Schedule appointment user flow

Schedule appointment user flow

 

Visual Design Process

We want our product to be light, positive, supportive, and organic while still feeling professional. The Moodboard let us visualize the look and feel, and helped us select additional colors to complement the brand color of Premera Blue Cross.

I took the responsibility to design illustrations for our prototype. Inspired by our moodboard, I created different styles and color combinations to explore the experience it might give users. Visual variations helped the team compare options and choose the best design.

 
moodboard.png
 
Home variations - Morning, Afternoon, & Evening

Home variations - Morning, Afternoon, & Evening

Trigger variations - Good, Moderate, & Severe

Trigger variations - Good, Moderate, & Severe

 

Final Illustrations

Osler’s illustrations are clean and clear, using gradients and smooth shapes to stand out from the UI.

24_Visual system@2x.png
 

04. Final Deliverables

Click on the button below to view more details.

 
 
 
onboarding3.png
Gif-Onboarding.gif
 
 
 
Gif-Careplan.gif
 
careplan.png
 
 
 
 
appointment.png
Gif-Appointment.gif
 
 
 
Gif-Trigger.gif
 
triggers.png
 
 

05. Reflection

Defining Problem Space

We started the project with a broad scope of helping parents take care of their children. Through the process, I learned the importance of narrowing the scope down. The more specific we can define the problem space, the better we can design for the target audience.

 

Usability Testing

We fixed several usability issues along the way by conducting usability testings with colleagues. However, I believe it is crucial to get feedback from our end users. To further improve our prototype, I would like to conduct more usability testing with parents who are familiar with asthma.

culturalprobe.jpg
 

Storytelling

For our final presentation at Premera Blue Cross, we wanted to tell a convincing story of Osler. I proposed to my team about taking product photos with a real family to add a human touch. Many thanks to Adelaide and her son for modeling in our photos. For improvement, it would be better if we had the time to film a short video of the use case scenarios.

good morning-web.jpg
 
MultipleScreensFlat.jpg