The screen of the emotion register

Emotion

PROJECT

This project aims to provide emotional well-being tools to people facing mental health challenges. Emotion is a daily emotion recording application, designed to help users recognize, control, and evaluate their emotional state.

UX/UI Design • Branding • Design System • Prototyping

A group of design screens with high-fidelity

IDEA

The challenge was to develop an application that offers various functionalities to promote emotional well-being. To define the main characteristics, we carried out exhaustive research that included interviews with psychologists and potential users of the application. The information collected was essential for the creation of the key functionalities:

Emotion Registry: it is a dynamic interaction space. The user selects one of the general sensations and, by scrolling vertically, chooses the exact emotion, thus concluding the registration.

Musical playlists cards

Activity Summary: this segment presents a series of cards with organized information, allowing the user to analyze their activity status.
Musical Playback: various musical playlists, with information and images that facilitate understanding of the musical genre and duration

Physical and mental activity cards

Reading Articles: Offers information from specialists on various mental and emotional health topics. Physical and Mental Activity: Contains videos of physical and mental exercises. It includes activities that generate a positive impact in times of stress, anxiety, etc.

Wireframes low and high-fidelity

Design

The design system was conceived to create an interface that conveys harmony, calm, and containment. For this reason, the base color combination is neutral (gray and beige), which contrasts with colors loaded with emotion, which are interpreted through characters and illustrations.

Calendar emotions screen
Register emotion screen

To add rhythm to the interface, micro-interactions with different graphic compositions were created in areas where multiple steps need to be followed.

Screen design emotion App

Rounded shapes were used for most elements. By using grids, and the rule of 8 as a base, hierarchy was established in titles, subtitles, and body text. Similarly, this approach was applied to cards, sliders, calendars, and the tab bar.

Emotion App
Screen website emotion App

Website

The website provides comprehensive information about the management and usage of the application, including details about plans, discounts, and promotions, as well as functionalities available on this device.

SMARTWATCH

Emotional logging can be done from a Smartwatch, providing a positive experience for the user due to the short time it takes to complete. This allows for quick and convenient interaction, contributing to usability and user satisfaction.

Screen smartwatch emotion app

yay.creative.design

yay.creative.design

yay.creative.design

yay.creative.design

yay.creative.design

yay.creative.design

LET’S WORK TOGETHER

Copyright ©2024