YouTube Learning

Team Project • UX/UI Design

Project Overview

We took YouTube's existing strengths and conveyed them onto a learning platform with a web app and mobile app.

Team

Role

UX research, UI design

Objective

Design a learning platform hosted on YouTube that creates impactful learning experiences for anyone who wishes to learn.

Tools

Figma

Miro

Problems and Goals

Most online education platforms lack a personal touch, and many individuals have a negative perspective of online learning. On a different note, YouTube is known for bridging the gap between content creators and their viewers, enabling users to feel a connection to whomever they are watching.

Combining YouTube's approachability with professional content meant increasing that "human" factor in online learning with easy-to-digest videos. We hypothesized that this approach could increase student motivation and allow for greater learning capabilities.

Rather than targeting a niche market, the goal for YouTube Learning is to be accessible to all age ranges and learning abilities and focus on facilitating human interactions.

Competitive Analysis

Competitors include online learning sites such as LinkedIn Learning, Skillshare, Udemy, Coursera, and EdX. They offer a combination of professional and creative topics with a large user base. In addition, many are backed by accredited institutions or companies and offer certification.

The primary risk includes a high barrier to entry, as existing competitors already have a strong user base. However, YouTube Learning can stand out by targeting a broader age range and offer more casual learning. YouTube as a platform already has a large user base, and strong marketing could drive current users to extend their usage to YouTube Learning.

Getting to Know the Users

In order to get a grasp of what potential users were looking for, we conducted some moderated remote interviews (due to COVID-19). We wanted to hear their opinions and experiences on existing online learning platforms as well as their expectations for YouTube Learning.

We especially wanted to learn preferences between monthly vs yearly payment plans and how much people valued certification.

To check out our interview questions and findings:

Initial Interviews (Google Slides)

Some main findings

Most participants did not enjoy their previous online learning experiences. There was too much reading and too little visuals, and if you didn't have questions there wasn't any interaction between the student and the instructor.
2/3 of participants mentioned interacting with instructors, with 2 wanting to learn from peers as well. Some students highly valued peer-learning and enjoyed the process of learning from each other.
2/3 of participants preferred monthly payments for access to the entire platform over pay-per-course or yearly payment plans
Certificates were considered valuable only if they were for career development and from credible sources, but many did view them as simply a "piece of paper"
Those with children in the family did not see value in a Kid's section. Too many free educational videos are available on YouTube, and YouTube already has a platform called YouTube Kids.

Our research supported our hypothesis that the platform's main focus should be human interaction.

Who is it for?

There seems to be two main types of students:

the casual learners who want to learn for fun in their free time, and
the career developers who want to expand on their skillsets to further their careers.

Full User Personas (Google Slides)

Based on our research, we worked through user flows to create a site map. We also wanted users to be able to browse course options without having to create an account/log in so we made sure to include a "skip" option. This would make our brand seem more trustworthy and could increase conversion rates if people find courses they are interested in taking.

Designing a Solution

We used a mobile-first approach despite understanding that most users would access the platform on a web browser. This was to focus on the MVP (minimum viable product) and to make sure people were able to navigate effectively on a small screen.

For the first iteration, we chose to include four navigation icons in our main navigation:

Home: personalized list of recommended courses
Courses: list of courses the user is enrolled in & courses they have saved for later
Messages: direct messaging with instructors and classmates
Profile: basic user information and settings

For our low fidelity wireframes, Sera focused on designing the "Courses" and "Profile" tabs for both mobile and web while I focused on "Home" and "Messages". We both explored many different iterations for layouts but made sure our layouts reflected each other's and reused certain elements to make sure the design was cohesive.

Messaging Options

Because one major goal was to facilitate interactions between instructors and classmates, we wanted to incorporate multiple chatting options. We debated for a long time, choosing to include direct messages, a community chat, and Q&A sections for lessons. Direct messages would allow for private conversations, either one-to-one or a group chat, which could be helpful for homework assignments and projects. This would also allow users to build stronger relationships. The casual community chat would help build a sense of community and could be used to network, and the Q&A sections would be a space where the instructor and other students can answer any lesson questions.

Initial Sketches

Mobile screens I worked on

Web app screens I worked on

A Look into My Thought Processes

Navigation: I decided to utilize YouTube's existing navigation layout and color scheme to keep it brand-consistent as well as intuitive. As a long-time YouTube user, I always found the suggested list at the top of the screen helpful, and the feedback from our interviews was also promising. This decision would also allow us to focus more on user flow rather than coming up with a completely new style guide.

Course cards on Home: I wanted users to be able to see the most important information about each course at a glance. This included the image, name, and length. Incorporating this information into the "playlist" cards similar to regular YouTube made it both easy to view and intuitive. Because our two main user personas had different needs (namely, the career-oriented persona needed certificates, while the casual learner cared most about a flexible schedule), I chose to include both "Certificate" and "Flexible" tags on the cards.
‍
Enroll button: I wanted this button to always be visible on both mobile and web since that was our main call to action. On mobile, I put the CTA button at the very bottom where the user's thumb had easy access.

