Kerri Grier

The Challenge

How might wearable tech help manage Asthma?

Asthma is a chronic condition where the respiratory system is more sensitive to environmental triggers. 1 in 14 people in the U.S. currently have Asthma. Although there is currently no cure, Asthma can be managed by being aware of/mitigating triggers, taking prescribed medication, and following an action plan. In this case study, I explore how a wearable patch paired with a mobile app could help manage Asthma symptoms.
View Prototype

Project Type

Solo project for UX Academy program

Tools

Sketch, Invision, Adobe Illustrator

Role

Research, Interaction Design, UX / UI Design, Branding

Duration

8 weeks

Design Process

Focus on the user to prioritize content

I approached this challenge through a design thinking lens. Since I personally have very little experience with Asthma, it was vital that I understand what having Asthma is like before I could even dream of creating a solution.
Design Process Steps

Research

Understanding the problem space

What is Asthma?

The first order of business was to hit the books (or more accurately, the web)! I had slim to none background knowledge and needed to have a decent foundation so that I could ask intelligent questions during my interviews.
Review the key research findings powerpoint.

Scoping out the competition

Once I had a solid understanding, I analyzed the most popular (based on rating and # of downloads) mobile app solutions out there for Asthma management. It helps to know what is already out there, so that I don't repeat the same pattern mistakes and to get an idea of what is already working.

Below is a snippet of the competitive analysis - view the whole thing here.
competitive analysis
The competitive analysis compares direct competitors based on several factors

Provisional Personas

Based on the secondary research, I determined who the potential users might be: including children with asthma, the parent of a child with asthma, and an adult with asthma. Having an idea of my users helped me focus my user interviews.
provisional personas
Provisional personas of potential users

Interviews

Due to time and resource constraints, I primarily focused on adults with asthma. I interviewed 4 adults who had either had asthma in the past, or currently have it. Participants were asked about their experiences regarding Asthma and how they best manage it. All participants mentioned aspects of being afraid when having an Asthma attack and disappointment at missing out or having to cut short activities.

Key Insights

Empathy Map

I created an Empathy Map based on the notes and major points made by the user interviews. Common themes or comments were then added to each section of the empathy map to get a perspective on what people with Asthma experience. View Empathy Map.

Gains / Opportunities:

Have their inhaler nearby, in case they have an episode.
To lead a healthy lifestyle through daily exercise and no smoking.
Clear instructions on when to use medications.

Obstacles / Challenges:

Making sure they're prepared if an asthma attack happens.
Staying healthy so that their asthma doesn't get worse.
Know / understand when they should take their inhaler.

Personas

Based on the secondary research and user interviews, I created personas to reference as I developed design solutions.
persona
The user persona outlines the motivations, goals, and needs of the target user

Define

Outlining the Scope

POV / HMW Statements

I needed to put into words what exactly I was trying to solve. I outlined several Point of View and How Might We statements to do just that. These statements also served as a source of inspiration while brainstorming.
POV / HMW Statements

Ideate

Developing the Information Architecture

Product Feature Roadmap

Before I start sketching, I brainstormed potential features. Ideas were inspired by comments from interviews and from competitor apps. Each feature was prioritized based on whether it was mentioned in the project brief and the perceived impact. View the Product Feature Roadmap.

Site Map

I outlined the app's navigational structure based on the features needed from the product road map and loosely based on the organizational hierarchy of other related apps.
site map
The site map outlines the content hierarchy of the app

Task Flows

Now that I had the site map in place, I outlined key tasks of the app. To determine the next step in each task I would ask myself, "what would the persona want to do next?" and "what step makes sense to follow the previous?"
task flows
Task flows for onboarding, add a rescue event, add a reminder, and add a goal

Prototype

Designing the app

Wireframes

I sketched out some rough ideas and then got to wireframing. I took some time to review the Material Design Guidelines to get acquainted with the design language and patterns. Placing the content was a matter of focusing on what was most important and how to show the data.

Core Features:
At a glance asthma forecast allows users to quickly get an idea of how relevant environmental factors might impact their Asthma for the current day
The trends tab allows users to monitor their trends and makes suggestions based on these patterns
A schedule with reminders keeps users on top of medications
Behavior changes were a key factor mentioned for getting Asthma under control - users can set and track goals, as well as receive badges as they reach milestones to stay motivated.
View: All Wireframe Screens

Branding

For the colors, I wanted to go for cool colors to evoke calm when using the app. The mint green is meant to be refreshing and energizing, while the rich indigo is meant to bring peace and trust. Both colors were found through Material Design's color tool. I noticed that a large majority of Google's products use Roboto, so I decided to use it as well for this app. The icons are also from Material Design.
Style tile of branding elements for the app

Mockups

I updated the wireframes based on feedback then I added the branding to create my mockups for the prototype.
Mockup screens for each footer tab
View - All Mockup Screens

Prototype

I created a prototype that allows users to run through key tasks that I wanted to test for the first round of usability tests.
View Prototype
Interact with the prototype below:

Test

Finding opportunities for improvement

Usability Tests

I conducted usability tests for some of the key tasks of the app: Reviewing rescue event trends, reviewing a specific rescue event, completing a task via a notification, and manually adding a rescue event. Throughout each test I encouraged participants to voice their thought process and expectations.

Affinity Map

I took note of comments and observations made during the usability tests and grouped them based on whether they referenced a similar theme.
affinity map
The affinity map aggregates patterns from the usability tests to inform insights and recommendations

Iterate

Using insights to improve usability

I updated the prototype based on the affinity map recommendations. Below are some of the changes made:
Update #1 - Reorganized bottom nav bar
During the usability tests, I noticed that people were more likely to go to the timeline tab first to review patterns, and then would complete the task by simply counting the number of rescue events from the calendar. Although this works, it left the trends tab under-utilized. By switching the order of the tabs, the hope is that users would more readily go to the trends tab.
Original
Updated
Update #2 - Make notifications more intuitive
Originally, I had the app open whenever a user selected to complete a task from a notification, so that they could complete the action within the app. However, most of the people I tested assumed that the task would auto-complete if they responded to the notification. I also added the option to snooze a task.
Original
Updated

Reflection

Lessons Learned

One of the biggest challenges with this project was recruiting research participants. In future iterations, I would make sure to continuously be recruiting participants, even if the prototype isn't quite ready yet. Setting up sessions takes more time than expected and it's better to have it set up before the prototype is ready, then to be waiting once it is.

Although this was a solo project, I enjoyed getting to discuss ideas and playing with potential solutions with my mentor. Getting to work with others helps inspire me to think of different solutions that I may not have come to on my own.
LinkedinE-MailMedium
Designed by Kerri Grier © 2020.