Designing a mobile app for smart inhalers

Project Overview

This project focused on the design of a companion mobile application for smart inhalers. The primary aim was to design an intuitive, user-friendly interface that would enhance user experience and engagement, thereby encouraging regular use of smart inhalers and improving health outcomes.

My Role

As part of a three-member UX design team, I contributed to crafting user flows, developing the design system, and shaping the UI & Visual Design of the app.

Tools used


Asthma, a chronic lung disease, affects an estimated 262 million people of all ages worldwide. While there is no cure for asthma, several treatments are available. The most common treatment involves the use of an inhaler, which delivers medication directly to the lungs.

Purcell Global, a London-based medical device company, is leading the development of smart inhalers, digital therapeutics software, and machine learning algorithms for respiratory drug delivery. Their aim is to transform the way asthma patients interact with their inhalers.

Insights from User Research

Our design process relied on a comprehensive user research data set provided by a previous team. While we didn't conduct fresh user research, we thoroughly analyzed the existing data to gain an in-depth understanding of our users' needs, frustrations, and goals. Here are the key insights gleaned from the user research:

Medication Management

The necessity of frequent inhaler replacements and the challenge of managing fluctuating medication needs cause frustration among users.

Influence on Lifestyle

Asthma significantly impacts users' lifestyle, from hindering personal goals to causing feelings of exclusion in social and sports-related activities.

Need for Personalized Solutions

There's a clear need for personalized asthma management solutions that take into account individual lifestyle, goals, and medication requirements.

User flows

Leveraging insights from user research, we constructed user flows to outline the application journey. Our focus was on ensuring intuitive interactions and a frictionless path to goal completion, ultimately aimed at enhancing the overall user experience.

Sketches & Wireframes

Building upon our user flows, we transitioned into the sketching and wireframing stage. This step allowed us to translate our understanding of the user journey into tangible designs, laying the groundwork for the app's structure and interaction patterns. Our key objective was to create an interface that was not only user-friendly but also catered to the specific needs of our users.

Let’s do some tests

User testing of our wireframes provided valuable insights into the design process. Participants appreciated the inclusion of environmental information, the ability to track medication usage, and the personalization of inhaler reports. However, some elements, such as reporting graphs and ranking systems, were initially confusing, and the process for adding new devices or viewing techniques was unclear. These insights guided our efforts to improve the user interface, aiming for a more effortless and intuitive experience.

Design System

With a solid understanding of our users and a clear vision of their journey, we moved on to building our design system. This foundational element served as the single source of truth for our design team, establishing a consistent language across our app. In the following sections, we'll highlight some key elements from our design system.

Color Palette

When selecting our color palette, we decided to adhere closely to the brand colors provided in the client's brand book. This choice allowed us to maintain brand consistency while creating a visually compelling and cohesive user interface.


Our choice of typeface played a crucial role in ensuring readability and aesthetic appeal. We opted for Inter for body text due to its clear, friendly readability, complemented by DM Sans for headers, which added a modern and clean touch to our design.

UI Elements

Special attention was given to crafting UI elements that were not only visually compelling and functional, but also resonated with the brand's personality.

High-Fidelity Screens

After setting up our design system, we started crafting high-fidelity screens. The data and insights gathered during the wireframing and user testing phases served as a valuable guide during this process. Our aim was to produce screens that effectively addressed user requirements, while also delivering an engaging and easy-to-navigate user experience.

Functional Dashboard

The Dashboard serves as the central hub, providing users with an at-a-glance overview of their asthma management. Easy access to quick actions enables users to swiftly input key data, ensuring the app remains current with their asthma condition.

Today's Forecast &


The Today's Forecast screen empowers users with real-time environmental information, alerting them to potential asthma triggers like pollen levels and air quality. The Notifications screen enhances this by offering tailored alerts, from medication reminders to forecast updates, ensuring users stay informed and ahead of their asthma condition.


The Trends screen gives users a longitudinal view of their inhaler usage and symptoms. By providing visual representations of data over time, it helps users identify patterns, enhancing their understanding and management of asthma.

Device Management

The Devices screen is the hub for managing inhalers. It allows users to add, edit, or remove devices, keep track of geo-locations, and access additional training materials. Thus, it ensures their medication data remains precise and current.

Let’s do some more tests

Through user testing of our high-fidelity prototype, we gathered critical feedback. Participants liked the features that displayed environmental factors, tracked medication use, and generated personalized inhaler reports. They found the interface easy to use and appreciated how the app helped them manage their asthma. They also valued the reminders and notifications, which helped prevent any misuse of inhalers. However, some users mentioned they didn't need the pollutants detail, and a few felt they didn't need the guides on inhaler techniques. This invaluable feedback has been key in making our design more user-friendly and effective for managing asthma.

Final thoughts

This project highlighted the importance of empathizing with our user base, despite not personally experiencing asthma. Understanding the challenges and needs of individuals living with asthma was essential in creating a meaningful and impactful solution.

Navigating the complexities of asthma management presented challenges during the design process. Balancing the simplicity of the user interface with the comprehensive tracking and reporting features required thoughtful consideration and iterative refinement. Through open communication and team collaboration, we were able to overcome these challenges and create an app that genuinely supports and enhances users' lives.

Made by me with lots of ☕️ and Framer.

Made by me with lots of ☕️ and Framer.

Made by me with lots of ☕️ and Framer.