PURCELL CASE STUDY

PURCELL CASE STUDY

Gamifying an Inhaler App

Gamifying an Inhaler App

PURCELL CASE STUDY

Gamifying an Inhaler App

Overview

Purcell is an inhaler app designed to help asthmatic patients manage their symptoms and improve their lung health. This project involved creating a gamification concept to encourage good medication usage habits, exercises and access to health stats.

Purcell is an inhaler app designed to help asthmatic patients manage their symptoms and improve their lung health. This project involved creating a gamification concept to encourage good medication usage habits, exercises and access to health stats.

Team: 3 UX/UI Designers

Team: 3 UX/UI Designers

My Role: UX/UI Designer

My Role: UX/UI Designer

Duration: 8 weeks (January-March 2024)

Duration: 8 weeks (January-March 2024)

Product Type: Health Mobile App

Product Type: Health Mobile App

Tools: Figma, Figjam

Tools: Figma, Figjam

Introduction

  1. Problem

  1. Problem

Medication Adherence: Patients with asthma often rely solely on their reliever inhaler to manage their symptoms

Medication Adherence: Patients with asthma often rely solely on their reliever inhaler to manage their symptoms

Incorrect Inhaler Usage: Over 70% of asthmatic patients use their inhaler incorrectly

Incorrect Inhaler Usage: Over 70% of asthmatic patients use their inhaler incorrectly

Traditional concept: Many medical apps have basic features and therefore fail to engage users effectively, resulting in low usage

Traditional concept: Many medical apps have basic features and therefore fail to engage users effectively, resulting in low usage

Healthcare Support: Most users seek guidance from healthcare professionals rather than apps due to limited support and trust with apps

Healthcare Support: Most users seek guidance from healthcare professionals rather than apps due to limited support and trust with apps

Research Phase

  1. Secondary Research

In the first few meetings with the client, our goal was to familiarise ourselves with the existing flows and understand the client's needs and requirements. We then conducted secondary research and analysis to understand users' challenges when using medical devices and apps. Due to time constraints, we decided to focus on studies that provide data about asthma and how current apps support users.

Our research revealed the following:

Define Phase

  1. Personas

After gaining a better understanding of medical apps and users’ needs, we created two personas based on their medication adherence. The first persona represents a compliant user who is highly anxious about their condition, while the second persona represents a non-compliant user who is mainly interested in managing symptoms when an asthma attack occurs. These two personas are on opposite ends of the spectrum but helped us gain a better perspective into the different types of patients who would use the app.

Compliant User

Compliant User

Non-Compliant User

Non-Compliant User

  1. Solution

  1. Solution

We introduced the concept of a virtual companion to foster an emotional connection with the application and mitigate any apprehensions associated with medical apps. We also developed an inhaler training, introduced personalised goal setting, exercises to improve lung capacity and trend screens to help users stay on track of their progress.

We introduced the concept of a virtual companion to foster an emotional connection with the application and mitigate any apprehensions associated with medical apps. We also developed an inhaler training, introduced personalised goal setting, exercises to improve lung capacity and trend screens to help users stay on track of their progress.

  1. Design Process

  1. Design Process

  1. Prototype

  1. Prototype

Download PDF

Download PDF

Download PDF

  1. Comparative & Competitive Analysis

Our secondary research provided valuable insights into the challenges faced by users. We decided to conduct further research to look at solutions offered by other health apps and analyse their strengths and weaknesses. I also looked into gamified elements that have proven to be successful within health apps. To achieve this, we carried out a comparative and competitive analysis:

  1. Sketches

  1. Sketches

Due to time constraints, we decided to only design sketches and move on to creating high fidelity mockups once approved by the client:

Due to time constraints, we decided to only design sketches and move on to creating high fidelity mockups once approved by the client:

  1. High-Fidelity Mockups

Our sketches gave us a better idea of the visuals and content of each screen. Using the style guide provided by the client, we brought those sketches to life:

Comparative Analysis

Comparative Analysis

Competitive Analysis

Competitive Analysis

Competitive Analysis

  1. HMW’s

After considering the challenges, we used HMW questions to determine our priorities:

After considering the challenges, we used HMW questions to determine our priorities:

  1. How might we educate patients to use their inhalers correctly?

  2. How might we allow patients to easily access their health data?

  3. How might we show progress?

  4. How might we gamify the app to increase engagement?

  1. How might we educate patients to use their inhalers correctly?

  2. How might we allow patients to easily access their health data?

  3. How might we show progress?

  4. How might we gamify the app to increase engagement?

