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:

Navigating the prototype to find a mood-based movie
Navigating the prototype to add a movie to their watchlist
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.

‍

‍

‍

‍

Learnings

Product Manager Learnings:

Abdul-Quayyum Almaroof

Working in a cross-functional environment and gaining first hand insight into the design thinking and solution perspectives of Pearl, Daniel, and Mahrus was extremely beneficial as a Product Manager. Experiencing trade-offs based on factors like technical capability and feasibility within our allotted time frame provided further understanding of the importance of prioritization. Collaborating with our team highlighted the significance of communication and teamwork in building a product.

Designer Learnings:

Pearl Adu-Adjei

CoLab gave me the experience I needed to work in a cross-functional team. It was very important to me to have a real-life shipped product, along with the experience that comes with working on a team with that. I was used to working on projects by myself, from ideation to conceptualization. It was very fun to work with a product manager on the user research side of things and with frontend and backend developers when it came to my user interface side of things. I learned more about agile practices and that consistent communication is very important, especially as a product designer.

Designer Learnings:

Jo Sturdivant

Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Mahrus Ferdous

Co.Lab taught me a lot about how to implement a product in a team setting. It’s been incredibly rewarding working with a product manager, designer, and another developer. This experience has truly confirmed my passion for a career in the tech industry.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Daniel Copeland

&

This tech residency has taught me important information regarding how the backend and frontend come together to form a functional, deliverable product. Most significantly, I’ve gained invaluable experience in communicating as part of an interactive team.

Developer Learnings:

Maurquise Williams

&

Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning

Our team learned that the success of building an MVP relies heavily on effective communication, prioritization, and alignment across all team members. The sprint process helped us prioritize features, while constant communication and professionalism facilitated a collaborative and understanding environment. Ensuring consistent updates and allowing everyone the opportunity to speak enabled us to bridge the gap between design, PM, and development work, ultimately leading to a well-aligned team and clear product goals.