Mobile application to help those who suffer anxiety attacks or panic attacks.
Introduction
Respira is a project for those who suffer from anxiety attacks or panic attacks. One in ten adults suffers from some type of mental problem, which is why I saw the need to create an application and conduct extensive research on these important mental health issues.
Affinity diagram
I used the affinity diagram to organize and group ideas and comments into similar categories. I divided it into 8 different groups.
Empathy map
Next, I used the empathy map to help me understand and put myself in the place of my users. The empathy map is divided into four sections: Think, Feel, Do and Say. Each section includes key questions or phrases that help me identify the needs, motivations, expectations, and behaviors of my users.
User flows
Based on information collected through interviews and surveys, I made the user flow. User flows are a graphical representation of the actions taken by users when interacting with a product or service. I used it to understand how users navigate through an application or website and to identify points of friction or improvements in the user experience.
Problems
Find a simple breathing technique with relaxing music in the moment when suffering from an anxiety or panic attack, as the person becomes disabled at that time.
Find a group of people, either organized by a professional or not, to feel understood.
Site map
We use the sitemap to identify a map of the various pages of the website. The purpose of the UX sitemap is to allow us to visualize how individual web pages or sections of the site relate to each other.
Solutions
Control your breathing rate by performing abdominal breathing.
Take into account your mood to indicate the appropriate breathing time.
You can perform breathing individually.
You can perform breathing in a group (with friends or strangers).
Offers group chat service. With a professional or not.
Offers statistics.
User persona
While I am suffering from an anxiety attack, I become disabled as a person and cannot do anything. Music and breathing simply help me.
Wireframes
We use wireframes to be able to represent a design in a simple way and to be able to do the first usability tests. You can see the wireframes to click on the image.
UI
Typography, colors, icons, ilustrations...
Prototype
Final design with the changes obtained from the usability tests of the wireframes. In this part, we have also carried out usability tests and finally we have made the final prototype. You can see the prototype to click on the image.
