zoey xie
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
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.
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.
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.
1.3 Hypothesis
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)
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
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
B
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
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.
Current verison of genre tab
