VRV - Streaming Website
Design System, UX & UI Design, Responsive Web Design
UX researcher, Project manager, UX Designer (Myself)
Double Diamond & Design Thinking Process
Figma, Zeplin, Zoom
Seven weeks
VRV - Streaming website with anime channel subscriptions
VRV is an over-the-top streaming service launched in November 2016. Some of VRV's content can be streamed for free, while other content requires a subscription. The
subscriptions to its channels can be purchased individually, or in a premium bundle. VRV is currently available only in the United States, despite some of its partnered content being available for viewing worldwide outside the platform.
In 2020, I joined 6 other UX Designers, to redesign the current VRV platform to improve usability and discoverability of content as well as increasing and retaining the number of paid subscribers.
How might we increase the number of subscribed users by improving content discoverability and layout consistency without content overload?
User interviews: Qualitative research
16 people of different age group were interviewed to understand their behavioural pattern while using VRV vs. other platforms.
My research encompassed:
- How often they are using these streaming services?
- Their motivations behind using certain platform?
- What challenges did they face while completing certain tasks?
- How do they complete assigned task on VRV?
User insights:
- None of the users like to use mobile web due to inconsistent and irresponsive design.
- Almost every user preferred search bars to find shows due quick and easy access.
- Current catagorical structure in VRV didn’t seem to help any user in providing what they were looking for.
- Information architecture and navigation seem redundant in VRV as most users were stuck while completing the assigned task.
Surveys: Quantitative research
Only 2 out of 51 users, involved in quantitative research, were using and familiar with VRV. But more than half of the users were watching anime on regular basis using other streaming services.
Red routes - Prioritising user needs
We narrowed down our focus on solving the problems which were causing hindrance in fulfilling their primary needs. We categorized their needs accordingly based on how often and how many users they faced.
Competitive analysis to explore already available solutions
12 direct and indirect competitors were analyzed to understand how they were approaching their users needs and where they were lacking. This helped us narrowed down our focus to ideas that potentially seem more promising.
Feature comparison of VRV with 12 direct and indirect competitors.
Card sorting: Categorizing solutions from competitive analysis
Insights obtained from feature comparison were sorted out into categories to see potential ideas we could work on further and avoid the drawback in those designs.
User flows: improved and simplified ways to complete tasks
User flows were simplified and made intuitive for a smoother user experience. It also gave us a deeper understanding of the steps users will be going through and the problems they might encounter in the flow.
Brainstorming some low-fidelity solutions
After defining problems and getting perspective on how competitors are tackling those problem, we started sketching out some low fidelity solutions for web and mobile to get everyone’s opinion on so we can move forward with the best possible solution
Creating Uniformity Across the Team
I used atomic deign method to create a design system with my team. This helped us create style guides and pattern libraries to use across team to keep the design consisten across all screens and platforms.
Time to put research into visualization and test ideas
The high-fidelity prototype was created to test different scenarios for usability and accessibility of the design solution.
Applying Search Filter
Categories with horizontal scrolling were created for similar content to minimize scrolling. Advance filtering and search features were added to improve content discoverabiiity.
Saving and watching shows
Clear CTA’s were added for important functions. Episodes were displayed in clear hierarchy to help make a decision along with other important information.
Multiple subscription options
Users were provided with multiple subscription options for their favourite channels, all in one place, to make it easier for them to decide which plan is suitable for them.
Evaluating high-fidelity Prototype
The prototype was tested by 10 users in two phases, including with people having disabilities like color blindness, cognitive issues due to aging. Four scenarios were tested with them based on the user flows we improved.
96% success Rate!
What we learned?
Our solution turned out to be intuitive enough that even older people and people with some disabilities were able to complete the assigned tasks.
But of course, it wasn’t perfect.
Some challenges users faced:
- Some images & text appeared to be very small that it took users some time to comprehend it.
- Users needed clear indication/confirmation after they pay for subscription.
- Some options in Watchlist seemed confusing to the users.
- It took users some time to find watchlist on mobile.
- Some users wanted to read more before they purchase subscription.
In the second phase of testing, we improved these issues and tested again. This time users were able to complete tasks very quickly and efficiently
Some quotes from the users:
“Everything seemed to be where I would’ve anticipated it...didn’t even have to think about it.”
“Everything that needed to be above the fold was above the fold, didn’t need to do scrolling or anything”
“Feels exactly like it should”
1. Simplicity is strength
As a designer, we are often lured by attractive, trendy and out of the box designs. But, We must always remember the ‘why’. The primary goal is to understand the user, their problems and then come up with a design that solves it.
2. Prioritise
Create a strategic plan to launch an MVP. This helps deal with out-of-scope requests that could potentially derail the project and helps deliver a quality product in time.
3. Seek out feedback early and continually
The trouble with most of us is that we would rather be ruined by praise than saved by criticism. Keeping the stakeholders/users in loop and testing solutions in whatever form (paper, low-fi or hi-fi) as early as possible saves ample amount of time and re-work.