Project Overview

SpiroSmart is a mobile app that uses the iOS device sensors to help Chronic Obstructive Pulmonary Disease (COPD) patients measure and monitor lung function. This technology is first of its kind as traditional spirometry testing in clinics require a large expensive machine. With the SpiroSmart app, less fortunate clinics without the means to purchase traditional equipment can now have easy access to the medical diagnostic tool. However, the SpiroSmart app requires a different technique to get accurate results so changing users' behavior is a key focus of usability on this project.

My role is to lead design and research to improve and iterate on the visual design, interaction and usability of the app with the help of another designer for the first 2 quarters. The last 2 quarters involved collaborating with the engineering team and medical SMEs to implement and test the product.

LINKS

Launch Prototype

DESIGN OBJECTIVE

1) Design mobile spirometry experiences for both at-home patients and doctors in clinics.

2) Change the way users perform the spirometry maneuver with SpiroSmart so that spirometry test results are accurately produced.

RESEARCH OBJECTIVE

Explore traditional spirometry testing procedures and identify problem areas to be addressed in the SpiroSmart app. 

Designing a better experience

People with lung issues, such as Chronic Obstructive Pulmonary Disease (COPD) need to measure and monitor their lung function frequently. The current experience, however, is cumbersome - it's exhausting, requires planning to make appointments, and the equipment is expensive which means it's mostly available in a clinic or hospital setting. Testing also usually involves having a doctor present to coach you through the process and making trained judgements based on the test results in real time. In some places around the world this procedure isn't even readily available due to equipment cost or lack of training in the procedure. So, how do we re-create this experience for the two different audiences (at home vs. clinic setting) as well as for a global setting?

Understanding the Friction points

First, I needed to learn as much as I could about the medical components and how the current state of the app was developed by:

• Reviewing the most recent usability report and debriefing with the UX researcher

• Reading recent papers on spirometry including SpiroSmart technology

• Interviewing and observing medical professionals to learn about context

What I found was that the current user flow was too confusing for users and lacked clarity when teaching how to perform the test maneuver correctly, therefore, producing inaccurate results. As design lead, I worked with another designer to re-prioritize tasks, strip down to the MVP that will let us achieve our goals in the allotted timeframe of 3 months, put aside the nice-to-haves, and visually map these tasks in order. This helped us identify problem areas missed previously and think about how to make smoother, consistent transitions from one task to the next.

How do we do it better?

COMPETITIVE ANALYSIS

A competitor, Spiro PD, had a similar idea of making spirometry testing mobile but the experience still needed improvement. For example, the screen drops from your eye sight when you follow along with the tutorial which defeats the feature’s purpose. Another example, is that the device is quite expensive (in the hundreds) to only fulfill a single purpose. Lastly, the experience becomes chore overtime when done repetitively. Because traditional instructional training can be cut and dry, the idea of putting a fun twist like gamification might help incentivize users for repetitive medical diagnostics, making it less daunting and more effective while extending our reach to a wider audience, including young children who may be intimidated or dislike the procedure.

TO DELIGHT OR TOO MUCH DELIGHT?

The initial idea is to try to steer users away from using the traditional technique and train them to use the SpiroSmart technique through games that draw on a general understanding of how to do certain things in a certain way such as blowing fire like a dragon or fogging up the mirror. Usability studies showed that adults generally liked the concept but thought it wasn't necessary. To adhere to our goal of creating more effective training methods for adults, I ultimately made the decision to deprioritize the gamefication concept, which was more distracting than productive, from the MVP but suggested to keep it in the backlog to revisit when we pivot our focus to a younger audience. 

Designing a better tutorial

CHANGING BEHAVIORS

The biggest and most critical user error discovered in the most current usability test was the incorrect positioning of the phone which yields inaccurate results. In traditional spirometry testing, clinical machines are inserted into the mouth. With our mobile app, a mouthpiece and machine is no longer needed which means that the user needs to learn a completely different behavior. Coupled with user comments indicating the mistake was made completely unconsciously, it was evident that the instructional component needed a more effective flare that will help them remember the new technique.

