Overview
Objective
“To explore a problem space you’re passionate about, and design a solution for it. Weekly assignments will culminate in a mid-course design critique, and the final project demo to be delivered to the class.”
Project Guidelines, Syllabus, General Assembly
Identifying a Subject
Internal inspiration: I love film. I not only love it - its woven into the fabric of my being. I read books about film. I listen to podcasts about film. I attend film festivals. My dad grew up in a cinema that my grandfather owned (his house was actually part of the cinema!). It’s how my mom and I spent our time together, before she passed. My friends and I communicate in movie references. I even reference it in my work (when I can). I knew that I wanted this project to be focused on film in some way.
External inspiration: During the COVID-19 pandemic we all found ourselves “sheltering-in-place”. With little to do (safely), watching TV shows and movies played a dominant role in every day life. I started to notice that every conversation I had with friends, family and colleagues started with the same question: “what have you been watching?”. I decided I would use this as the entry point for my project, and for the questions I would begin asking my users in my interviews.
Research
User Interviews
As defined by the curriculum, the primary research method to be used this project was user interviews. I developed a script that could be used with all interviewees, that began with the first question mentioned above: “what have you been watching?”. The aim of these questions was to provide broad insight into the process, behaviors, and emotions involved in watching shows and movies, but also made space for an open and generally free-flowing conversation.
-
4 users
-
30 minutes
-
25-40 ages
-
10+ hrs/wk wtch.
-
2+ subs.
Key findings
The interviews covered a variety of topics, including time of day, hours watched, platforms, equipment, and more. However, every user found decision-making to be a significant, and difficult process. This issue, by far, dominated every interview.
“It’s hard for me to decide what to watch”
“I find it difficult to figure out what to watch”
“I usually “doom-scroll” trying to find something to watch”
“I worry about time, and picking the wrong thing”
Additionally, there were responses that provided some insight into why users had those difficulties:
“I don’t trust the platform recommendations”
“What I watch depends on what mood I’m in”
“I usually rely on what my friends recommend”
“I never watch what is on my watchlist”
External Research
Plex Research recently concluded a study that further validates the insights gained during user interviews. In a study of 2,000 Americans:
-
30 minutes spent deciding what to watch
-
58% struggle to track what to watch
-
56% turn off the TV and do something else
-
55% opt for re-watching a show or movie
-
Source: PR Newswire
Synthesis
Affinity Mapping / Key Takeaways
Although decision making did stand out in conversation, I used an affinity mapping exercise to clearly identify all the key themes and takeaways from the interviews. This exercise supported the process of identifying and validating possible solutions.
Decision Making: Too much time is wasted deciding what to watch
Recommendations: Friends provide the best recommendations
General/Habits: Choosing what to watch depends on mood
Platforms: No preferences or trust in the platforms
Watchlists: Watchlists are rarely useful, and often aspirational
Defining the Problem, and the Solution
After gaining a clear understanding of my users' attitudes, behaviors, and needs, I defined the problem and created a framework for the solution.
Problem Statement: Streaming movie watchers need a better way to receive recommendations so that they can spend more time watching, and less time scrolling.
How might we? Statement: How might we provide better recommendations to streaming movie watchers?
Feature Prioritization
With sketching completed, I had a better mental framework of what features would need to be included in the solution. I then used the “MoSCoW” method to prioritize those features. This had the added benefit of keeping me focused on what needed to be built for the final deliverables (features that fell under the Most and Should categories).
Most: Features necessary to support core functionality
-
Give Recommendation
-
Receive Recommendations
-
Friends List
-
Movie Details Page
-
“Mood” & Genre
-
Account
Should: Ideal enhancements that would help reduce barriers
-
Platform Filter
-
Direct Play
-
Connect Services
-
Connect your TV
-
History
Could: Additional features that may add value for some users
-
“Why?”
-
Movie of the Day
-
Made For You
-
Friend Activity
Won’t: Features that don’t address the problem statement
-
Mark as Watched
-
Tweet Length Review
-
Rate
-
Watchlist
-
Most Popular
-
Trending
-
New Releases
Design
User Flows
I now had a clear understanding of what the core of this solution would be: 1) an app that would allow users to send and receive recommendations on what to watch from their friends, and 2) would prioritize and store those recommendations. The two user flows above detail that core experience.
Wireframes
Through multiple rounds of wireframes and usability tests, I was able to iterate through core elements such as layout, features, and flows.
Goals
I defined three goals that directly reflected the key insights gained during the user interviews. This would provide a structure for defining success of the wireframes when being tested.
-
Prioritized: Provide the fewest, but strongest recommendations - ideally, one (inverse of “paradox of choice”)
-
Personal: Only personally relevant content based on social network, history, and existing subscriptions
-
Efficient: The goal is to watch a movie, not spend time on the app - this should be utilitarian and fast
Testing
Utilizing Maze, I conducted multiple rounds of usability tests with the wireframes. These tests focused on two key tasks, based on the user flows shown previously: give a recommendation, and request a recommendation.
Major insight
One of the key insights from the user interviews was that mood played a big factor in deciding what to watch. The designs addressed this by a) allowing users to add a mood to a recommendation request, and b) the ability to browse or search by mood. During the usability tests all users were successful in using this feature, and reported that they clearly understood its function. However, at the end of every testing session I would solicit feedback from my users on the solution and the overall experience. When discussing the “mood” options, all users reported they weren’t interested in it as presented. Users felt this would likely be vague, unreliable and inherently untrustworthy. This mirrored what users reported in the initial interviews around recommendations provided by the streaming platforms they were using.
“Mood”, like art, is subjective
What was driving the feelings around the “mood” feature (and the streaming platform recommendations) was that moods, and art, are subjective. Not everyone finds the same things funny, or sad, or romantic, or disturbing. We all have independent lives, and unique experiences. Because of this the platform recommendations usually don’t feel accurate, or personal. The algorithms that drive them are built to find statistical similarities, not to understand and respond to our subjective experience.
However, there is something that is great at understanding and responding to your subjective experience: your friends and family. In the continued discussions and interviews, a crucial finding emerged: users did trust how someone familiar described a movie.
Redesign
With this in mind, I removed the “mood” feature, and added a “tag” feature. This allows users to add three unique “tags” to each request or submission. Users can apply their own familiar vernacular to confidently express their preferences or attitudes, and it is specific to each interaction. This created a more personalized experience, and shifted this solution to one that supported and enhanced their existing social networks.
Additional Insights
Wireframe to Goals
-
Prioritized: Yes, prioritizes a “top” recommendation
-
Personal: Friends provide recommendations
-
Efficient: Less than 20s to complete tasks
Visual Design
Naming
Quentin: I initially named this app “Quentin”. The inspiration for this is film director Quentin Tarantino, who famously worked as a clerk at Video Village in Los Angeles. At the time, he was known for his deep knowledge of film, and his ability to give customers insightful, personal recommendations. I decided not to use this name as it a) may be hard to remember or spell, b) may turn off users who have a negative opinion of Quentin Tarantino, and c) didn’t immediately speak to the nature of the app (unless you are aware of Quentin Tarantino and his background).
Reelfriends: I ultimately decided to move forward with the name “Reelfriends”. Reel, as in movie reel which holds film in a spool, and plays on a classic projector. Friends, as in friends who are sharing movies and shows to watch with each other. Since the solution is not so technology-driven, and is more based on your interpersonal network, I felt the font choice for the wordmark and the logo (wordmark with speech bubble) should be the same (friendly and familiar).
Color
After doing some exploratory color research and swatch gathering, I referred back to the design goals and focused on the utilitarian nature of this solution. With this in mind, I determined that the app should be focused on providing the user a subtle and neutral experience, not too heavily focused on bright colors, artistic layouts, or large graphics. I determined the primary (60%) and secondary (30%) colors should be a lighter and darker neutral, and the accent (10%) color should be a bright, attention-grabbing color.
From there I began testing some color palettes against a basic app icon, and different options I had prepared for the global nav. (Above) Each of the icons on the left is paired with row of navigation examples to their right. Each row represents a distinct color scheme. In the global navigation examples, each column represents a different layout.
Early Design Decisions
Early in the visual design phase, I decided to move towards a darker color scheme:
-
It reflected the experience of watching a movie in a dark theater
-
In early journey mapping work, the most probable use case for our persona’s was to launch the app when sitting in front of the tv, ready to begin a show or movie. This would most likely be in the evening, with soft light - the dark background would be easier on the eyes in those settings
Additional changes, including:
-
increasing the utilitarian nature of the app, by removing major branding elements;
-
moving away from large catchy visuals in order to keep the user focused on finding their recommendations, and away from spending more time on the app;
-
removing the bright navigation, which significantly distracted users from the content;
-
and many, many others
Showcase
Walkthrough
Onboarding
-
When launching the app for the first time you a brought into a onboarding flow
-
For account creation, you are asked to enter your phone number (verified via text)
-
Once your phone number is verified, you are prompted to connect your contacts (in order to connect to your friends)
-
Once you’ve allowed access, you will be brought to your iOS contacts screen to choose your “Close Friends” (whose recommendations you trust the most)
-
Lastly, you are (optionally) asked to add your streaming services, social media platforms, and local devices to the app, in order to make use of all the features of the app
Homepage
On the homepage you’ll immediately see your current top recommendation. As you scroll down the page you’ll have an overview of your previous three recommendations, followed by the last three movies you watched (if you have your streaming services connected). At the bottom of the screen you have your global navigation.
Top Recommendation
At the top of your homepage you have your “Top Recommendation” card. As you can see you have a new recommendation for the film “The Shining” from your close friend Britney.
The “Top Recommendation” card is the last recommendation you received. If you have multiple recommendations, close friends will be prioritized over others. If multiple close friends have made new recommendations, the one that appears higher on your close friends list will be prioritized. If multiple close friends have recommended a movie, it will be prioritized over those provided by a single close friend.
Direct Play
On the bottom right of all Recommendation cards there is a “direct play” button. Here you can hit play, and this will immediately start playing on your primary device (if you’ve connected it), in the Reelfriends app where it can streamed over Airplay (if you have the streaming service connected), or will open the appropriate app and start playing.
Requesting a Recommendation
-
At the top of the Friends page, there is a “Ask your close friends” button, which will allow you ask or request a recommendation from any of your friends, although the button is auto-populated with your “Close Friends”.
-
After clicking on the button, an overlay modal will pop-up which allows you to add or remove friends as desired, enter three optional tags to describe the film that you would like to watch, and finally send the request.
Giving a Recommendation
-
From the Home page, or the Account page you’ll see your recent Watch History. From here you can use the “Share” button to direct send this film as a recommendation.
-
Once clicked a modal overlay will open with your Close Friends auto-populated (which you can add or remove friends here as desired), and enter the three required tags to describe the film. Once completed you can hit the “Send” button, and the recommendation is sent!
Final Thoughts & Reflections
Overall, this project was a success. It accomplished the objective that was defined at the beginning of the course, it marked my completion of my General Assembly bootcamp, and I received universally positive feedback from my instructors and peers. It ultimately gave me the confidence to move forwards in my career transition to UX.
If given additional time on this project I would have liked to:
-
do more research, testing, and iteration;
-
learned and implemented accessibility best-practices;
-
and, study the Apple Design Resources, and build-in more iOS patterns and functionality;
A few things I learned during this project:
-
how to design an app
-
a practical understanding of the iterative design process
-
the importance of articulating design decisions well
Personally, this was a massive achievement. The true goal of this project was to help me transition out of a role in corporate marketing and sourcing, and into a career as a designer. My entire adult life I had always wanted to find a way to position my career into a design role. I have always been deeply interested in design and had experience in graphic design, basic web design, screen printing, retail fixture design, apparel design, and more - but I never formally trained as a designer. Once I had learned of “user experience design”, I immediately knew it was the next move. With this I could jumpstart a career in design in earnest. In January of 2021, during the height of the pandemic, I felt like I had the financial stability, time and motivation to dedicate to a bootcamp. Shortly after beginning the bootcamp I connected with a designer on the UX team at my company, Gap Inc. That first meeting ended with a new UX mentorship, on a weekly cadence. By the time this program concluded I was dedicating twenty percent of my time to the UX team, with departmental approval on both teams. After six months I was offered a full-time role as a mid-level designer of the UX team.