Don’t worry about
asthma any more!
‘AMMA’ (The Asthma Monitoring and Management Appor) is an application
for health tracking and monitoring for asthma sufferers.
This application measures breathing patterns, blood pressure, steps, sleep patterns and other statistics. The wearable monitor shows different colors to indicate status/ progress of health.
Project kickoff (analyzing the project)
The goal is to create a health tracking and monitoring mobile application for asthma sufferers. The application will need to measure data like breathing patterns, blood pressure, inhaler usage and other vital statistics to help the user understand and track his health problem. Based on the data, the application will learn about user’s body and their health problems. The application will use learning data to notify a user about possible health problems and show them their average health state.
Goals and objectives
1) Define the main symptoms that trigger asthma problems, for better tracking and understanding the user’s health.
2) Understand problems that cause the asthma attack, and how to prevent it.
3) Define biggest concerns related to user’s daily struggle with asthma. Learn about their habits, problems, needs and limitations.
4) Create an application that will inform and prevent everything related to asthma problems and attacks.
Asthma is a growing modern disease that more and more people struggle with. It is a very dangerous health problem, which patients need help with. The goal is to create a secure and reliable asthma tracking application that can help users to prevent their asthma attacks, and more easily manage their daily asthma routine, and also improve their daily life.
After understanding the project and learning, it is time to create a UX process that will be best suited for the project. The project process consists of: Research phase, Defining phase, Ideation phase, Prototype and Validation phase and Final design & Preparing for code phase.
Research phase will validate assumptions, open new questions, help to learn and empathize with users needs, problems and behaviors.
Defining phase helps to form insights, identify the persona and features of the application. Results are clear and right problems to solve in the Ideation phase with Information Architecture, Site map and User flows.
With wireframing in Prototype and Validation phase, feedback from the users about the usability and usage of the layouts will be gathered. The final step is to create a strong identity, functional and desirable design and prepare everything for production.
(Developing the idea)
& Preparing for code
The project plan consists of the project process, goals, focus, and main research questions. With deep understanding of all the parts of the plan, the structure of the project will be organized.
The project will be organized based on a four week production.
First week Research and Defining phase- Literature Review (Secondary Research), Competitive Analysis, Contextual inquiry and survey, defining the Persona.
Second week Defining and Ideation phase: Production Roadmap, Sitemap, User flow and starting with Wireframing.
Third week: Wireframes and Usability tests.
Last week: UI and Identity design.
For the research, Contextual inquiry and user interviews will be used. Spending time on one-on-one interviews, learning about user’s problems, needs, goals and limitations, the results were concluded.
Pages of the Interview
Basic information about asthma
Users describe asthma as a major problem in their lifes. All users have at least one family member that has an asthma history.
70% of participants don’t use any application to help with their problems. Other 30% are not satisfied with their applications- they think that those are hard to use or they don’t have useful features.
When research is finished, and all data that is needed for better understanding of the user’s problems is gathered, categorization of gathered data starts. Gathering data will help to crystallize the most important features that will solve the user’s problems.
The average AMMA app user is around 24 y.o. (from now on called Dario). Dario has problems with wheezing, coughing, shortness of breath, and chest tightness or pain. Such type of disease is called asthma. Activities, exercise, weak immunity, allergies and air pollution, all can trigger his asthma into a asthma attack. The worst experience is when he has an unexpected asthma attack. In this unexpected time, he needs help from a doctor or his family and friends. Usually, he forgets his inhaler, and that is very dangerous for him. Asthma is a big part of his life, so he needs a secure place in which he can analyze his health and everyday tasks, so he can lead a normal and easier life.
Basic information about asthma
Everything from Measure
History of past attacks
Status of health progress (different colors, medical condition)
Place where the user is located
Asthma – potential attack
In case of asthma attack, send email or call for help
Medical (doctor) exam
Trigger – Air quality, colds, increased physical activity, strong smell, house dust and animal hair, allergies
When attack starts, the application will automatically start
Step-by-step guide to help user
How do you feel today
Export and send asthma medical report
Blog for education (learn proper inhaler technique, videos and tips)
Login and Signup
On the first screen user can start a step-by-step guide for help
with an asthma attack
User Flow (sitemap)
After defining the main features and problems that need to be solved, the structure of the application is the next step. Every feature has a certain user flow, and based on the flows, the entire structure will be developed. Through sketching and organizing pages, a structure with a combination of sitemap, user flows and low-fidelity wireframe was developed. This way, Information Architecture has a strong and solid structure organized based on a user-centric approach.
High-fidelity wireframes are the next step of low-fidelity wireframes. With deep understanding of the structure, positioning, hierarchy, user flows, usability and interaction design, the wireframes are prepared for user testing. Testing was done through InVision app. There were 5 one-on-one testing interviews with selected users. Through tests records we concluded what user understands, which elements and flows they have trouble with, and how we can improve the application.
The main inspiration for the logo is the breathing pattern. The biggest problem with asthma is difficulties with breathing, that is, inhaling the oxygen into the lungs. Deep inhaling and exhaling will help to get more oxygen into the lungs, so with this healthy breathing pattern, the patient will get better. With the combination of AMMA letters and the pattern, we created a logo that has a strong identity of AMMA application for asthma problems.
The logo is designed to have a strong, straightforward and memorable impact. Lines that creates the logo are properly shaped to represent loyalty and security of application.
Typography and Color
Material design standard is used for typography and color in this application, but the design is not focused only on Material, but uses other patterns and examples of good practice.
For creating a strong and visually attractive application, we carefully selected colors that make an appealing effect, with a clean and high contrast interface. Colors represent health, easy breathing, freshness and a feeling of techy and modern design.
For the application standard Material design Roboto typography was used.
Aa Bb Cc Dd Ee Ff Gg
Hh Ii Jj Kk Ll Mm Nn
Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz
Two primary colors are used in the design, and one alternative, secondary color.
For gray, Blue Grey from Material design colors guidelines is used.
User interface design
Welcome screen and On boarding
On boarding process
Preview shows Loading screen, Welcome screen and Onboarding process that introduce application to users.
Selected pages from app