AsthmaTuner Symptom Tracking
Redesigning symptom tracking in the AsthmaTuner app so that users feel more confident and capable documenting their asthma
1 Problem brief
I was originally tasked with updating a symptom tracking form in the AsthmaTuner app to be consistent with the company design system.
AsthmaTuner is a Stockholm-based digital health startup helping people with asthma live symptom-free. The app and companion bluetooth spirometer replace traditional diary-tracking and static treatment plans with tailored care in three steps:
Clean, clear, and convenient - but when I started at AsthmaTuner, the symptom form looked more like this:
Our Lead Designer Isabella Smolarski had recently rehauled the entire app design to be cleaner and more consistent; the symptom form was one of those final screens that still needed a face lift. There was nothing glaringly wrong with the old design, but it wasn’t consistent with the new design system. That’s where I came in.
2 Defining the MVP
I worked with the rest of the design team to draft MVP requirements. Previous user research insights had revealed usability and comprehension issues with the old interface and it was important that the redesign tackled them as well.
This was the first major project I led as AsthmaTuner’s second designer. I had done solo projects during my internship, but this involved redesigning a pivotal care tool that our users encounter every week. On top of that, AsthmaTuner is a medical service, which introduces clinical regulations to the design process. There was nothing quite like hearing “risk analysis testing” to make me worry if I’d bitten off more than I could chew...
Luckily, I was working with a great team and support: AsthmaTuner’s Product Manager Peter and Lead Designer Isabella. They provided more context to the task with insights from previous user research and we drafted the following 'must' requirements.
3 Ideation and sketching
I iterated on several concept sketches and had feedback meetings with the rest of the design team every few days.
Isabella had already taken a stab at some concepts when I joined the project, so we began the ideation process by iterating on her ideas.
Ultimately we decided to pursue the fourth concept, which included larger buttons for each individual symptom, a calendar aid for the timeline the user should think back on when documenting symptoms, and a simplified progress bar.
From that point on I took full lead on fleshing out the design and had feedback meetings with Isabella and Peter after each iteration (i.e. every few days). During these meetings I presented the changes I had made since our previous discussion and defended any new design choices. After three iterations, we agreed that the final alternatives were ready to be evaluated by actual users.
4 Quick & dirty testing
Small-scale usability testing with a hi-fi prototype helped me find and fix issues with the design before starting on more thorough risk analysis.
User testing is the backbone of any good design, so the earlier users are welcomed in the better. Testing doesn’t always have to be extensive - often ‘quick & dirty’ can be enough to catch major issues without compromising time and other resources.
I recruited 7 people I knew for think-aloud usability tests, where they were prompted with tasks and scenarios typical of actual users. Even though none of the participants were familiar with AsthmaTuner or necessarily even had asthma, they still identified important usability issues. Two rounds of testing allowed me to catch these before beginning a more thorough risk analysis.
5 Risk analysis (Round one)
The first round of risk analysis revealed that while the new design was more visually appealing, it didn't help users to confidently document their symptoms.
As part of medical regulatory requirements, any design changes to treatment tools need to be evaluated for potential risks. In this case, there was a risk that users would over- or underestimate their health condition. Before the design got the green light, I had to prove that users understand and feel confident that they’ve correctly documented symptoms that align with their condition in the new design just as well as they do in the old design.
Type
Comparative study
Methods
Hi-fi prototypes
UEQ-S questionnaire
Semi-structured interview
Participants (10)
5 AsthmaTuner users
5 people with asthma but no experience in the app
Results
Original design is more usable, less visually appealing
Redesign is less usable, more visually appealing
Qualitative feedback
1 Selecting symptoms is more confusing and less intuitive in redesign
2 Redesign takes longer to ‘learn’
3 Day-based visual calendar suggests daily symptom tracking, instead of weekly
4 Difficult to tell what day user is on from calendar
5 Redesign is more visually appealing
Participants documented their asthma symptoms in two prototypes, one for each design. After each task, they filled out the shortened User Experience Questionnaire (UEQ-S); this gave me insights on the pragmatic and heuristic differences between the two designs. Finally, I followed up with a short interview.
I expected the new design to perform better, but the results told a different story. The redesign was rated lower for pragmatic quality, which suggested poorer usability compared to the old design. I used this as a lens for analyzing the interview data, which shed light on confusing aspects of the design.
The drawing board
6 Back to the drawing board
I killed my darling and turned to iterating on the original, in-app design. The new redesign concept followed a similar visual structure to that in the app, but still addressed its usability issues.
There were no two ways about it: the new design wasn’t going to cut it. The timeline did not help explain to users that they should document their symptoms from the past week, the buttons were less intuitive for selection and feedback than the toggles, and overall the new design took longer to 'learn' on first glance. There were too many issues with elements of the new design for it to feel worthwhile to keep working with that concept. So, I went back to the drawing board.
I decided to take a second look at the original design and iterate on that instead, since it was still acceptable for users despite the weak points brought up in the original problem brief. Working with the feedback from testing, I integrated elements of the previous concept but kept the original visual structure.
7 Risk analysis (Round two)
The second round of risk analysis showed that users understand and feel confident that they’ve correctly documented symptoms that align with their condition in the new design better than they do in the old design.
I ran the same comparative study to analyze the risk of releasing the new design. This time, the results significantly favored the new design, both on usability and visual appeal. Participants understood that they should document their symptoms from the past 7 days, and found the selection intuitive and quick.
Type
Comparative study
Methods
Hi-fi prototypes
UEQ-S questionnaire
Semi-structured interview
Participants (10)
5 AsthmaTuner users
5 people with asthma but no experience in the app
I ran the same comparative study to analyze the risk of releasing the new design. This time, the results significantly favored the new design, both on usability and visual appeal. Participants understood that they should document their symptoms from the past 7 days, and found the selection intuitive and quick.
Results
Original design is less usable, less visually appealing
Redesign is more usable, more visually appealing
Qualitative feedback
1 “7-day” or “week” time frame correctly identified from prompt
2 New icon design improves readability and symptom recognition
3 No pre-fill provides confirmation of symptom selection
4 Simpler symptom copy is easier to digest and understand
5 Inconsistencies in answers between two interfaces*
*It's important to note that a few participants selected different symptoms between the two designs. In one case the participant missed selecting a symptom in the priginal design, while in two others they misunderstood the language used in the old design (for example, having had a symptom '2+ times' versus 'twice/week'). In all cases, this pointed to issues in the old design that were addressed by the redesign; however, this was notable because it could influence how current users would document their symptoms from that point on.
8 Release and outcome
After several design and testing iterations, we could confidently release a new design for symptom tracking in the AsthmaTuner app that helps our users accurately and capably document their asthma. Additionally, our PM and CTO recognized that the risk analysis had been some of the most thorough they'd ever done for a new design, and we've repeated the testing process for more releases since.
Symptom description popup
Original symptom tracking design
Screen that appears before tracking step at first time use
New symptom tracking design