I started to think of ways we could provide something more comprehensive in training the new technique. Since previous designs were static photos and text, I thought an upgrade would include:

• 360 gifs to emphasize important points within the procedure

• short instructional videos to capture attention better than text (because no one likes to read)

• gamify to motivate the user with a goal

Initial Design

The initial UI design was made by the engineer on the project. An animated ball was used as an air flow indicator during a spirometry test. Though effective, the app was still missing pieces that would make the experience more intuitive such as guidance through a testing procedure.

VISUAL DESIGN

Work load for illustrations and content was split between myself and my teammate, while we both agreed on a new visual style with my lead. Ultimately, we went with default iOS colors due to lack of time to do a complete re-branding of the product. The clean and minimal style worked to our advantage for this round because it allows us to direct attention to the content. We also decided to stray from the generic blue and green color schemes that most health companies use in order to stand out. Moreover, for the MVP, our primary goal is focused on more on the tutorial and procedure rather than visual style. Keeping it minimal also declutters the screen with more white space, making it easier to read for our target users who are in the age group of 45+ years.

Testing the new design

PROTOTYPING

After creating the new user interface, it was important to see the design in action before putting it in front of users and getting it as close to a finished product as possible; there could be gaps we missed that would skew usability test results later on. My team decided that InVision, a rapid prototyping software, would allow us to rapidly test our design and reiterate without much resistance, given the budget and time constraints. It also allowed us to see the prototype in a mobile phone context while making sharing very quick and easy.

High fidelity mockups made with Adobe Illustrator were exported and loaded into InVision App. Then we played with different transitions between screens, using automation to simulate parts of the testing process.

USABILITY TESTING

TEST GOALS

The goal of the usability study is to figure out if the training for our new method of spirometry testing is effective. I also wanted to learn about users' previous experiences with spirometry testing because I hypothesized that it will influence the way they test with our mobile app. Therefore, the test was focused on how well users could follow instructions and execute the test maneuver.

I tested with a group of 5 participants each in two sessions onsite, testing two rounds of design iterations and interview questions about their spirometry experience.

(MIXED) METHODS

The RITE method (Rapid Iterative Testing and Evaluation) - In between test sessions, interface changes were quickly made as soon as a problem was clearly identified. Then the changed interface is tested with remaining users.

Qualitative - We observed behavior and recorded users' verbal comments on how easy it was to use the app, how helpful the training section was, and why. Pre-test and Post-test questionnaires about prior spirometry experience and SpiroSmart user experience were also collected.

Quantitative - We observed and recorded task success rates, collected Likert scale ratings on ease of use, helpfulness of training, and paths taken to complete tasks.

This mixed method approach yields a more rounded data set by comparing numbers against observations, using one type of data point as evidence or explanation for another. 

What we Learned

Findings revealed that users relied heavily on previous spirometry testing techniques which are different from our mobile app. The users were able to follow the instructions correctly until the last step which involves a different technique. More interestingly, all users were unaware of their behavior which supports my hypothesis that previously learned behaviors impact users' ability to learn new techniques for the same task. However, we were able to correct the positioning of the phone which had failed in previous usability studies.

I recommended for the next round to place efforts on improving the training component that will help patients learn a different set of behaviors because the success of performing the maneuver directly affects results - the core of this app.

Next steps

SpiroSmart has gone through one last round of design iteration, this time targeting the clinician users for a different study. In the beginning of August 2017, the final version of the SpiroSmart app will be deployed to 5 countries - Greece, Kyrgyzstan, Sri Lanka, Uganda, and Vietnam - in order to learn more about the app's impact within real third-world clinic locations. The study will run for about 9 months, collecting data about usage over time.

Launch Prototype