Ideation Phase

The HMW questions helped us to narrow down our solutions and prioritise the most important issues. After brainstorming multiple ideas and having conversations with the client, we came up with the following solutions:

The HMW questions helped narrow down our solutions and prioritise the most important issues. After brainstorming multiple ideas and having conversations with the client, we came up with the following solutions:

Interactive Inhaler Training: Prompt users to go through an inhaler training during the onboarding process, which can be skipped if needed

Virtual Companion: Introduce an avatar, which can be customised to create a more personal experience for the user

Personalised Goal Settings: Users can set goals and receive recommendations based on their lung profile as well as set reminders to help them stay on top of their routines called “Missions”

Scoring & Rewards System: By fulfilling their "Missions," users are rewarded with currency within the app, which can be exchanged for both tangible and digital incentives

Leaderboard: Designed to create a sense of community while still keeping users’ privacy intact thanks to the avatar personalisation

Progress Tracking: Create additional screens to help users view and track their progress

  1. User Flow

We divided the tasks among us, with each designer handling specific user flows. I focused on the avatar’s introduction, goal setting and exercise commendation. We then combined them into a user flow that included all the following red routes:

  1. Onboarding (Inhaler Training, Avatar’s introduction & Goal Setting

  2. Exercise Recommendations

  3. Avatar’s Profile

  4. Inhaler Flow

  5. Trend Flow

  6. Account Flow

View Sketches

View Full Design

View Full Design

Prototype & Test Phases

  1. Prototype

We developed a prototype and conducted a round of usability testing with six users. Based on our discussion with the client, the testers were a combination of asthmatic and non-asthmatic users. The objective of these tests was to ensure that the design and flows were intuitive. Here were our findings and iterations:

BEFORE

BEFORE

AFTER

AFTER

INHALER TRAINING

INHALER TRAINING

FINAL PROTOTYPE

FINAL PROTOTYPE

AFTER

Iteration:

We moved the inhaler instruction to be before the breathe-out exercise


Iteration:

We moved the inhaler instruction to be before the breathe-out exercise

Finding:

The steps for inhaler training needed to be rearranged so that users could shake their inhaler before breathing out


Finding:

The steps for inhaler training needed to be rearranged so that users could shake their inhaler before breathing out

Finding:

The steps for inhaler training needed to be rearranged so that users could shake their inhaler before breathing out

BEFORE

GOAL SETTING SCREENS

GOAL SETTING SCREENS

AFTER

Iteration:

We shortened the texts to ensure they were all concise and easy to understand

Iteration:

We shortened the texts to ensure they were all concise and easy to understand

Finding:

Users found the texts lengthy and didn’t have time to read and understand them all

Finding:

Users found the texts lengthy and didn’t have time to read and understand them all

Finding:

Users found the texts lengthy and didn’t have time to read and understand them all

BEFORE

STEP SETTING SCREEN

STEP SETTING SCREEN

AFTER

Iteration:

We removed the mention “Maximum” so that users could add their maximum number of steps

Iteration:

We removed the mention “Maximum” so that users could add their maximum number of steps

Finding:

Users found it confusing to have a restricted number of steps for goal setting

Finding:

Users found it confusing to have a restricted number of steps for goal setting

Finding:

Users found it confusing to have a restricted number of steps for goal setting

BEFORE

HOME SCREEN

HOME SCREEN

AFTER

Iteration:

We iterated the circle graph to include stats shown on the trend screens and linked it to the “Trend” screen

Iteration:

We iterated the circle graph to include stats shown on the trend screens and linked it to the “Trend” screen

Finding:

Users kept clicking on the circle graph to access trends rather than clicking on the “Breathe icon”

Finding:

Users kept clicking on the circle graph to access trends rather than clicking on the “Breathe icon”

Finding:

Users kept clicking on the circle graph to access trends rather than clicking on the “Breathe icon”

Next Steps

There were changes we weren’t able to implement after our testing, due to tight deadlines. So my next steps would be to implement the following changes:

  • Access to Avatar and Rewards: Some testers kept clicking on “account” or the hamburger menu to view their avatar/rewards. I would look at adding access to the rewards and coins under the hamburger menu or “account” so users would be able to easily manage their coins and incentives


  • More Personalisation: To make avatars more distinct on the leaderboard, users could choose from different types of avatars during onboarding or customise their avatar's colour


  • Exercise Prompt: I would add a prompt for users to complete a breathing exercise whenever they use their reliever inhaler in case of am asthma attack. Users would be able to choose whether or not to complete the exercise


  • Hands-Free Operation: I would also add voice commands to navigate through breathing exercises as we have done with inhaler training screens, making the app more accessible, especially for users having an asthma attack.

Reflection

This was my first project as part of a UX team, and I feel fortunate to have worked with two other skilled designers who added a unique and fresh perspective to every design solution we created. I struggled at first whenever we didn’t meet a deadline, but this project has taught me the importance of being flexible and working as a team to accomplish our end goal. This project also provided me with a few other valuable lessons that I will take with me:

  • Communication is key: As we were located in different parts of the world with different time zones, it was essential for us to establish a regular communication schedule to ensure effective collaboration. To make it work, we scheduled catch-up calls at convenient times for everyone. This often meant that some team members had to sacrifice their sleep to join the calls, however we still made it work. In between the calls, we would message each other to keep the progress going with the assigned tasks.


  • Collaboration: One of our major challenges was to integrate all our designs and ensure they had a consistent look and feel. As all of us were UI designers, we had our own unique preferences. It required numerous iterations to arrive at the final outcome


  • Iterate, iterate and iterate: We had multiple ideas on how to gamify the app but due to time constraints, we had to prioritise the most feasible ones while still ensuring that our design solutions remained intuitive. This required several iterations but it was a good reminder that the process of iterating and refining is an integral part of an app development

linkedin.com/in/benitatamo/

Want to contact me? I'd love to hear from you!

Thank you for reading!

benita.tamo@gmail.com

OTHER PROJECTS

OTHER PROJECTS

© 2024 Benita Tamò

Introduction

  1. Problem

Medication Adherence: Patients with asthma often rely solely on their reliever inhaler to manage their symptoms

Incorrect Inhaler Usage: Over 70% of asthmatic patients use their inhaler incorrectly

Traditional concept: Many medical apps have basic features and therefore fail to engage users effectively, resulting in low usage.

Healthcare Support: Most users seek guidance from healthcare professionals rather than apps due to limited support and trust with apps

Interactive Inhaler Training: Prompt users to go through an inhaler training during the onboarding process, which can be skipped if needed

Virtual Companion: Introduce an avatar, which can be customised to create a more personal experience for the user

Personalised Goal Settings: Users can set goals and receive recommendations based on their lung profile as well as set reminders to help them stay on top of their routines called “Missions”

Scoring & Rewards System: By fulfilling their "Missions," users are rewarded with currency within the app, which can be exchanged for both tangible and digital incentives

Leaderboard: Designed to create a sense of community while still keeping users’ privacy intact thanks to the avatar personalisation

Progress Tracking: Create additional screens to help users view and track their progress

BEFORE

AFTER

BEFORE

AFTER

BEFORE

AFTER

Reflection

This was my first project as part of a UX team, and I feel fortunate to have worked with two other skilled designers who added a unique and fresh perspective to every design solution we created. I struggled at first whenever we didn’t meet a deadline, but this project has taught me the importance of being flexible and working as a team to accomplish our end goal. This project also provided me with a few other valuable lessons that I will take with me:

  • Communication is key: As we were located in different parts of the world with different time zones, it was essential for us to establish a regular communication schedule to ensure effective collaboration. To make it work, we scheduled catch-up calls at convenient times for everyone. This often meant that some team members had to sacrifice their sleep to join the calls, however we still made it work. In between the calls, we would message each other to keep the progress going with the assigned tasks.


  • Collaboration: One of our major challenges was to integrate all our designs and ensure they had a consistent look and feel. As all of us were UI designers, we had our own unique preferences. It required numerous iterations to arrive at the final outcome


  • Iterate, iterate and iterate: We had multiple ideas on how to gamify the app but due to time constraints, we had to prioritise the most feasible ones while still ensuring that our design solutions remained intuitive. This required several iterations but it was a good reminder that the process of iterating and refining is an integral part of an app development

benita.tamo@gmail.com

linkedin.com/in/benitatamo/

Want to contact me? I'd love to hear from you!

Thank you for reading!

Research Phase

  1. Secondary Research

In the first few meetings with the client, our goal was to familiarise ourselves with the existing flows and understand the client's needs and requirements. We then conducted secondary research and analysis to understand users' challenges when using medical devices and apps. Due to time constraints, we decided to focus on studies that provide data about asthma and how current apps support users.

Our research revealed the following:

  1. Comparative & Competitive Analysis

Our secondary research provided valuable insights into the challenges faced by users. We decided to conduct further research to look at solutions offered by other health apps and analyse their strengths and weaknesses. I also looked into gamified elements that have proven to be successful within health apps. To achieve this, we carried out a comparative and competitive analysis:

Define Phase

  1. Personas

After gaining a better understanding of medical apps and users’ needs, we created two personas based on their medication adherence. The first persona represents a compliant user who is highly anxious about their condition, while the second persona represents a non-compliant user who is mainly interested in managing symptoms when an asthma attack occurs. These two personas are on opposite ends of the spectrum but helped us gain a better perspective into the different types of patients who would use the app.

Ideation Phase

The HMW questions helped us to narrow down our solutions and prioritise the most important issues. After brainstorming multiple ideas and having conversations with the client, we came up with the following solutions:

Interactive Inhaler Training: Prompt users to go through an inhaler training during the onboarding process, which can be skipped if needed

Virtual Companion: Introduce an avatar, which can be customised to create a more personal experience for the user

Personalised Goal Settings: Users can set goals and receive recommendations based on their lung profile as well as set reminders to help them stay on top of their routines called “Missions”

Scoring & Rewards System: By fulfilling their "Missions," users are rewarded with currency within the app, which can be exchanged for both tangible and digital incentives

Leaderboard: Designed to create a sense of community while still keeping users’ privacy intact thanks to the avatar personalisation

Progress Tracking: Create additional screens to help users view and track their progress

  1. User Flow

We divided the tasks among us, with each designer handling specific user flows. I focused on the avatar’s introduction, goal setting and exercise commendation. We then combined them into a user flow that included all the following red routes:

  1. Onboarding (Inhaler Training, Avatar’s introduction & Goal Setting

  2. Exercise Recommendations

  3. Avatar’s Profile

  4. Inhaler Flow

  5. Trend Flow

  6. Account Flow

  1. High-Fidelity Mockups

Our sketches gave us a better idea of the visuals and content of each screens. Using the style guide provided by the client, we brought those sketches to life:

Prototype & Test Phases

  1. Prototype

We developed a prototype and conducted a round of usability testing with six users. Based on our discussion with the client, the testers were a combination of asthmatic and non-asthmatic users. The objective of these tests was to ensure that the design and flows were intuitive. Here were our findings and iterations:

BEFORE

AFTER

BEFORE

AFTER

BEFORE

AFTER

Next Steps

There were changes we weren’t able to implement after our testing, due to tight deadlines. So my next steps would be to implement the following changes:

  • Access to Avatar and Rewards: Some testers kept clicking on “account” or the hamburger menu to view their avatar/rewards. I would look at adding access to the rewards and coins under the hamburger menu or “account” so users would be able to easily manage their coins and incentives


  • More Personalisation: To make avatars more distinct on the leaderboard, users could choose from different types of avatars during onboarding or customise their avatar's colour


  • Exercise Prompt: I would add a prompt for users to complete a breathing exercise whenever they use their reliever inhaler in case of am asthma attack. Users would be able to choose whether or not to complete the exercise


  • Hands-Free Operation: I would also add voice commands to navigate through breathing exercises as we have done with inhaler training screens, making the app more accessible, especially for users having an asthma attack.

Reflection

This was my first project as part of a UX team, and I feel fortunate to have worked with two other skilled designers who added a unique and fresh perspective to every design solution we created. I struggled at first whenever we didn’t meet a deadline, but this project has taught me the importance of being flexible and working as a team to accomplish our end goal. This project also provided me with a few other valuable lessons that I will take with me:

  • Communication is key: As we were located in different parts of the world with different time zones, it was essential for us to establish a regular communication schedule to ensure effective collaboration. To make it work, we scheduled catch-up calls at convenient times for everyone. This often meant that some team members had to sacrifice their sleep to join the calls, however we still made it work. In between the calls, we would message each other to keep the progress going with the assigned tasks.


  • Collaboration: One of our major challenges was to integrate all our designs and ensure they had a consistent look and feel. As all of us were UI designers, we had our own unique preferences. It required numerous iterations to arrive at the final outcome


  • Iterate, iterate and iterate: We had multiple ideas on how to gamify the app but due to time constraints, we had to prioritise the most feasible ones while still ensuring that our design solutions remained intuitive. This required several iterations but it was a good reminder that the process of iterating and refining is an integral part of an app development

benita.tamo@gmail.com

linkedin.com/in/benitatamo/

Want to contact me? I'd love to hear from you!

Thank you for reading!