BreatheEasy: From classroom concept to full experience

Building out a digital asthma care platform to details between a child’s primary and secondary caregivers
Panoramic photo of Chicago with three phone screens overlaid on top of a blue gradient

Childhood asthma in Chicago

As part of an interaction design course at IIT Institute of Design, I worked with classmates Ying-Tong Cai, Hank Garrett, and Yakun Zhou to understand how a technology-based intervention might improve asthma care for young children in Chicago.
A PDF of my full report is available here.

Our process and concept

We started by reviewing the results of classmates' NIH-funded research on childhood asthma conditions in low-income families in Chicago.
To this, we added our own secondary research.
Based on our review, we chose to focus on how to improve the sharing of critical asthma care information between a child’s multiple caregivers.
Our concept, BreatheEasy, is a coordinated caregiver platform that uses smartphone and text message interfaces to simplify and support the care handoff experience.
Diagram with three boxes connected with arrows
Circular diagram with Research, Analyze, Synthesize, and Build connected by arrows

Taking a past project further

When we created BreatheEasy, we spent most of our time in the early design stages:

•

Understanding context via primary and secondary research

•

Generating a persona and defining design principles

•

Creating a design concept for our user

However, we only barely touched on bringing our concept into a higher level of fidelity.
🚀
I decided to build out BreatheEasy closer to a "real" app, and learned about Google's Material Design in the process.

Returning to our storyline

To redesign the app, I picked up with our existing storyline:
Our user, Sarah, is a single mother with a young child with chronic asthma.
Sarah needs to find someone to care for her daughter while she is at work.
She asks her brother Jim to watch her daughter, but is concerned that he will not know how to handle her daughter's asthma.
The BreatheEasy app makes it possible for Sarah to more seamlessly share asthma care information with Jim, giving her peace of mind during the work day knowing Jim has all her daughter's necessary care information available at his fingertips.
User archetype image with information about a user
Hand-drawn notes of a process flow

Analyzing content flows

To ensure I was addressing the problem from a holistic view, I mapped out the key steps involved in setting up a care request, as well as the information Sarah and Jim would require at each step.
Photo of a sketch of a process flow for starting outside the app
Once a care request is sent, a caregiver may respond in a number of ways, and the app would need to support each outcome.
With this in mind, I sketched out flows for a variety of situations, including what would happen if Sarah changed the request after sending it to Jim.

Planning the content

With the content flows in place, I planned what information should appear in each section of the app to ensure it would meet the user’s needs at all times.
Hand-drawn notes of information in groupings
An app content structure diagram

Structuring the content

I determined that the "final" app would be divided into three main content areas:

•

My Requests – where the user could track and follow up on her care requests

•

Care Team – a detailed list of one's caregivers, with the option of creating a new care request

•

Health Info – information on the asthmatic child's health, serving as a jumping-off point to share specific, relevant details with the caregiver generating a design concept for our user

Sketching it all out

With these content areas decided, I created a number of sketches in order to see how different content layouts could support the user's needs within each section.
Drawing of screensDrawing of screensDrawing of screens
Low fidelity screen designs in a flow

Moving into wireframes

In the first row, we can see an early version of the flow to add a new caregiver to one’s care team.
The second row shows an early version of the flow to make a care request.
As the designs progressed, I kept going back and refining the screens and task flows to make sure they remained focused on providing the right content to the user at the right time.

Upping the fidelity

Once my low-fidelity designs were in place and made sense, I created high-fidelity mockups of the task flow for setting up a new care request.
This required a close review of Google's Material Design guidelines – I wanted this app to look and feel as real as possible, and thus followed Google's standards and best practices.
I also downloaded a host of apps to understand how existing products presented content to users.
While there's no one "right" way to design an app, for a product in a serious space like healthcare it's good to leverage established interaction patterns to help facilitate user adoption and retention.
Three high fidelity phone screens
High fidelity phone screens in a flow

Detailing the user flow

Here we see the full user flow for creating a new care request.

My learnings

In undertaking this redesign, I learned a few important lessons:

📱

It's critical to have access to the platform one is designing for

Even though I'd read the Material Design guidelines, it wasn't until I purchased an Android phone and tried a number of apps that I really understood how content and transitions are handled in Android.

🎨

Knowing where to follow established UI patterns and where to diverge is more art than science

It depends on how familiar a user might be with an existing approach, and the costs/benefits of presenting information differently in one's app.

🔮

Taking a concept from the early idea stage to something more "real" unearths so many questions...

These must, in turn, be addressed to ensure the concept will be able to handle the complexity of an actual use case.

To read more about this redesign, you can find a PDF of my full report here.