top of page
unext.png
Online Streaming Service

U-NEXT

U-next is the top VOD service in Japan across multiple platforms (iOS, Android, TV, Web). Its primary service is subscription-based streaming service which offers large selections of films, anime, books, and music.

 

 

Project Type / 

UI/UX Design

 

Year / 

2019~

My Responsibilities

Interaction Design

Wireframing

Prototyping

Usability Test

Visual Design

Platforms

iOS, Android, Web, Android TV

Check out U-NEXT Apps

appqr.png

Only available in Japan Store 

Check out U-NEXT Website

UX Challenges

Challenge#1- Redesign for better genre browsing experience

1.1 Introduction

Providing an easier way for users to reach their favorite genres was one of the UX problems we aimed to solve. There are 11 video genres including international films, Japanese films, Korean&Asian Dramas, etc. at the moment. Aside from the Home page, genre top pages are the main locations where users can browse curated content from different genres.

According to our research, we have fewer visits on the genre top page on mobile apps (iOS&Android) compare to our browser experience, also some users claimed they rarely visit the genre top pages during user interviews.  Therefore allow users to visit genre tops more often on mobile devices with a friendlier design became the challenge.

mobile_genre.png

1.2 Define Problem

Video Genres UI on Web

The list view of video genres on the web is easier for user to recognize and make a selection therefore genre top page results on more visits compare to mobile apps.

unextweb.png

​Old Video Genre UI on mobile

The previous UI design hides genre lists in the top left corner hamburger menu, which might add difficulty for user to reach and browse.

mobile_oldgenre.png

1.3 Hypothesis

statement.png

Ideation based on the hypothesis

Removing hamburger menu

-> Adding tab bar

After researching how people interact with their phones, we the product design team found out 75% of the people use just thumb to interact with the screen and the top part of the screen isn't touch-friendly. Since we want to encourage people to explore the video genres, we agreed on the main direction for improvement is to add a bottom tab bar which most of the apps on the market already have, it will be easy for users to accept the change since they are already familiar with it.

After brainstomring ideas and having meetings with stakeholders, we narrowed down to three ideas:

A. Genre Chips on Home Page 

B.  Horizontal swip tabs (Genre Tab)

C. Genre Drawer (Genre Tab)

Interaction.jpg
genre-ideation_edited.jpg
wire1.png

A. Genre Chips on Home Tab 

Strengths

  • Easy to be found on the home page

  • Expose all genres at once (by scrolling)

Weakness

  • Extra tap to go back to home page

  • Difficult to switch between genres compare to other soltions

  • Book genres are at the end of the list so need extra scroll to be found

B. Genre Tabs 

Strengths

  • Easy to switch between genres 

  • Expose all genres at once (by scrolling)

Weakness

  • May be difficult to realize 

  • Book genres are at the end of the list so need extra scroll to be found

  • May misswipe since the video thumbnails are horizontal swipe too 

wire2.png
wire3.png

C. Genre Drawer

Strengths

  • Easy to reach with thumb

  • Expose all genres at once by showing a list

Weakness

  • Require an extra step to switch to other genre

  • May be unfamiliar to some users

1.4 Prototyping

To test out which one is the best solution we prepare hi-fedelity prototypes for user testing. 

Tools used: Figma, Protopie, Flinto

A-proto-ss.gif

A

B-proto-ss.gif

B

C-proto-ss.gif

C

1.5 Testing

Method

Guerrilla User Testing + Usability Assessment Questionaires + Interviews

User Test Clip

Process

Introduction + Collect basic information

Introduce about Unext and user test also collect participant's basic information (age, sex, familiar with the streaming service or not, etc.)

Tasks

Ask about the participant's favorite genre and kindly ask them to find the genre top page Ask the participant to switch to Manga genre top page

Ask the participant to go back to home page

finish the tasks with 3 prototypes (random order)

 Usability Survey 

Ask the participant to finish the survey based on the three prototypes they just tested. The survey is a standard SUS survey that has scores range from 1~7 for each question, 1 stands for strongly disagree, 7 stands for strongly agree. For each of the prototype, listed questions :

I think I'm satisfied with the ease of completing the tasks

I think the genre-selection design is easy to understand 

I think it's was fast for me to finish the task

 Interview about their opinions about the prototypes

1.6 Results

Summarize Test Results

By summarizing the final scores of each prototype and participants' opinions, the final result: C>B>A

usertestexample.png

Snippet of test document

Narrow down and explore 

After narrow down with C direction, we also explored lots of visual design options for better results. Finally we settle on the final design went release.

Final Design & Future possibilities

We successfully released the new version of the mobile app with the new genre function and a few other UX improvements. Of course it might not be the best solution, we will observe the metric for a while and always improve in the future.

final-video.gif

Current verison of genre tab

final_detail.png

To be continued...

bottom of page