Pink Reco Land-01.png

Reco

UI/UX Case Study

 
Summary

Reco is a recommendation app where every list is curated for users and groups. Lists will be formed based on your favorite genres, previously watched, and recommended movies suggested by friends. Features include curated lists from combined preferences within a group, customizable watchlists, and interactive social & communities to help users get into the loop of trends and what their friends are up to.

Role

UI/UX, Prototyping, Visuals, Branding

Tools

Figma, Illustrator, Photoshop

Duration

Fall 2021

2 Months 

Team

Solo Designer

Problem

Over 500+ U.S TV shows and 800+ movies are released each year. An average adult would spend 18 minutes a day deciding what to watch on Netflix. Many users struggle to find and decide what to watch due to the large amounts of released films to choose from. Although many platforms have suggestions and AI recommendations, users still have a hard time deciding which film to settle for, wasting their time in the process.

_edited.jpg

Design Challenge

How do we save time when it comes to choosing entertainment options? 

How do we make Reco different from ai recommendations?

Solution

A mobile application that helps users discover movies and TV shows with the help of recommendations from their friends, the community, and a personalized curated list. Features include curated lists from combined preferences within a group, customizable watchlists, and interactive social & communities to help users get into the loop of trends and what their friends are up to.

Reco Case.png
Reco Case2.png
Website

After completing the mobile application design and prototype, I designed a promotional website for first-time users who would like to learn more about Reco and it's features before downloading.

Reco Web.png

FINAL SCREENS (FEATURES)

Curated Lists.png
Swipe for your type

This function allows users to discover and browse through recommended movies and shows. Users can choose to curate a list for themselves or for a group of friends. Reco will curate the list based on every group member’s movie/show preferences.

Explore.png
Explore what your friends adore

Explore movies and shows with a feed that showcases what your friends are currently watching. You can discover which films are liked, recommended, or reviewed from by your friends.

Watchlists.png
Interlace lists to showcase

Save and favorite movies while you create your watchlists. Explore your friend’s watchlists through their profiles while showcasing yours to the public!

DESIGN PROCESS

Discovering the problem

Even though I am a huge fan of movies, I've always struggled when it came to discovering and choosing what kind of movies and shows to watch next. I began this project with a subject I am passionate about and headed towards researching user pain points when it came to suggestive algorithms and how other users may feel about choosing films to watch. I've found that most users complained about spending more time than actually watching the films while some users stated that AI recommendations are not enough for recommendations. 

Reddit Research - 1.png
Onboarding & Main User Flows

After examining and compiling a competitive analysis, I created user flows for onboarding and the main flow of the application. 

Onboarding flow.png
Main flow.png
Sketches & Mid-Fidelity

Before jumping into designing screens, I planned out several layouts and ideas by sketching ideas on paper. After figuring out what belongs to every section, I created mid-fidelity wireframes and asked my classmates and professor for feedback.

Sketches.png
Mid-Fids.png
Branding - Typeface

Before heading towards the high-fidelity prototype, I established a visual guideline for the type and the brand colors. After finalizing the visual guideline, I move on to the final high fidelities and prototype/animate the screens.

Brand.png
Branding - Color Pallet

I decided to go with a dark mode themed interface since the application is focused on mainly movies and TV Shows. Generally, users would associate films with theatres so I thought a dark mode would be appropriate. I chose pink and purple as the main branding colors since it stands out beautifully and vibrantly on top of the dark background. As for the secondary colors I went with blue and peach since they work nicely with pink and purple when it comes to mixing them into a gradient.

Brand.png
Reco Case.png
Reflection

Overall, I had a blast creating this project! It started off as an idea with my hackathon teammates (I have received their approval to continue the idea within this project), and watching it come together was satisfying! I really enjoyed playing with the color pallet, and I loved how clean the interface came out. 

Some of the challenges I have faced during this project would be the tight timeline we had for completing it. Although I stuck to the timeline and ensured I was caught up to the project deadlines every week, it would have been nice to have more time to create a promotional video while adding more user scenarios into the prototype. If I had more time I would prototype and create more pop-up screens to show what personalization and filtering would look like while planning more ways of integrating third-party applications into Reco.