ReelSavvy

Introduction

Do you ever feel overwhelmed by endless scrolling, trying to find the perfect movie? ReelSavvy is here to change that. Understanding that your mood plays a crucial role in your movie-watching experience, we created a web app that delivers personalized movie suggestions based on how you're feeling at the moment. No more poor movie recommendations or decision fatigue—just a seamless, enjoyable experience that ensures you always find the perfect film.

By prompting you with tailored questions about your current mood, ReelSavvy provides movie recommendations that resonate with your emotions. Discover movies you'll love without the frustration of endless scrolling with ReelSavvy.

‍

Initial Assumption, Research, & Validation

Before Abdul and Pearl conducted research, we defined our problem space as helping users find the movies they wanted to see more efficiently. Initially, we assumed that providing users with movie recommendations based on their favorite actors and actresses would be a potential solution. However, after they conducted research, we discovered that this preliminary solution did not address the actual pain points of users. The main pain point was that movie recommendations do not align with what users feel like watching.

‍

They surveyed 30 users and found that: 

• 63.30% said detailed information about actors and actresses when searching for movies was either “Not at all Important” or “Slightly Important,”
• 46.70% stated that the “Actor/Actress” was a factor influencing their decision to watch a movie. 

After Abdul and Pearl synthesized the user interview feedback, the insights prompted us to pivot to a mood-based recommendation solution.

Key findings from our user interviews include:

• 78.50% mentioned frequently receiving suggestions that do not align with what they feel like watching, leading to dissatisfaction and frustration. 

• 70% reported experiencing decision fatigue while attempting to select a movie, often resulting in abandoning the search.

• 70.83% cited issues related to poor movie recommendations from streaming services.

• 70% expressed that personalized movie recommendations were either “Extremely Important” or “Very Important” to them when searching for movies.

‍

Solution Explanation

Execution:

When forming our team, we set a collective goal to "work with a cross-functional team to ship a functional product." To achieve this, we worked in weekly sprint cycles, utilizing SAFe methodologies and best practices. During our sprint planning sessions: Pearl and Abdul synthesized the research, creating user stories, and Mahrus and Daniel estimated technical tasks from our user stories and acceptance criteria, which enabled Abdul to manage our backlog prioritization and refinement process. We capitalized on our retrospectives to reflect on the outcomes of the previous sprint, our achievements and shortcomings, and whether or not we accomplished our sprint goal. We aimed to iterate on our product each week, consistently delivering functional value while working towards our final MVP.

This approach allowed us to prioritize the features that would deliver the most value in our MVP while being realistic about what we could accomplish within an eight-week timeframe. The features prioritized in the MVP were:

• Interactive landing page displaying mood-based movies and an explanation of our mood feature.
• Mood feature that allows you to find movies based on 19 different moods to choose from with genre selections based on selected mood
• Movie Detail Page featuring viewing options with a functional trailer, moods associated with the film, release year, genre, length, synopsis, closed captioning languages, and available streaming platforms

Once these features were completed, we expanded our scope to include the following additional features:

• Functional movie search page
• Watchlist Page with functional movie cards

‍

UX & UI 

We created ReelSavvy, aiming to make our users feel understood, and incorporated that into our design principles. Pearl’s design employs a design system and is accessible following WCAG standards, ensuring our smooth night mode theme had the right amount of contrast for readability and ultimately creating an easy user experience.

‍

ReelSavvy Design System

‍

Low Fidelity Wireframes

‍

High Fidelity Mockups

Iterative Design Learnings

Pearl conducted remote usability testing with seven users via video call to gather essential feedback on the prototype. The testing involved three tasks:

1. Navigating the prototype to find a mood-based movie
2. Navigating the prototype to add a movie to their watchlist
3. Searching for a movie

All seven users completed all three tasks, achieving a 100% success rate. ReelSavvy received an overall usefulness score of 8.5/10, with all users expressing their willingness to use the service. 

The overall feedback was positive, as users required little to no guidance on the tasks, resulting in minimal changes. Here are some of the iterations made based on usability testing:

• Users wanted more information about the mood feature on the home page. Pearl applied changes to the landing page’s hierarchy, and the use of whitespace was structured so that the mood feature was emphasized more.
• Users wanted more clarity on the pages they were on. Pearl applied more titling to different page sections. 

Upon communication with the developers, Pearl was notified of some technological constraints from our API, which led to further iterations on the design:

• We only had access to portrait-mode movie posters for our movie cards. Iterations were made to improve the affordance and size of the new movie cards.
• We did not have access to movie titles on the homepage for our movie cards. However, movie titles were included in our design to emphasize our mission of providing an accessible experience for all. This feature would be planned for future implementation.

‍

Try Pearl's Prototype

‍

Technical Implementation Details

Hosting Platform:

• Vercel

Frontend:

• React.js
• Axios
• React Router DOM
• React Bootstrap / Bootstrap

Backend:

• Python
• Flask

APIs:

• TMDB (The Movie Database API)

‍

High Level Overview

ReelSavvy leverages a combination of frontend and backend technologies to deliver a seamless and interactive user experience. Mahrus built the frontend using React.js for its component-based architecture and ability to create reusable and interactive UI elements. He utilized Axios for making HTTP requests to the backend, while React Router DOM enabled the creation of a multi-page application. He achieved styling through React Bootstrap and Bootstrap, ensuring a responsive and modern design.

Daniel powered the backend using Python and Flask, which handle requests from the frontend and interact with the TMDB API to fetch movie-related information. The TMDB API is essential for providing the data needed to display movie details, recommendations, and trailers.

ReelSavvy's frontend components are designed to be clean and reusable, ensuring that the codebase is maintainable and scalable. React Router DOM enables smooth navigation between different pages, including the home page, mood feature page, search results page, and movie details page. The home page showcases movies and includes a banner that redirects users to the mood feature page. The unique mood feature on its separate page recommends movies based on the user's selected mood. The search functionality allows users to find movies and view relevant information, including similar movies and trailers.

By choosing these tools, Mahrus and Daniel ensured ReelSavvy is a responsive, interactive, and efficient user experience. Future improvements could include adding a discovery page, login & community features, enhancing the UI/UX design for better user engagement, and incorporating more personalized recommendation features.

‍

Technical Challenges

The hardest part of development was implementing and hosting the backend, which prevented us from incorporating the watchlist feature and logins. Although the app is accessible via the TMDB API, we couldn't host our own API, which hindered our ability to fully implement the intended features. Despite these challenges, our team is very satisfied with the design and development process. The current state of the app is well-executed, and we believe we could achieve even more with additional time.

‍

Future Steps

We will not be continuing this project; however, the experience we all gained working in a cross-functional team has been invaluable. If we were to continue building our product, we would review the feedback and data gathered from our MVP to prioritize our next steps. Based on our research, the next important features to implement would be the login and community features.

• The login feature would allow us to save user data to their accounts and further personalize their experience on the application. Users would be able to have personalized homepages based on their most frequently viewed moods. 
• The community feature would enable users to not only give but also receive movie recommendations from their network. Since 74.52% of survey respondents mentioned feeling more inclined to watch movie recommendations from friends and family, we see this as a valuable future feature to implement.

‍

‍

‍

‍