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.
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.
FINAL SCREENS (FEATURES)
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 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.
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.
Onboarding & Main User Flows
After examining and compiling a competitive analysis, I created user flows for onboarding and the main flow of the application.
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.
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.
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.
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.