youtube
Mobile App
Redesign-UX/UI
Overview
Project Summary
In modern society, Youtube is a ubiquitous and existing well-known video sharing app in mobile platforms. It has been massively used in people's daily lives and this individual project in the GA (General Assembly) design challenge aims to uncover the current users' pain points and propose solutions to remove them by rapid prototyping with an innovative, seamless user interface. My role was to research, design, and test all UIs related to the project.
Timeline
Tools
4th - 8th Feb 2019 (5 days)
-
Adobe Creative Suite
-
Sketch
-
Invision
My Role
● Project Planning ● User Research ● UX/UI Design ● Prototyping
Design Thinking Process
Discovery
User Interviews
Contextual Inquiry
Bodystorming
Define
Affinity Diagram
Problem Statement
"How might we?"Question
Ideate
Sketching
Wireframing
Prototype
UI Design
Interaction Design
Paper Prototype
Mobile Prototype
Test
Usability Testing
Discovery
User Research
At the discovery phase of my project, I conducted one-one user interviews in order to get the depth of information needed in understanding the motivations behind expressed behaviour.
Research Objectives
-
Understand the user motivations to use the app
-
Discover the pain points users experience while using the app
-
Understand user preferences for video watching
Methodology
-
In-person contextual inquiry interviews with working professionals and students
-
7 people, aged 25 – 42, Singapore residents
-
Regular YouTube user who opens the app more than once a day
-
Bodystorming
Research Finding I
Some of the recurring themes gleaned from the interview responses are:
-
I like to watch Youtube videos to reduce boredom on my MRT/bus ride.
-
I always search for short videos in order to avoid spending too much data.
-
I have to stop watching YouTube when I realize that I have almost exhausted my data plan.
-
I prefer Netflix because it allows me to download and watch offline without any data cost.
-
There are too many ads especially when I am listening to music.
-
I have to exit Youtube and the playing video would stop when I arrive at MRT station or bus stop after the ride.
Research Finding II
Through affinity mapping, I synthesized the interview responses to gain insights that would help define the problem(s) that need to be solved.
-
Users usually watch Youtube videos on the go.
-
Users want to spend less data on YouTube.
-
Users want to enjoy music, talk shows, and long videos without ads interruption or stopping abruptly.
Define
Problem Statement
Users need a way to watch YouTube without interruption and big data consumption on the go because they want to enjoy the full experience with ease of mind.
From the problem statement, stemmed the question that I needed to address in my design：
How might we deliver an exceptional user experience on the video-sharing app that consumes less data and also allows users to enjoy the content without interruption?
Ideate
Wireframing
From the question above, I saw a potential solution that could address user pain points such as frequent interruptions and big data consumption. At the beginning of my design process, I created low-fidelity wireframes using paper to iterate through design options quickly.
Annotations
A: The search button at the top was removed and replaced by a search bar in the middle. According to one survey, “75% of people rely on their thumb and 49% rely on a one-handed grip to get things done on their phones.” So considering this fact in mind, I placed the search function to the thumb-friendly area where it is easy for customers to navigate. One more observation is that a gradual increase in smartphone screen size will further make the top area less thumb-friendly on the screen.
B: A headset icon was placed together with other icons appearing when we tap on the video screen to pause or scrub through the video. This headset enables users to switch from video to audio mode where there is only audio file playing with a thumbnail. In audio mode state, the data cost would be significantly reduced in comparison to video mode. Besides, the file can be played in background without ads abrupt interruption.
Hi-Fidelity Prototype
Since it was a redesign challenge, I created a high-fidelity prototype by using Sketch and Invision for usability testing in order to make it easy to compare against the existing version. I also followed Material Design guidelines by Google because YouTube now operates as one of Google's subsidiaries which is consistent with their style guide.
Testing
Validating The Solutions
I carried out testing with 5 target users using the clickable prototype to gain their feedback on the usability, navigation, and features while they were trying to accomplish the assigned tasks.
Feedback
-
Users found the search bar hard to locate because they expected it to be at the top or bottom.
-
A small user guide/tip could be provided to inform the feature of switching between video and audio.
-
Users found the mode-switching useful because they could choose to play files in the background when needed.
Outcomes
-
The System Usability Scale (SUS) = 83 (above the average score of 68)
-
The Single Ease Question (SEQ) =5.6 (the average score)
2
Iterations
5
Target Users
83
SUS Score
5.6
SEQ Score
What have I learned from this project?
During the usability testing process, I was genuinely surprised to see how many users struggle to locate the search bar in the middle. This redesign on a whim was not as obvious of an affordance as I thought, because it blended in with other video thumbnails and users were already used to the convention that the search function is either at the top or bottom (law of locality). This taught me that I should not redesign with no prior user research and solely based on speculation.
While the whole project was a huge learning experience, I especially loved iterating on designs and testing those new designs on users. This tight feedback loop helped take the ambiguity out of my designs, and it felt good to produce designs with the confidence that users would enjoy and understand it.