Project Overview
Summary
Our team of 5 UX and UI designers had 3 weeks to enhance the user experience and value proposition of an existing video streaming platform on desktop. We chose to focus on adding personalization as well as a social component to Amazon Prime Video (Prime Video). To accomplish these goals, we conducted user research, a heuristics evaluation, and usability testing. As a result, we redesigned Prime Video’s IA and UI, and designed novel social integrations.
My Deliverables
-
Craft a proto-persona and a user scenario for our user persona.
-
Develop a user research plan, perform one interview, and analyze data collected.
-
Conduct a heuristics evaluation on Channels and Store pages.
-
Complete a competitive analysis for one direct competitor.
-
Determine the problem to be solved with a How Might We statement.
-
Redesign the Search user flow.
-
Design atomic components, develop a reusable UI components library, and compile our style tile.
-
Ideate and prioritize design solutions, create sketches, wireframes, and a hi-fi prototype.
-
Develop a usability testing plan, perform one usability test, and implement user feedback.
The Solution
Team
Deepa Bharadwaj, Hattie Chau, Lydia Huang, Sonja Chew, and I worked 100% remotely on this project.
Illustration by Sonja Chew
Methodology
Proto-Persona
We started this project with an assumption, which we compiled in our proto-persona: in times of social isolation and beyond, Prime Video users lack personalization and integrated tools to socialize and connect with others through this platform.
Main findings:
Research
User research
To test our assumption, we performed 5 interviews with a demographic of active Prime Video users aged 22–38 and posted an Instagram poll. Our team found the need to focus on solving major IA and UI issues as well as address interest in the integration of a social component.
1.
Prime Video’s poor and cramped UI prevents users from using the platform more often.
2.
Users value ratings and friend’s recommendations when deciding what to watch.
3.
Features like profiles, continue watching, and recommendations based on watching history are valued by users.
4.
Existing browse and search features lead to irrelevant results and cause user frustration.
5.
Users distrust the e-commerce approach of this platform and feel disappointed about the lack of clarity regarding free vs. paid content.
6.
Most users show excitement and willingness to try integrated social components such as Watch Party.
Heuristics evaluation
We conducted a page-by-page analysis of Prime Video’s UI to identify specific usability issues. We focused on the main pages that users would use most frequently including homepage, show/movie detail page, search, and store. In addition, we analyzed the Watch Party page which was a major desirable component according to user interviews.
Main findings:
1.
The Prime Video site lives within the larger Amazon Prime marketplace, which results in several usability issues:
-
Display of irrelevant or rarely needed information.
-
Unpleasant and cluttered page layouts with insufficient use of white space.
-
Unreliable ratings that include marketplace reviews not related to content quality (i.e. 1-star review for a delayed DVD delivery).
-
Help and documentation offered is often irrelevant.
2.
Accelerators aimed to offer users flexibility and efficiency of use are not existent or not optimized for a video streaming service:
-
Lack of dedicated Prime Video search.
-
Lack of profiles to see personalized content on multi-member accounts.
3.
Prime Video is error-prone when users are trying to find free content only.
4.
Lack of consistency in the terminology used on cards and navigation (i.e. Add to Watchlist is found on My Stuff on navigation).
Data Analysis
User insights
When I use Prime Video, I feel I’m logged in with an account that isn’t mine. I feel overwhelmed and don’t know where to start.
Empathy map
This tool helped us see how the research findings translated into the way a person behaves, makes decisions, feels, and thinks.
I like to watch the shows and movies that all of my friends are watching. I trust my friends' recommendations more than an algorithm. Plus I like knowing what everyone is talking about.
Creation of Persona
With a better understanding of the behavioral and cognitive processes of potential users, we created a persona, which was the focus of our competitive analysis and the guiding force of ideation and prototyping.
To further determine the scope of the problem, we created a user scenario that added specific constraints to the persona’s situation and goals. This scenario was part of a larger customer journey map that identified feelings, pain points, and opportunities.
We also put together a storyboard to showcase our value proposition.
How Might We Definition
How might we help users feel familiar with Prime Video as well as delighted to use the platform so Prime Video becomes their default video streaming platform?
Competitive Analysis
To ideate solutions that would help the user achieve her goals, we performed a competitive analysis to figure out if/how other products were addressing the user needs. We evaluated 3 direct competitors (Hulu, Netflix and Disney+) and 1 indirect competitor (YouTube).
Competitors’ strengths
-
Welcoming homepage with personalized suggestions and profiles.
-
Carousels with visual rhythm.
-
Additional content information available via modals or expanded panels rather than a separate page.
-
Progress bars for live content.
-
Objective content recommendations based on users' watch history.
-
Display of trending searches and popular content.
-
Use of alphabetical order to categorize genres.
Competitors’ weaknesses
-
By default, the sound is turned on when trailers autoplay.
-
Need to pay extra to avoid advertisement.
-
Lack of progress indicator on horizontal carousel scrolling.
-
Lack of connectivity to social accounts (except YouTube).
-
Not all of them offer access to content that is not included with membership.
Decisions made:
Information Architecture
Since one of the site’s main usability issues was the display of irrelevant information, we decided to conduct a card sorting exercise to redefine the site’s information architecture.
1.
Separate Prime Video from the Amazon Prime marketplace keeping a single relevant navigation and utility navigation.
2.
Revise and alphabetically organize Explore categories.
3.
Add a Prime Toggle to give users control over free vs. paid content.
Design Ideation
"I like, I wish, what if" method and prioritization
We used the "I like, I wish, What if" method to ideate, followed by a prioritization matrix to identify what ideas could potentially become features based on impact to users and priority to the company.
Redesign goals
Based on those activities, our team defined these project redesign goals:
1.
Detach Prime Video from broad Amazon Prime Marketplace for a clean and consistent UI and streamlined user experience.
2.
Allow integration of social accounts to Prime Video and improve the Watch Party experience to help users connect with each other.
3.
Add personalization with profiles, relevant suggested content, and suggested content from social media contacts.
4.
Give users an easy mechanism to distinguish free from paid content (store and subscription channels).
5.
Create a dedicated Prime video searching feature that integrates with the store to guarantee that users find what they need.
6.
Replace Amazon marketplace movie ratings with Imdb rating to which Amazon has the rights to.
User flow diagrams
Given our ambitious goals, we created several users flows to visualize the following processes:
-
Login and connect to social accounts
-
Browse content on homepage
-
Search content
-
Explore the Store
-
Create and start a Watch Party
Sketches and Lo-Fi Wireframes
I sketched a homepage to ideate this page's information architecture and rhythm. Likewise, this sketch served to conceive iconography and interactions.
Our team created low fidelity wireframes to facilitate collaboration, feedback, and design decisions.
Our focus:
1.
Create layout consistency across pages with a similar purpose.
2.
Figure out what information to display on the show/movie cards.
3.
Redesigning the grid by introducing vertical elements and full span hero images to break up the monotonous grid arrangement.
Style tile
As a team, we defined our UI redesign adjectives and visual style, which we consolidated on a style tile.
Hi-Fi Wireframes
Side-by-side comparison:
UI Component Library
I built our team’s UI component library on Figma, which secured uniformity, facilitated page assembly, and allowed us to make changes across the entire file with ease.
My approach:
1.
Create atom elements:
-
Define text and color Figma styles.
-
Select and convert icons into components.
2.
Create simple to more complex nested components.
3.
Consistently name components to exchange instances on the property panel efficiently.
User tasks:
-
Log in and connect to Facebook.
-
Browse the homepage and use Prime toggle.
-
Search for a specific movie.
-
Create a Watch Party and chat with friends.
Usability Testing and Iteration
Usability testing: Round 1
With the goal to test our existent flows and visual design, we conducted 5 usability tests.
What worked well
-
Intuitive navigation structure.
-
Introduction of profiles and recommendations based on Facebook friends' watch history.
-
Watch Party feature.
-
Nonmonotonic page layouts with a limited number of carousels.
-
Giving users control over content with Prime toggle.
-
Provide users with visibility of system status (i.e. visual progress cues on cards and carousels)
What needs improvement
-
Bewildering social account connection screens.
-
Confusing search flow step.
-
Hard to use the vertical menu on cards.
-
Hard to discover the search field across pages.
-
Once the Watch Party starts, users lack a way to see participants.
Iteration
Based on users' feedback, we iterated on our card design, social connection screens, Watch Party features, homepage layout, and search flow.
Usability testing: Round 2
We performed a second round of usability testing to further refine our hi-fi prototype and check if we addressed issues brought up on our first round. We asked 4 new users to complete the same tasks from our first usability test.
Smell
Remaining issues
-
Users were still confused about the social account screens; however, after looking at the homepage they understood what it meant to connect Prime Video to social accounts.
-
Confusing host controls tab design for Watch Party.
-
Hard to see where expanded cards end and background begins.
High Fidelity Prototype
We fixed the minor UI and visual design issues discovered through usability testing and spent most of our time ideating a better way to convey the value of integrating Prime Video with social accounts since this was such a critical piece of our value proposition.
Next Steps & KPI's
Next Steps
-
Test revised hi-fi prototype to:
-
Get feedback on the social account connection screen.
-
Look closely at search and store filters to identify opportunities to optimize these accelerators.
-
-
Explore the integration of filters directly on the homepage to further personalize users’ experience and suggest content based specific needs (i.e. language, subtitles, content duration, and rating/advisory).
-
Continue to explore ways to leverage Prime Video’s integration to social accounts while protecting users privacy and giving them total control over what they share and whom they share it with.
Key Performance Indicators
-
Extended time spent/increased number of videos watched per user.
-
Augmented customer base.
-
Reduced time spent in selecting what to watch due to better and more personalized suggestions.
-
Higher connection to social accounts and increased positive social interactions between users.
-
The generalized increased sentiment of Prime Video as a leading streaming platform.
-
The surge in the use of the Watch Party feature.
