AMMA

Home > Portfolio > AMMA

Don’t worry about
asthma any more!

Mockup_1

‘AMMA​’ (The Asthma Monitoring and Management App​or) 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.

Process

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.

Research
(Discover)

Defining
(Insights)

Ideation
(Developing the idea)

Prototype
and Validation

Final design
& Preparing for code

Project Plan

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.

Research

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.

+3

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.

Asthma problems

  • Average participant has the attack once a week, between evening and night. Allergies, activities and low-quality air trigger asthma attacks for all participants.
  • Symptoms are: wheezing, coughing, shortness of breath, chest tightness or pain and rapid heartbeat.
  • Nobody can’t feel that the attack is coming, and they all need help during the attacks. Also, they need more informed about asthma condition, to learn to effectively help themselves when they are alone.
  • Everyone needs help with organizing and tracking their medicine and inhaler usage.

Other apps
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.

Persona

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.

App features

Basic information about asthma
Measure
Breathing patterns
Blood pressure
Steps
Sleep patterns
Heart rate
Coughing
Oxygen saturation

Measure manually
Hydration
Inhaler usage
Blood sugar
Weight
Height
PeakFlow

Tracking
Everything from Measure
History of past attacks
Status of health progress (different colors, medical condition)
Medication usage
Place where the user is located

Notification
Inhaler usage
Medication usage
Asthma – potential attack
In case of asthma attack, send email or call for help
Medical (doctor) exam
Battery life
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

Other features
How do you feel today
Export and send asthma medical report
Blog for education (learn proper inhaler technique, videos and tips)
Login and Signup
Onboarding
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.

Wireframes

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.

Logo

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.

Tyoporaphy

For the application standard Material design Roboto typography was used.

Aa

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
123456789
!?@#*%’(){}[]+*

Colors

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

Selected pages from app

Measurment details

Peek flow

Asthma Help

Status details