Watch a Mood | Laura Betancur

My Role

UX/UI Designer

Time Frame

3 months

Tools

Figma

Project objective

Create an app that allows users to quickly find a movie based on their current mood. Watch A Mood features a simple interface where users can choose their mood and receive personalized movie suggestions.

It's designed to make finding the perfect movie easier and more enjoyable than ever. Also added is a "Top 5" feature, updated weekly, that suggests the best current movies based on user ratings and reviews.

Design Process

Proceso de diseño: validación de la idea, entrevistas, user flow, wireframing, branding design, primer prototipo, user testing, prototipo final

Research

Before beginning the design of Watch A Mood, I wanted to gain deeper insight into the target audience's preferences and needs. I launched a survey that allowed me to connect with casual film enthusiasts who share a common desire: to discover films that align with their current mood.

Through this survey, I interacted with 62 respondents and gained valuable insight into their movie-viewing habits, the emotional triggers that led them to select films, and the challenges they faced when searching for films that resonated with their emotions.

Survey Discovery

65% Elijieron qué mirar según la sugerencia del servicio de transmisión (% de coincidencia de Netflix).

78% Dicen que recurren a películas/series cuando se sienten tristes.

86% Dicen que pasan mucho tiempo navegando por Netflix sin tomar una decisión.

After obtaining these results, I considered several factors for user flow and design decisions:

01

Avoid content overload to prevent users from feeling overwhelmed by an excessive number of options.

02

Incorporating recommendations from various streaming services is a priority since not all users have the same services.

03

Provide relevant information based on the user's criteria to help them (year, score, % match).

User Flow & Wireframing

Brading Design

The brand design has a fresh look in dark mode, referencing the ambiance of movie theaters with very low lighting and a warm, inviting atmosphere. The deep, intense colors evoke the feeling of sitting in a movie theater, immersing users in a cinematic experience directly from their screens.

The app uses soft color combinations to represent different emotions such as Sadness, Relaxation, Inspiration, and Boredom, ensuring that every interaction with the app feels like a journey through the film's diverse emotional landscapes.

Logo, safe zones and badges

Fonts and typographic scales

Fuentes tipográficas y escalas: Anek Bangla en semibold y regular

Color palette

Paleta de color: sólidos y gradientes para distintas emociones

UI Kit

Prototype

For the initial version of Watch A Mood, I kept things simple and functional, so users can start with just two emotions: "Sadness" and "Inspiration." I compiled a short list of movies that match these feelings and set up the prototype for testing.

Testing

I conducted four user tests with the initial design. During the tests, I asked users to look at the design for five seconds and then provide their initial impressions. I also asked them about their expectations and how they thought the app would perform.

The test results provided valuable insight into the strengths and weaknesses of the original design, allowing me to adjust and improve the design to better meet user needs and expectations.

3/4 De los usuarios se confundieron con el menú principal (la interacción era un slider).

4/4 Seleccionó la película según la puntuación y el servicio de transmisión que tenían.

1/4 Tocó el botón Reproducir para ver el avance. El resto tocó el vídeo de vista previa.

Final Prototype

Watch A Mood is an app with a visually appealing and inviting experience that evokes emotions in the user. The design has been created to allow users to navigate intuitively and discover new films easily and conveniently.