Project Summary
Online learning has grown to be very popular, and a Pew Research Center study found that 51% of people use YouTube to learn new things. YouTube would like to expand its business, retain users, and reach new users by adding a learning community.
In this project, I conducted research and created the flows and screens for YouTube’s new learning feature called YouTube Education. According to Statista, 63% of users use YouTube on a mobile device, so this design was for the app.
Problem: Most online learning communities have a price tag that makes them inaccessible to many people, and it can be difficult to learn linearly on YouTube with videos showing up in random orders.
Solution: With YouTube Education, users can access courses for free through their YouTube account, and the courses are created in order, so it's always clear which lesson is next.
Timeframe:
• Research: 2.5 weeks
• Define: 1 week
• Design: 1.5 weeks
• Prototype & Test: 2 weeks
Roles:
• UX Researcher
• UX/UI Designer
Tools:
• Figma
• FigJam
• Optimal Workshop
• Useberry
• Maze
Key Solutions
Course cards information | Course progress | Optional quizzes
Looking for an overview of the key solutions and final wireframes? Look no further! Click through to see the wireframes and brief explanation of the solutions.
Wondering how I arrived at these solutions? Continue reading!
Research
Competitor Analysis | Survey | User Interviews | User Persona | Storyboard
Competitor Analysis
I started by conducting a competitor analysis on other learning communities to determine our top competitors, their strengths and weaknesses, and what features they offer. I used the information discovered here to think about how YouTube Education can stand out, and I made note of the features that the competitors offer so I could bring them up during user interviews and understand the users' level of interest in those features.
The features that are standard on other learning communities include a course progress tracker, difficulty level, course duration, live classes, course preview, and the ability to take notes during a class. The features that would set YouTube Education apart include activity streaks, rewards, and the ability to favorite or save classes.
Survey
A survey was conducted with 11 participants to get baseline information about people’s experiences and motivations for online learning. In the survey, 81% of users said they would be interested in a YouTube Education feature.
Survey participants identified the three most important features to have and their top motivators for learning:
User Interviews
I conducted 4 user interviews to gain a deeper understanding of what users want from a learning feature and why they would be motivated to use this feature. I discovered that most users would use YouTube Education for learning hobbies rather than for professional development.
I also conducted an additional survey to discover what information a user would want on the course card. This research showed me that 93.8% of users want to view a time commitment, 68.8% want to see the difficulty level and number of lessons, and 62.5% want to see the course rating.
User Persona
Using the goals and motivations discovered during user interviews, I created a user persona to represent the trends I found from my research.
Jasmine needs a learning app that can provide high-quality learning material to teach her the basics of gardening. She wants to be able to communicate with the course instructor, and she's motivated when she can set learning goals that she can stick to. Her biggest pain points are that she doesn’t have any experience gardening and doesn’t know where to start with learning, and she finds other learning communities to be gimmicky and distracting.
Storyboard
With my user persona in mind, I created a storyboard to determine the key moments of her journey and empathize with her. Jasmine really wants to learn to garden as a hobby, but as a beginner, she has no idea where to start. When she’s recommended YouTube Education by her friend, she discovers that it has very useful information and is well-organized. The app is easy to use and she quickly finds a course that she’s interested in with good reviews. Once she’s started it, she sees how much progress she’s made with the progress bar, and she's motivated to continue learning. She ends up finishing her course and taking more courses, earning multiple rewards and growing a beautiful garden! She now has enough knowledge to keep her garden going, and she feels excited by all the things she can learn in the future from YouTube Education.
Define
Feature Roadmap | Card Sort | Sitemap
Feature Roadmap
I looked at a combination of the competitor analysis and user interviews to determine what features this app will need. I identified the following features as Must-have features for a minimum-viable product:
Course ratings/reviews
Course difficulty
Instructor bio
Progress bar
Currently enrolled courses
Course preview
Course time commitment
Card Sort
Using the feature roadmap and users' needs, I conducted an unmoderated card sort with 6 participants to understand how users would want the information organized. For the most part, users agreed on what categories the cards would go in. Here are the results from the card sort.
Sitemap
Based off my primary and secondary research, I created a sitemap to determine how the information would be organized. The "Rewards" category on top is what the tab will be called in the navigation bar, while the "Rewards" underneath is referring to the rewards that a user can purchase using their points (like a movie or a free trial to YouTube Premium).
Design
User Flows | Lo-fi Wireframes | Mid-fi Wireframes | Hi-fi Wireframes
User Flows
I considered the users' goals from my research to develop user flows for the two flows I would be testing during usability testing:
Searching for and enrolling in a course.
Taking a course.
Creating the user flows allowed me to think of a structure for the flows and identify any points where a user may get stuck. This step led to me being able to create lo-fi wireframes.
Lo-fi Wireframes
With the information I gathered from my research and my flows in mind, it was time to ideate. I created lo-fidelity wireframes for the two flows mentioned above.
Mid-fi Wireframes
After making rough sketches, I used Figma to create mid-fi wireframes. Here is a sample of the mid-fi wireframes I created for previewing a course.
Hi-fi Wireframes
Using the existing YouTube design system and branding, I turned my lo-fi wireframes into hi-fi wireframes. Here is a sample of the first version of the screens.
Prototype & Test
Usability Test | Revisions | Prototype
Usability Test
I conducted usability testing on the hi-fi wireframes with 6 participants. The flows tested very well, with a 100% completion rate and an average task rating of 4.9/5 for ease of use. The issues users mentioned were that they wanted an easy way to see what lesson or activity was next without having to scroll, and they wanted the quiz questions on separate pages rather than one page.
Priority Revisions
Through a priority matrix, I determined which revisions I would do. A couple of users mentioned that it was overwhelming to have all of the questions listed on one page in the quiz. This wasn’t brought up by all users, but it felt important for ease of use and user satisfaction, so I conducted A/B testing to see if users preferred one question per page or five questions per page. 63% of users preferred to have one question per page.
Prototypes
After revising the wireframes, I created two prototypes for the flows I focused on throughout this project. These prototypes show what a user would experience when enrolling in a course and viewing the course material.
Final Thoughts
Lessons Learned
This project emphasized how essential research is in the design process by reminding me that my personal opinion may not align with the majority of users’ opinions. For example, I preferred the quiz to show all five questions on the screen because I like to have all the information possible and then choose how to proceed, but the majority of users in testing preferred one question per screen.