SpiroSmart  |  UX design + research

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 to implement in addition to one more design iteration.

LINKS

Launch Prototype

spirosmart-sum.png
 

DESIGN OBJECTIVE

1) Improve UI design and increase usability for the existing app.

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

RESEARCH OBJECTIVE

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

banner-large-3.png
 

 

starting over

My first task when getting started on this project was 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.

 

more than remixing

Every new idea is just a mashup or a remix of one or more previous ideas.
— Austin Kleon, Steal Like an Artist: 10 Things Nobody Told You About Being Creative

INSPIRATION

User interface and feature inspiration was borrowed from existing FDA approved spirometry equipment as a starting point to redesigning the instructional components and to stay within FDA regulation boundaries. Because traditional instructional training is so direct, the idea of putting a fun twist like gamification might help make medical diagnostics 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, I ultimately made the decision to drop the gamefication concept, which was more distracting than productive, to a lower priority but worth revisiting at the end if we have time. 

 

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
 

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 this particular round of design, our primary goal is to improve content 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 free 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 testing 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. 

 

Conclusion

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.

 

 

Moving forward

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

reflections

Working with people and health has been a challenging (yet interesting!) process. This project involved much complexity and error-related consequences, emphasizing the importance of clarity in delivering information. I learned to have a lot of patience, be precise, and to not be afraid of asking for help from experts when tackling a large UX monster like this one.