Showcase
UX Mentorship Exercise: Viu Redesign
Jan 2022
Mesai Memoria
UI Design
UX Design
Figma
Role
UI/UX Designer
Timeline
2 months
Summary
I enrolled in a mentorship program last February 2021 which was sponsored to me by AcadArena, where I work as a Product Designer. I was given the task of redesigning a website as an exercise. I chose Viu, a streaming platform that contains TV shows and movies.
Viu is a localized, legal digital platform providing online video content in the Asia-Pacific region. Simulcast drama and variety series are available as fast as 8 hours after its original telecast for Viu Premium members.

Finding the Problem

The first step I did was a heuristic evaluation to analyze Viu’s interface design. I analyzed each page of the website and identified problems.

One thing that can also guide me is to compare Viu with similar platforms through a competitive analysis. Other streaming platforms would be Netflix, iFlix, Viki, and WeTV. There are different streaming options that Viu doesn’t have that already exist in most streaming platforms.

Having the heuristic evaluation and competitive analysis, I identified these key problems:

  • Crowded home page sections
  • Incomplete series or movie information
  • Excessive category options on the navigation bar
  • Outdated and insufficient streaming options
  • Weak design choices

I organized all the sticky notes from my heuristic evaluation into an affinity map under each category (which are the key problems). This will help me see more clearly which category has the most complications.

Research‍

I interviewed one user of Viu where she has used the platform in premium for 6 years. There are two scenarios: One, when Jiah uses Viu to directly stream a series or a movie that she already has in mind. Second, when Jiah scrolls through the homepage to find a certain series or film. There are many ups and downs in her journey which you can see in the journey map below.


Her pain points include:

  • Distracting advertisements displaying on the pages even when she is on premium
  • Insufficient streaming options
  • Not enough series or movie information when the thumbnail is hovered
  • Taking a lot of time to decide on what series or movie to watch

Goals‍

After clearly seeing where the issues are, my goals in redesigning Viu are:

  • Reduce the time it takes for the user to choose a series or movie to watch. Narrow down the number of choices. This applies on each section or playlist on the homepage and on the different categories displayed on the navbar. Make the user not suffer from choice paralysis.
  • More streaming options when watching. Add more features on the video streaming section that already exist in different streaming platforms today.
  • Give the user enough information to choose the series or movie. Give complete and relevant information about the series or movie. Display relevant information when hovering on a series or movie thumbnail.
  • Make better design choices. Position advertisements in a better way that doesn’t distract the user. Make the design look modern and more updated to the trend today.

Wireframe

I brainstormed on the layout of the homepage first. Seeing the current layout that they have, their navbar currently has 19 categories in one single menu, which is a lot. So I decided to narrow it down by categorizing all of them in a more general way.

I then moved on to narrow down the number of series or movie choices in one single playlist or section. In which, I decided to make it from 9 into 4. This can help users decide more quickly on what to watch. The lesser the choices, the faster they can decide and it’s more engaging.

When hovering a series or movie thumbnail, I added the brief summary. This can help the user know directly what it is about before even clicking it.

When clicked, I also added the relevant and complete information in the series or movie’s info section.

And instead of advertisements being placed everywhere on the pages, I decided to make it much more engaging to read which is to just display the perks of subscribing to Viu premium.

Lastly, I added enough streaming options in the video player that exist in most streaming platforms today. These include, a preview image when hovering the progress bar, skip forward and backward options, next episode option, captions option which includes both audio options and subtitle options and settings that includes both resolution options and playback speed options.

Mockups

Here I applied Viu’s color theme which is black and yellow and added styles that are modern, much more clean and friendlier to the eyes.

Viu is a localized, legal digital platform providing online video content in the Asia-Pacific region. Simulcast drama and variety series are available as fast as 8 hours after its original telecast for Viu Premium members.

Finding the Problem

The first step I did was a heuristic evaluation to analyze Viu’s interface design. I analyzed each page of the website and identified problems.

One thing that can also guide me is to compare Viu with similar platforms through a competitive analysis. Other streaming platforms would be Netflix, iFlix, Viki, and WeTV. There are different streaming options that Viu doesn’t have that already exist in most streaming platforms.

Having the heuristic evaluation and competitive analysis, I identified these key problems:

  • Crowded home page sections
  • Incomplete series or movie information
  • Excessive category options on the navigation bar
  • Outdated and insufficient streaming options
  • Weak design choices

I organized all the sticky notes from my heuristic evaluation into an affinity map under each category (which are the key problems). This will help me see more clearly which category has the most complications.

Research‍

I interviewed one user of Viu where she has used the platform in premium for 6 years. There are two scenarios: One, when Jiah uses Viu to directly stream a series or a movie that she already has in mind. Second, when Jiah scrolls through the homepage to find a certain series or film. There are many ups and downs in her journey which you can see in the journey map below.


Her pain points include:

  • Distracting advertisements displaying on the pages even when she is on premium
  • Insufficient streaming options
  • Not enough series or movie information when the thumbnail is hovered
  • Taking a lot of time to decide on what series or movie to watch

Goals‍

After clearly seeing where the issues are, my goals in redesigning Viu are:

  • Reduce the time it takes for the user to choose a series or movie to watch. Narrow down the number of choices. This applies on each section or playlist on the homepage and on the different categories displayed on the navbar. Make the user not suffer from choice paralysis.
  • More streaming options when watching. Add more features on the video streaming section that already exist in different streaming platforms today.
  • Give the user enough information to choose the series or movie. Give complete and relevant information about the series or movie. Display relevant information when hovering on a series or movie thumbnail.
  • Make better design choices. Position advertisements in a better way that doesn’t distract the user. Make the design look modern and more updated to the trend today.

Wireframe

I brainstormed on the layout of the homepage first. Seeing the current layout that they have, their navbar currently has 19 categories in one single menu, which is a lot. So I decided to narrow it down by categorizing all of them in a more general way.

I then moved on to narrow down the number of series or movie choices in one single playlist or section. In which, I decided to make it from 9 into 4. This can help users decide more quickly on what to watch. The lesser the choices, the faster they can decide and it’s more engaging.

When hovering a series or movie thumbnail, I added the brief summary. This can help the user know directly what it is about before even clicking it.

When clicked, I also added the relevant and complete information in the series or movie’s info section.

And instead of advertisements being placed everywhere on the pages, I decided to make it much more engaging to read which is to just display the perks of subscribing to Viu premium.

Lastly, I added enough streaming options in the video player that exist in most streaming platforms today. These include, a preview image when hovering the progress bar, skip forward and backward options, next episode option, captions option which includes both audio options and subtitle options and settings that includes both resolution options and playback speed options.

Mockups

Here I applied Viu’s color theme which is black and yellow and added styles that are modern, much more clean and friendlier to the eyes.