Role
UX Researcher, UI/UX Designer
Deliverables
Wireframe, High Fidelity Prototype
Discipline
UX design, UI design, User Research
Platform
Mobile
Timeline
2 weeks
Tools
Figma, Miro
Overview
Viu is a Hong Kong-based over-the-top (OTT) video streaming service that largely focuses on Asian entertainment. Viu offers a wide range of content, including dramas, movies and TV shows sourced from various Asian countries, such as Korea, China, Thailand, Indonesia, Malaysia, and more, with local language subtitles.
In this hypothetical project, I challenged myself to revamp the user experience and redesigned the UI of the Viu mobile app in 2 weeks. I initiated this UX Case Study after receiving a three-month premium voucher for the Viu App to which I encountered a surprising user experience. Viu, being one of the top Asian streaming platforms, had a counfusing and underwhelming experience that, in my opinion, do not compare to top streaming players in the market.
Assessing the user journey
My experience as a first-time user led me to a detailed analysis that allowed me to analyse and record aspects that urged a redesign. Here's what I observed across the keys sections of the app:
When launching the app…
I was greeted by a page promoting the premium subscription, which interrupted my expectation of an onboarding or welcome prompt.
Login and registration
The home page lacked guidance on where to login or register an account. I eventually found the option hidden in the hamburger menu that is not very noticeable at first.
Search function
Opening the search function, I found a pre-filled drama title in the input bar. It's an extra step to delete the pre-filled title just to start a new search.
The search results displayed only plain text titles without posters or thumbnails, making it hard to identify the correct show.
Show details
After finding the show, the synopsis wasn’t immediately visible. I had to tap a small info icon to access basic show information, which could be easily missed.
Episode playback
Tapping on the show auto-played the most recent episode, which turned out to be the final one. The first episode was listed at the bottom, making it difficult to start the show from the beginning.
The Viu app has many concerns that were likely undermining the user experience. Through user research, these concerns were later validated and are outlined below.
Problem
Outdated UI
The app’s current visual design lacks the sleekness and the clarity of modern design that users have come to expect (in comparison to competitors in the same market such as Disney+ Hotstar and Netflix) that potentially lower it’s appeal.
Poor user journey
The Viu app’s user journey is hindered by buried features and inconsistent navigation. Users struggle to locate downloads and subscription details, resulting in frustration and a disrupted experience.
High cognitive load
Some tasks in the Viu app demand too much mental effort, with multi-step processes for basic actions like accessing downloads or managing subscriptions, leading to confusion and a poor experience.
Main Objectives
Align content behaviour with user expectations
Logical, predictable behaviour (like starting at episode one) reduces confusion, keeps users in control, and encourages longer sessions.
Improve discoverability of key actions
Users shouldn't have to hunt inside a hamburger menu to log in, and search results should display posters or thumbnails to help users quickly recognize the right content without leaving the app.
Transform the UI
Since the current UI felt old-fashioned upon launch, updating the visual style would immediately make the app feel more current, competitive, and credible to first-time users.
Empathise
To better understand user frustrations and validate the issues surfaced in the walkthrough, I revisited the key problems identified earlier:
Unclear registration and login CTA on launch
Lack of visual cues in search results
Hidden content details
Poor playback experience
Outdated UI
These issues served as a foundation for deeper analysis, where I determined if other users felt the same or differently than me.
Identifying pain points from user reviews
I sifted through around 80 Google Play reviews for Viu to gain a better understanding of complaints and suggestions made by real users. All sourced reviews below are from written by Malaysian users in the year 2024, and in English.
To note: reviews that mentions the app's management of ads were excluded to focus on the functionality and structure of the app’s UI in this case study.
The image below shows some of the common reviews made.
Through the analysis while referencing the pain points gathered from my personal experience, I filtered out and highlighted these main pain points as seen below:
An interview with a user
I was also able to conduct an informal interview with a friend who is a Viu user. They were asked open-ended questions revolving the key features mentioned above.
Here are some of the key findings from the interview:
Navigation Concerns
The user found the navigation drawer confusing, making Bookmarks and Downloads difficult to access.
Need for episode selection
“I wish there was a details page where I could choose which episode to play before watching an episode. ”
Trailers could improve content discovery
The user suggested that having trailers/previews tied to their respective shows could improve the content discovery experience, allowing users to make more informed choices before committing to an episode.
Evaluating competitors
I analysed two direct competitors of Viu: Rakuten Viki and Disney+ Hotstar to gain better insight on key functional features as seen below.
I decided to only include these key features as most of them not only appear on all three apps but were selected based on their direct influence on how users interact with streaming services on a daily basis.
Viu meets basic core functionalities but needs improvements to stand out from key competitors.
Navigation experience is a weak spot for Viu
Unlike its competitors, Viu lacks a dedicated navigation bar with everything hidden within its hamburger menu. Prioritising pages that users frequently need to access (e.g., home page, watchlist, profile) could bridge the usability gap.
Trailer Previews could be an engagement opportunity
Among the three apps, Disney+ Hostar offers trailer previews within the details page. This feature potentially influences viewing decisions. Adding this to Viu could enhance user engagement and give it an edge over Rakuten Viki.
Meet the user
After identifying user pain points and features that could be improved based on the reviews and the competitor analysis, I created a persona to better understand and empathize with users that interact Viu to help me uncover users’ goals, frustrations and motivations.
Define
User Story
After tackling the analysis of user reviews and the user interview phase, I generated a user story to be able to pin point who am I building this for, their intent and how does their immediate desire to do something this fit into their bigger picture?
As a university student who enjoys watching K-dramas, I want a seamless, frustration-free viewing experience so that I can easily find and watch episodes during my study breaks without distractions like confusing episode orders, auto-brightness issues, or difficult-to-read subtitles.
User Journey Map
This user journey map is based off the pain points discovered previously. This helped me visualise the process in which a user goes through to accomplish the goal of watching a “drama” in this case.
Ideate
How Might We
How might we simplify the process of finding and selecting the right episodes so Rachel can start watching her K-dramas more easily?
How might we streamline the browsing experience so Rachel can quickly discover new dramas without feeling overwhelmed by outdated or clunky navigation?
How might we enhance the episode viewing experience to ensure Rachel can enjoy her shows without confusion or disruptions, like auto-playing the wrong episode?
Sketches
I sketched out various solutions based six key screens or sections in the app. Here, I drew inspiration from the competitive research to identify areas for possible improvement.
Designs
User Flow
Mapping out user flows allows me to gain a clear understanding of the user's journey when interacting with the product. This helps me simplify processes, ensuring that users can achieve their goals more easily and efficiently.
Iterations
This was the biggest redesign project I took on at the time. While there were many aspects and issues of the website I had to overcome while meeting the agreed goals, I learned that breaking it down and taking things one step at a time can increase efficiency and clarity throughout the process of this project.
Results
Clear onboarding flow
Previously, users had difficulty finding login and registration options, as they were hidden inside a hamburger menu. The redesigned onboarding flow now greets users immediately upon launch with clear options to sign up, log in, or continue as a guest, removing unnecessary friction for first-time users.
A new home screen
The original home screen felt visually outdated and lacked prompts or focus areas to guide users, especially guests.
The redesigned home highlights promoted shows and key features in a clean layout, while guest users are subtly prompted to register or log in.
Enhanced search experience
The search function opened with a distracting pre-filled title, and search results only showed plain text, making it difficult for users to find shows easily.
The search screen now removes pre-filled text, introduces organised categories, and displays visual show posters in search results to users find content faster.
Improved Show Details and Playback
Key information like synopses and trailers were hidden behind icons, and episodes were listed in a confusing order. Playback options were also limited.
Now, show details (synopsis, trailers) are visible at a glance, with episodes reordered for intuitive navigation. New playback controls (speed, subtitles, quality) and an episode drawer provide greater flexibility.
Consistent Bookmarks and Profile Screens
Both screens have been redesigned to match the new visual style and maintain consistency across the app. The profile screen now features a more user-friendly design, with key functions organised into clearer, more logical categories.
Learnings
Cognitive Load Matters
Recognising how high cognitive load affects user experience was a key insight. Ensuring that the design is easy to understand and navigate will be a priority in future projects to help users interact with the product more effortlessly.
The Importance of Visual Design
Users often equate a modern, appealing visual design with credibility and functionality. This project highlighted the impact of aesthetics on user trust and engagement. Future projects will prioritise keeping abreast of current design trends and implementing them effectively.
Future
Usability Testing
Due to time constraints, usability testing was not conducted during this redesign phase. In future iterations, running user testing sessions would be essential to validate the effectiveness of the new onboarding, navigation, and content discovery flows, and to uncover any hidden usability issues early.
Better ad placements
The biggest problem Viu faces to date is its excessive ads, placements that are disruptive and frankly annoying. The reason why I excluded this issue from this case study is because it involves a different form of background research and implementation which I believe could be done as a separate case study in improving ad placements while streaming.
