Overview
Maximizing business values through design
YouTube has established itself as the leading online-video sharing platform for its reputable availability and authenticity. Over the past 15 years, its generated $15.15 billion USD in revenue and solidified its global trademark. Despite success, users continue to experience reoccurring pain points.
Problem: Users are bombarded with irrelevant content which leads to cognitive overload. This stems from over-subscription which may include inactive/older channels users no longer keep up with.
We followed the Double Diamond process from the beginning to the "end" of our project to create a roadmap to follow which helped us to break down each stage. This allowed us to meet deadlines, identify and contextualize actual problems, and stay on sync as a team.
Final Screens: Subscriptions Management
Table of Contents
- Overview
- Discover
- Pre-Research
- Metrics That Matter
- UX Research: Key Findings
- Analysis & Synthesis
- Personas: User Trends and Direct Quotes
- Hypothesis: Users ≡ Business
- Define
- Strategic Ideation
- Information Architecture + Sitemap
- Critical User Journey
- Design
- Wireframes
- Deliver
- Playing LEGO with A/B Tests
- Usability Tests Breakdowns
- User Feedback Results
- Data-Driven Navigation
- Low-Fidelity Wireframe
- Final Prototype
- Outcomes
- Usability Test → Solution Design
- Iterating the "Final Solution"
- Key Lessons Learned
- Other Opportunities We Would've Explored
Timeline + Role
Product
Role
Timeline
Discover
Pre-Research
To frame any problems with the product, we began by collecting assumptions and observations about the YouTube subscriptions management experience.
Assumptions & Observations
When entering YouTube, users are bombarded with content which causes stress due to content overload from old subscriptions.
When organizing subscriptions, users are required to go through unnecessary steps which causes irritation.
When navigating through YouTube, users use the navigation bar to switch between pages that are identical. This causes confusion and discourages users to surf the app.
Metrics That Matter
Before anything else, I looked into the business of YouTube to further understand what metrics they use to measure their success. It really helped shape where our focus should be and how to solve the problem with the goal of increasing the business in mind.
UX Research: Key Findings
To confirm our assumptions, we created a survey with relevant questions to recognize trends and form a hypothesis. After synthesizing our data, we realized that there are clear patterns and specific pain points users experience due to two solid factors:
Root of Frustrations
HMW Solve the Right Problem?
Our research allowed us to form how might we questions that we worked towards answering to solve our ultimate user problems.
These questions were formed after analyzing our survey results to magnify what specific angles we need to focus on to aid the friction points of the current YouTube experience.
Analysis & Synthesis
To confirm our observations and begin forming a hypothesis backed by data, we created a user survey to form no frill personas and understand the problem space more from real users perspective.
Personas: User Trends and Direct Quotes
After discovering patterns, we identified the personas who experience similar frustrations. They are divided by their usage patterns to focus on their separate goals and blockers.
Hypothesis: Users ≡ Business
Having prioritized ideas based on what can be improved, we wrote a hypothesis that frames the problem for user and business goals.
Users goal Business goal
By reiterating the YouTube subscription management experience with a focus on enhancing usability and findability, we can decrease user frustration and maximize user investment, viewership, engagement, and retention.
Define
Strategic Ideation
At this stage, my team and I conducted a series of ideation techniques including Brainstorming and Brainwriting. This allowed us to consider an array of solutions. Following ideation, we mapped what could be improved. To get an idea of where to place our focus first, we prioritized them based on user value, business value, effort and time.
| Name | User Value | Biz Value | Effort | Time |
|---|---|---|---|---|
High | Medium | Low | Medium | |
High | Medium | Medium | High | |
High | Medium | High | High | |
High | Low | Low | Low | |
Medium | Low | Low | Low |
Information Architecture + Sitemap
With a hypothesis defined, I laid out the information architecture of the current YouTube mobile app flow to help me easily plot the optimal user flow and path for a user to complete the task.
Critical User Journey
With the sitemap and IA defined, I created an optimal user flow. This allowed me to quickly and easily understand decisions users would need to make to complete their main goal.
Questions
Design
Wireframes
Following the creation of my hypothesis I rapidly sketched solutions in lo fidelity. This helped me quickly map and understand the current product and consider options for how I could iterate directly in the product.
Deliver
Playing LEGO with A/B Tests
Following our user flow, each member of our team created a design solution. At this stage we went through deconstruction, various iterations, and conducted an A/A test and A/B test.
Usability Tests Breakdowns
During our usability tests, we conducted A/A and A/B tests to validate our solutions and gather data that ultimately guided our decisions.
User Feedback Results
Before creating lo-fi wireframes, we created a Maze test for users to test our prototype to gain insight of where our weak points were.
The user feedback we received were mostly negative, which in my opinion, is a great thing. This data informed us of where the specific frustrations lie and gained suggestions of what we could do to improve the overall user experience.
Data-Driven Navigation
Despite validating that multiple selection would be of use to users— we came to the realization that it doesn't solve the problem of reducing cognitive overload.
It might just add to it as users would require scrolling and individually selecting channels they want to remove. This would be an issue for people who are subscribed to more then 100 channels.
This is a concept that we would have explored if we had the time and resources.
Low-Fidelity Wireframe
After identifying the weak points, we designed a lo-fidelity wireframe of the experience directly in Figma. A Neutral colour palette was used to avoid any decision bias and would use this prototype to get feedback internally. We used the tool Autoflow in Figma to easily map the user flow between each page ahead of converting the pages into a prototype.
Key Iterations
- Changed the copy from "Channel List" to "Manage Subscriptions"
- Centred page heading to separate the relationship between the back icon and the page
- Redefined filters by adding an icon that collapses options to save space and present an animation that delivers a feeling of satisfaction
- Edited copy to be more aligned with the function of the page
Final Prototype
The low-fidelity prototype helped me recognize frustrations with the experience that we improved at the high-fidelity stage. To create the final prototype, we inspected the products style and followed the 8pt rule to effectively and easily create a prototype that was consistent with the product styling.
Styles & Components
Before creating the final prototype, we defined styles and components to easily and quickly help us design consistently as a team. Below are the components that we created. Throughout the building of our final prototype, we found that we consistently had to make minor iterations to the master file to fit everything as a whole. Just one big puzzle.
Outcomes
Usability Test → Solution Design
Main Frustration: Users can't find inactive channels
Overall our usability test results showed that the iterations we made generated a higher success rate. However the user feedback assured us that the main frustration was the inability to find the inactive channels via filters.
Additional Key Findings
1. Time spent completing tasks: 7.4 secs
2. Daily discovery task competition: 63.2 % average success
3. Time spent navigating: 6.7 secs
Below, I present the miss-clicks via heat-map and user feedback on the right.
Iterating the "Final Solution"
To ensure that we fixed the right problem, we dived into the user feedback.
The minimal iterations that were made to further push towards efficiency were:
- Separated active and inactive channels by tabs for visibility.
- This reduced one step (clicking filters → selecting "inactive")
We ultimately increased transparency of the inactive and active channels as well as removed a step further creating an effortless user experience.
User Flow: Before and After Iterations
Key Lessons Learned
This was the first case study I have ever worked on with a team from start to finish. Throughout my journey I encountered roadblocks and dilemmas. From disagreements with team members to time management, I've taken away lessons I didn't think I would've learned if you had asked me before we began.
1. Putting Feelings Aside (It's not personal)
The most valuable lesson I learned during this project was the importance of putting personal feelings aside. One of my favourite parts of product design is working towards solutions to solve other people's problems. We must separate ourselves from our designs because at the end of the day, it's not for us. We're working towards a greater goal.
2. Copy is an incredibily powerful Tool
Visual communication and copy go hand-in-hand. Copy speaks and navigates users—without clarity, users will get confused and leave. Some texts might also be reduced if you use the right term as well as frame context specifically/correctly.
3. Time Management: Think Fast, Think Critically
Time restrictions have influence on the extent of our decisions and many other aspects of our responsibilities. I personally believe every decision, from work to everyday life, needs to have intention and direction. When discussing how we should go about tackling this roadblock, we went through each point to prioritize them by using the Impact vs Effort Matrix.
Other Opportunities We Would've Explored
| Name | User Value | Biz Value | Effort | Time |
|---|---|---|---|---|
High | High | Medium | Medium | |
High | High | High | High | |
High | Low | Medium | Medium | |
Medium | Low | High | High | |