According to the CDC, chronic diseases are responsible for 7 of 10 deaths each year, and treating people with chronic diseases account for most of our nation’s health care costs. Oftentimes physicians are stretched for additional time spent with treatment for patients. Self-management of such diseases can also be overwhelming for patients, especially those who have demanding daily regimens. While health and fitness trackers exist, they are often geared towards exercise and lifestyle — not chronic diseases. Fortunately, tech giants like Google have been investing more and more into wearable devices designed to track patient's vitals. While there aren’t any disease-centric devices out the in the market just yet, I thought it would be rather interesting to convene my health background with my design skills, and create a mobile app (to be used in conjunction with wearable patches), for asthma, an ailment that afflicts about 25 million Americans today.
Challenge | Design an Android mobile app that helps users monitor and manage their asthma
Client | Google (fictitious project)
Duration | 2 weeks
Role | Lead UI UX Designer: Design Researcher, IxDesigner, Visual Designer
Deliver a strong, app experience that displays data from a wearable patch and aggregates data from additional sources
Brand app so that it aligns with Google's Material Design, leveraging existing design patterns and user expectations
Create an app that integrates push notifications, health summaries, and symptom / trigger overview
Research | Industry Research, Competitive Audit, Provisional Personas, User Interviews
Synthesis | Empathy Map, Trello, Personal Development
Product Strategy & Ideation | Whiteboard, Goal Mapping, Feature Matrix, App Map, LucidChart
Interaction Design & Testing | Pen + Paper, User Flow, Illustrator, Photoshop, MarvelApp, Apowersoft Recorder
Delivery | Zeplin
Research & Synthesis
01. Industry Research
As my knowledge within the realms of asthma management was insufficient enough to design an app (not just yet), I crafted a research strategy with the below goals in mind. I then jump-started my research phase with literature reviews. After shifting through a day’s worth of medical articles, I was finally armed with enough foundation knowledge to move forward with a competitive analysis.
Goal #1: Understand the pathology and physiology of asthma, particularly what causes it, and what metrics need to be tracked and monitored.
Goal #2: Define Aria’s positioning within the market landscape of asthma management tools.
Goal #3: Discover what asthma management tools sufferers currently use.
Goal #4: Identify valuable and frustrating aspects that users have with their current management options.
02. Competitive Analysis | Provisional Personas
Most direct competitor products are still being developed and or tested. This scarcity is nicely counterbalanced with a bountiful amount of indirect players — 38 to be exact. Needless to say, I had to cut down this listing to a more manageable total of 5 (based on the ratings, features, and functions that most closely meet the high level objectives of this project). I then reviewed each app's features, interface design, and customization functionalities.
From the secondary research amassed thus far, I aggregated and interpreted the data results into provisional personas to articulate the target audience.
03. User Interviews | Empathy Mapping
I used the above provisional personas for prospecting interviewees during research. After scouring asthma forums and online support groups, I was able to secure a total of 6 representational, asthmatic participants to speak with me via video chat. Interview questions were crafted around the aforementioned goals along with any assumptions I held.
I mapped out the findings from my interviews onto Trello to 1. help empathize observations from the research phase, 2. draw out unexpected insights about our user's needs, and 3. to sum up our learning from user engagements.
From our research findings, we discovered that designing an asthma application (with a dependent device) will not be completely beneficial for all asthma patients. Different patients have different levels of asthmatic severity and the usage of management tools is dependent on such:
- An app with an associated wearable would be most beneficial for those with moderate asthma.
- Those with acute asthma express little concern / need for trigger, medication, and symptom documentation.
- Those with severe deem it unnecessary because they have had asthma for many years and are already confident in their self-management techniques.
Using all the insights garnered from empathy mapping, I was able to distill needs to help refine the target user. From the sum of my research findings emerged my persona Daisy, a composite of all my findings from both user interviews and secondary research data.
Defining And Ideation
01. POV Statements | HMW Questions
Based on the needs of Daisy, I came up with POV Statements that then led to the creation of action-oriented HMW Questions. Doing so helps to establish a minimal viable product by ideating the best possible solution(s) for each design challenge.
With the HMW Questions, I came up with potential solutions for the problems at hand and quickly mapped them out via an hour long brainstorm session.
01. Business And User Goals
Before moving into interaction design, I needed to ruminate for user and business needs and determine middle ground goals that satisfy both parties. To help define the functionality of the MVP features, I cross-examined each brainstormed idea with our business user goal map, which ultimately helps to determine which idea(s) from my brainstorming might best serve the needs of our stakeholders.
02. Feature Roadmap
Business and user goal alignment informed feature prioritization: Placing Daisy’s needs center-stage, I convened my feature solutions into a comprehensive list and ranked them by level of time and resource investment.
01. App Mapping
I created an application sitemap with these high priority features for important task flows in the app which will be used by all asthmatic users.
02. User Flow
A user flow map provided insight into Daisy's expectations when using the asthma app: It helps empathize with how she would navigate pages to complete linear tasks, and how she would journey to checkout via different entry points and paths.
Constructing user flows ultimately informed what key pages and features to design for during user testing. I began by fleshing out my ideas via rough, disposable sketches. At each stage of design, I tried to ensure that the copy and interface was simple enough for the user to comprehend. I wanted task flow interactions to be quick so that users would not be frustrated with time-consuming processes, a pain point of which had been expressed during empathy research.
02. Mid Fidelity Wire-framing
From my sketches, I moved on to mid-fidelity wire-frames. Before moving onto prototyping, I annotated my key frames to include details about the content and interactivity.
My key screens and elements were imported into MarvelApp. The task flows observed in this working mid-fidelity prototype are as follows:
- User Onboarding
- Adding Medication
- Auxiliary Task(s):
- Viewing / Setting reminders
- Deleting / Editing medicine
- Auxiliary Task(s):
- Locate triggers within the app
- Locate vitals within the app
- Auxiliary Task(s):
- Find trend information for a specific vital
- Auxiliary Task(s):
- Create an event log
- Auxiliary Task(s):
- Export event
- Auxiliary Task(s):
01. Usability Testing
With the mid fidelity prototype, a usability test was conducted with the following objectives in mind:
1. Test the flow of the app’s architecture and design and determine if users can easily accomplish tasks, specifically and most importantly: adding medication, setting reminders, and creating event logs.
2. Assess the usability and functionality of the app’s navigation and hierarchy.
3. Given that there are many different paths for find-ability, determine which path is preferred for creating event logs as well as setting medication reminders.
4. Observe and note pain points, areas of uncertainty, and/or dissatisfaction with any elements or features
Via moderated remote setting, 4 individuals: 3 male, 1 female, between the range of 20–30 years old with moderate asthma was recruited for user research. (Participants are geographically dispersed.)
02. Affinity Charts
From these findings, came an affinity chart, crafted based on errors and issues observed during usability testing. The affinity chart is segmented into 3 specific groups:
User Interface Design
01. Mood Board
To accommodate the changes rolled out in the affinity map, the prototype was iterated into a high-fidelity version. From my base mid-fidelity wire-frames, I started to work on creating a brand identity. Besides complying with Google’s Material Design guidelines, the brand should be 1. clean, clear, and fresh, 2. intelligent and innovative, and 3. reliable.
I used these attribute requirements to concoct a mood board that helped to depict my overall vision.
02. Logo Design
Google Aria’s logo is a pictorial representation of asthma management: The waves are a simplified depiction of air. The color scheme is on brand with already existing Google logos, as seen in Google Doc / Calendar / Translate.
03. Style Tile & UI Kit
I aggregated my design vision into a style guide which helped simplify the visual design process during the creation of high-fidelity frames. From my high fidelity frames, I created a UI Kit to aid designers and developers during round 2 of design iterations.
Final High Fidelity Prototype
Final High Fidelity Frames
Takeaways & Next Steps
It is rather exciting to see an app evolve based on user feedback, and it is incredibly rewarding to be able to bring the user-centered development process into healthcare. The platform eliminates major problems that plague the industry, particularly the need for asthma patients to fill out long-winded questionnaire forms during doctor appointments and bridging the informational gap during doctor and patient interaction.
With that said, next steps should be taken to ensure product success: The updated prototype needs to be further tested with health care providers. It is absolutely critical that we uncover errors and possible improvements in usability and interaction for respiratory specialists, the sole individuals who can best help asthmatic patients. Further data visualization screens for symptoms, peak flow, triggers and medication also need to be developed to help user’s track their treatment progress over an extended period of time.