top of page
_DSC0774 (4).jpg

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:

1 Problem brief anchor
Project 1 treatment flow.png

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.

Project 1 old symptom screen.png
Picture3.png

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.

Requirement definition anchor
Ideation and sketching
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.

Project 1 ideation concepts_edited_edited.jpg

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.

Project 1 Header BG.png
Group 1027.png
Group 1026.png
Group 1028.png

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.

Quick & dirty testing
Drawing board
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
Old design small table.png
Redesign is less usable, more visually appealing
New design small table.png
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.

Risk analysis 1
Drawing board.PNG

The drawing board

risk analysis testing 2 screens.png

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
old design rating 2.png
Redesign is more usable, more visually appealing
new design rating 2.png
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.

Risk analysis 2

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.

Picture3.png

Symptom description popup

Original symptom tracking design

Screen that appears before tracking step at first time use

New symptom tracking design

Release
bottom of page