Streaming platform

Introduction

A hackathon project to design and build a prototype of a website where users can choose what to watch based on their mood. Created as part of Code First Girls Hack from Home 2020. We were shortlisted for the final, along with 5 other teams. After the hackathon, I was inspired to spend more time enhancing the design.

Hackathon brief

Code together in this time of crisis to make a difference in the lives of those who have been impacted globally.

Role

We were a team of 4, I was responsible for UX/UI design and worked alongside, 2 backend developers and 1 frontend developer. We also had access to a mentor.

Time

4 weeks
April-June 2020

Problem

During the pandemic, many people are working from home and relying on streaming services to fill their leisure time. However, it can be difficult to discover content on streaming platforms that satisfy the users' needs. Therefore, they need a quick and easy way of choosing what to watch, reflecting what they are looking for.

Why this problem?

Film can be enjoyed as a form of escapism but choice paralysis makes deciding what to watch a frustrating experience

Questions

We began the project by discussing our shared love of film and asking the question: how can we watch more of what we enjoy?

Pain points

On streaming services that users are currently using, the goal is to provide people with content to watch and very few steps are required to do this. However, being presented with endless suggestions of what to watch doesn't make it easier to find something you'll enjoy.

Discovery

We discussed how this seemed to be exacerbated by the lockdown where doing simple tasks, such as shopping for food, required several more decisions and precautions than before. Also during the lockdown, people were increasingly filling their time watching TV. Therefore, we decided to experiment with how the algorithm of streaming services could be challenged to better serve users during this time.

Scope & Constraints

The hackathon was 4 weeks, therefore we were working at pace and had to prioritise tasks and discuss what elements we were going to spend more or less time on. Our goal was to submit a fully functioning prototype to the judges because we wanted to get feedback from users. To achieve this goal we made considerations based on the bigger picture and made trade-offs. I would have liked to improve the UI, however deciding to spend less time on design gave us more for the build of the site. Once we had decided on the structure of the site, the backend developers explained it would take time for them to work out how to build something this complex. Therefore we factored this into the project's timeline, devoting more time implementation.

Research validated our assumption that people found an abundance of choice paralysing and tiresome

Through research, we were able to confirm that our assumption was part of a broader trend and therefore worth investigating further. We found resources related to decision fatigue, which gave a name to the feeling we had described.

“Take sitting down to watch something on Netflix, even if I just look at what Netflix recommends for me personally it’s overwhelming…All this filtering of other options outcomes at a cost to our wellbeing. Just seeing all those choices is cognitively draining it leads to worst decision making later on, a phenomenon behavioural scientists call decision fatigue”

from Choice Overload, an episode of The Happiness Lab with Dr Laurie Santos

Insights

Our research showed us that the more decisions someone has to make over a specific period of time, the lower their quality of decision-making will be. This leads to decision fatigue. And in fact, fewer choice lead to greater satisfaction*. We began to formulate the idea of a product where users could choose films based on their mood.
*More isn't always better, Harvard Business Review

Key takeaway

Research enabled us to validate our initial assumption, and therefore we felt confident enough to move forward with this idea and formulate a hypothesis to guide us through the project.

Hypothesis

We believe that creating a platform where films can be chosen based on mood for those working from home during the pandemic will enable them to make viewing choices they feel more satisfied with.

Conducting a survey, to test the hypothesis, which revealed that over 80% of people considered mood as an important factor when choosing what to watch

We surveyed 39 people (ages 18-31) who were currently working from home due to the pandemic.

33/39

people believed that their mood influenced their browsing and consumption behaviours

33/39

people spent long periods of time looking for a film to watch

Key takeways

The survey revealed that people were making choices based on mood and yet spending a long time deciding what to watch. This signalled to us that something was lacking in the journey that users were currently experiencing. We looked to identify where this was happening, pinpointing the seemingly infinite scroll of categories of content to watch.

Scrolling beyond the fold, users are faced with an abundance of options.

We believed that our product could add value in this gap by providing users with a quick way to choose films based on how they feel at the time.

Collaboratively we designed the structure and content of the website

To move forward with the project we needed to agree on a structure so both sub-teams, frontend and backend, could start work on their respective areas. The research and survey results had revealed to us that decision fatigue was caused by users scrolling through endless options. Our solution to this was to create a structured path for the user to take which serves them with a film to watch.

Structure of content

We saw the organisation of information in the existing journey, that users were experiencing on streaming services, as the main contributor to decision fatigue. To improve the experience for users we looked for a different mental model to use as a basis for our product and decided on the interaction of filling out a form or taking a quiz.

The overall structure of the website, divided into three parts: choosing a mood, answering a few questions and finally receiving a suggestion.

Homepage content

Brainstorming different ideas of what a mood could be, we went very wide and then narrowed these down. We started with ideas challenging what a mood could be interpreted as. However, for the final product, we decided to use simple language that was easy to understand. Reminding ourselves of our users' needs, we chose a solution that would not put any additional cognitive load onto our users.

Translation of film genres into moods for the menu on the homepage.

Using shared language, what most people would consider/describe as a mood, people could use the product as quickly as possible. They don't have to spend time working out what a mood is, in the Moodvie context, to start using the product.

Key takeaway

Creating these frameworks enabled further design and development work to take place.

Utilising the structure and content we had co-created, my task was to build out the user journey and consider how users would interact with the content

Design goals for this phase

• An experience where users quickly receive a film suggestion
• Information is easy to understand and easy to find

Solution

Creating an experience that doesn't overwhelm and where results can be served quickly by focussing on making a few key choices, one at a time.

Iterating on the homepage menu to find a solution that would meet user needs as well as be compatible with the backend

To better demonstrate the interaction to my teammates, I coded the menu I had designed. However when it came to implementation, trade-offs had to be made. If we wanted to keep this interaction, due to how the backend of the site had been built, our mentor recommended we use React but no one in the team was familiar with it. Therefore we decided to prioritise the backend over UI and come up with a new solution for the menu.

See the Pen Mood options menu for Moodvie by LiaSherGill (@liashergill) on CodePen.

The first iteration of the homepage menu.

The second iteration of the homepage menu.

To solve the problem I created a simpler design, reducing the colour palette down to two colours and a more conventional hover state for the links.

Learnings

Feedback from users

The feedback from the judging panel included how joyful they found the experience of using the website. One member of the panel went through the journey several times to see what different outcomes would be. This was exactly the way I had intended users would feel when they interacted with the website.

Go to market plan

We received a finalists prize of a workshop with Goldman Sachs ‘Launch with GS’ mentors where we discussed a go-to-market plan. We looked at the current gap in the market and the various ways revenue could be generated.

Next steps

Learning and building on this version by testing it with users and using the feedback to improve on the next iteration. As well as testing with screen readers to ensure accessibility for all users.

Simplifying the process of choosing what to watch by reducing decision fatigue