UX Design
MedTech
Mobile app
Purcell
Featured projects
Purcell is a MedTech startup from London, UK, developing innovative smart inhalers for asthma patients.
My role
As a 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.
Project background
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.
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:
01
Medication Management
The necessity of frequent inhaler replacements and the challenge of managing fluctuating medication needs cause frustration among users.
02
Influence on Lifestyle
Asthma significantly impacts users' lifestyle, from hindering personal goals to causing feelings of exclusion in social and sports-related activities.
03
Need for Personalized Solutions
There's a clear need for personalized asthma management solutions that take into account individual lifestyle, goals, and medication requirements.
Sketches
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.
Typeface
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.
Forecasts & Notifications
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.
Trends
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.
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.
