My Role
Responsible for the research, user flow, wireframes, and high-fidelity prototype. The team shared the responsibility of the frontend.
Project Overview and Context
In previous surveys and user interviews, users claimed that they had seen everything or that the service did not have enough content. Data also shows that most users only see a small portion of the catalogue or miss relevant content.
The Team
Thays Santos - UX Designer and Researcher
Eduardo Ronqui - Backend Engineer
This illustration displays the extent to which users scroll in order to view content.
Objectives
To design a solution that can make people watch more content, feel that they can find the content they want and potentially reduce churn.
Research
During the research, users' insights show that it is hard to choose from a lot of content - a situation known as analysis paralysis. Many states that recommendations help them to select content to watch specifically from people they know.
Benchmark
After many users mentioned the Shared Playlist feature from Spotify, I combined the concept with Viaplay features My List and Continue Watching, two lists entirely personalised by users. Both lists are already familiar to the users as a way to customise their experience, so using the same idea can ease the use and adhesion to the new feature.
Wireframes
The wireframes showcasing the functionalities created during the process are presented below. The first three wireframes illustrate the method of searching for people using "@" instead of titles. "@", a commonly used symbol in social media, was selected for its user-friendly nature.
To view a profile picture, check the right screen. To see what others have shared, access the shared list, which we call "highlights" after testing it during hack days. The product already had the last three screens, but we added options to title highlighted items and view them in the user's library.
User Flow for Followers
This user guide provides clear steps for adding a follower while ensuring user privacy is prioritized. Users have the option to share their list exclusively with authorized individuals. To begin, navigate to the Start Page and select the Search screen to find people to follow. On the Social Screen, continue your search or manage your current list of followers. In the following area, take action to follow or unfollow other users. Within the followers area, you can request to follow someone, unfollow, or view pending follow requests.
High fidelity prototype
Here is a detailed prototype showing the various screens of the product. The first screen is the product page, featuring a secondary button that allows users to add the title to a shared list called "Highlights", as named by those who have tested it.
The next two screens showcase the Search feature once it has been triggered. The first Search screen appears when the user initiates the search with "@" and filters the results to show only people. The second search screen displays a regular search, with titles as the main results and people on the right side of the screen.
The first screen at the bottom displays the Highlights list in the user's library, which is an existing area of the product. The second one at the bottom shows a profile picture with the option to follow the person and a preview of the highlights. For privacy purposes, we decided not to display the full list before the user starts following.
The last screen features the current profile picture with a unique username, enabling users to be found through the search function.
Testing
During the hack week, the idea was tested among other participants. The flows and high-fidelity screens were validated with other designers during design critique sessions. Later, the idea was presented to the company along with other participants. A video prototype was shown, and questions were answered regarding the idea's stage of development and ease of integration into the product.
Tools
During the project, we used Figma and Figjam to create flows, wireframes, and prototypes. For coding, we chose Visual Studio Code and utilized the Ruby language since it was the best option for our web solution.
