Mobile app

Tranqui

Mobile app design that helps students improve anxiety, stress, and mood through meditation exercises.

Role

UX UI Designer

Tools

  • Figma
  • Illustrator
  • Wordpress

Abilities

  • User investigation
  • Information architecture
  • App Design

Timeline

March 2022 - June 2022

Team

  • Nicolas Lepe
  • Javiera Arias
línea de tiempo del proceso de diseño: definición de temática y brief, investigación con encuestas, entrevistas y análisis de referentes; etapa UX con inventario de contenidos, arquitectura de información, mapa de navegación y wireframes; y etapa UI con guía de estilo, mockups y prototipo interactivo.

Description

See Brief

We designed a mobile application to help people with exercises to face anxiety periods and support students with organizational resources.


Investigation

See Investigation

We investigated before we started designing, conducting surveys and interviews with students of 3 universities in the area, analyzing them to define the best solution to help people with anxiety.

Relevant data

The initial conclusions of the preliminary research were:

  • They know there is help available, but don't fully understand how it works, and don't seek help.
  • The people who used the program feel the experience could be better.
  • They believe the pandemic affected them in academic and social spheres.
  • They care about his mental health, socializing with his friends, doing hobbies, and avoiding stressful situations.

User archetypes

Based on the interviews, we concluded that:

  • The interviewed commonly present sadness, anxiety, and depressive symptoms.
  • The universities have a student support system, but with little interaction from psychologists.
  • Interaction among students is decreasing, while the use of technology is increasing.
  • The pandemic has affected students due to isolation.

Based on this information, we generated user archetypes that help us to design the project.


Navigation Map

To guide us in developing the design, we generated a navigation map with all the screens designed, considering 3 relaxation exercises and a task organization section.

Wireframe

In parallel with the development of the style guide, individual wireframes were created by each designer on the team, and were unified into one, considering the user's simple navigation.

Image of the basic design of each screen, connected by lines.

Style guide

See Style guide

Based on a moodboard, we designed a style guide, considering the soft pastel tones that complement the theme of tranquility.

Sheet detailing the fonts, icons, buttons, illustrations, logo and color palette

Finally, we apply all the graphic elements and style to generate the mockups, which are later used to develop the website in WordPress.

To see the full photos, click on each one.