Overlays: To keep with the "human touch" that we were going for, I wanted personalized friendly messages to make the user feel welcomed. The tone overall for YouTube Learning is friendly but professional.

Usability Testing and Feedback

We decided to test the mobile and web versions separately with different participants to focus on specific usability issues in each platform. We conducted 6 moderated usability tests to:

Measure the learnability and intuitiveness of navigating the mobile and web application for first-time users
Determine what features need onboarding
Get general feedback on the usability, design, and structure of the application

We asked users to complete certain tasks during the testing process:

Sign In/Create an Account: Determine if the process is smooth and users can easily sign in or create a new account
Explore and Browse the Site: Determine is navigation is intuitive and users can easily explore new categories or find what they are specifically looking for
Enroll in a course: Determine if users have sufficient information for each course to make a decision on enrollment
Completing a course: Determine if navigation in between lessons is intuitive
Communication: Determine if users can easily participate in class discussions, message instructors, and connect with friends/study buddies

Usability Report

Mobile

Issue 1: The term "Courses" on the navigation bar was vague (high severity)

Solution: People were confused if "Courses" would show a recommended list of all courses offered or if it would show their enrolled courses. Change it to "My Courses" to make it more obvious the screen will show what they are enrolled in.

Issue 2: Course community chats were located under "Messages" causing confusion (medium severity)

Solution: The community chat function should be grouped with the corresponding course to make it more intuitive.

Issue 3: People did not expect to find settings under "Profile" (medium severity)

Solution: Rename the tab "Settings" to more accurately describe the section

Issue 4: One user was confused about using the term "Flexible" under each course offering (low severity)

Solution: "Flexible" is vague and could mean either that start dates were flexible, due dates were flexible, or both. Using "Open" is more relevant for students looking to start learning immediately.

Web

Issue 1: Horizontal scrolling was not obvious on the homepage (medium severity)

Solution: Show that horizontal scrolling is possible with arrows or overflow

Issue 2: Users wanted a syllabus that showed relevant assignments and due dates for each lesson (medium severity)

Solution: Design a syllabus page linked to "Enrolled courses" as well as included on course description

Issue 3: "Projects" sounded more like group work rather than individual homework (low severity)

Solution: Change term to "Tasks" to make it more intuitive

To view all findings, check out:
Rainbow Spreadsheet (Google Sheets)

Back to Designing

With this in mind, we went and created higher fidelity prototypes and designed a few additional screens. This time, I focused on the web app while Sera focused on the mobile prototype.

Some Changes Made

"Flexible" tag to "Open": A user had been confused what "flexible" meant, so we decided that showing a course was open for enrollment was more relevant and understandable for users trying to find a course to enroll in.
‍
Similar courses suggested: A user had suggested we include similar courses underneath each course overview, so even if students weren't interested in that particular course, they could see a list of other options in the same category.

Syllabus: Two users had wanted to see a full list of assignments to plan ahead, so I designed a course syllabus where each lesson name was followed by lesson topics, tasks, and task due dates.

Lesson Transcription: I hadn't designed the original wireframe, but this was something I felt strongly about so included in this iteration. Closed captions were available for the deaf or hard-of-hearing, but for those with learning difficulties, it might be frustrating if they have to constantly pause and rewind or slow down the speed of the video. Transcriptions are useful even for abled students, as they can easily go back to any lesson and find a particular quote without having to watch the whole video again.

Second Round of Testing

Because we made some significant changes and added new screens, we decided to conduct a second round of usability tests testing the same tasks as before.

Luckily, all of the issues were easy fixes and mostly cosmetic, such as adding a visual divider between sections or updating the categories for course ratings (ie. rating the course overall, instructor, quality of the curriculum, and difficulty of the course).

To view all findings, check out:
Rainbow Spreadsheet (Google Sheets)

Final Prototype

Mobile

Click here for a better experience

Web

Click here for a better experience

Results and Takeaways

Rather than targeting a niche market, the goal for YouTube Learning is to be accessible to all age ranges and learning abilities and focus on facilitating human interactions.

While we ended up not including a Kid's section (due to the existence of YouTube Kids), we were able to achieve the goals for YouTube Learning. We included closed captions and lesson transcriptions for students as well as personalized dashboards, multiple communication channels, and utilized a personable tone.

‍

Working with another UX/UI designer without taking full control and responsibility over different sections was interesting, but luckily we worked well together. We were both willing to offer constructive criticism and not agree with everything the other suggested for the sake of agreeing. In a bigger team, this system would probably not work as wel, but it helped us work through problems together and come up with better solutions.

Want to work together?

If you like what you see and want to work together, get in touch!

lee.stella748@gmail.com

Problems and Goals Getting to Know the Users Designing a Solution Usability Tests Final Prototype