Udemy

Homepage Redesign

What is Udemy?

Udemy is an online learning platform with over 40,000 courses. Students can purchase courses for anywhere between $10-$300 and keep them forever once they're purchased. Anyone can be an instructor and upload courses and many instructors have made it their full-time job.

  The Udemy Homepage before redesign.

The Challenge

We knew 77% of users who visited our homepage were bouncing right away, and only 23% were engaging in a discovery activity. Based on user action and feedback, we understood that unless users were searching for something specific, they weren’t really interacting with Udemy. The vast amount of courses on the site overwhelmed users, and browsing by individual courses was time consuming and disinteresting.

How we tackled the problem

  • Our theme was discovery. Our primary goals with the redesign were to show users what Udemy is, how they can benefit from using Udemy, and give them something interesting to engage with.
  • We wanted to design for a range rather than average, and we want to consolidate our logged in and logged out home page designs. For new users, we cover a wide breadth of different ways to discover: by category, by job to be done, by course, by instructor, and since we don't know you very well yet, we'll show you some popular jobs we know the majority of our students want to accomplish, like building a website. The better we get to know you, the more we can refine and improve what we surface, so logged in users would start to see more personalized recommendations based on their purchase history with Udemy.
  • Because Udemy has so many courses, we can curate content into special collection to surface the very best Udemy has to offer, and also set a tone for our brand around how we choose to curate (similar to Etsy). This also gives us a chance to build around our students' Jobs to be Done.

  The 'Anatomy of a Homepage'.

Process

I began by completing a competitive analysis for Udemy's homepage. I wanted to explore other sites that curated well, and how they chose to curate their content both by level and also by type of collections. I noticed that sites that felt most engaging showcased content at different fidelity, and had some similar set of ingredients. I began to build out what I called an 'Anatomy of a Homepage' - deconstructing the websites I had analyzed down to their IA, and applying that IA to Udemy's content.

The above wireframes are Airbnb, Etsy, Skillshare, and Highbrow — their elements are replaced with corresponding Udemy elements (where Etsy might have an item, we have a course card). This is to give an idea of what our home page might look like employing different IA approaches and implementing the various segments we had pieced together previously from our competitive analysis.

Initial designs

When we started designing our collections unit, we knew we wanted to break down collections into three categories: career, can-do, and casual. We quickly realized that this wasn't the ideal way to break down jobs, as the categories were too broad and often overlapped. Instead, we decided to break down our collections units by specific popular jobs, like build a website, become a better photographer, etc.

The Solution

I created a variety of different modules that could be used on the Udemy home page as well as our category pages. In the end we had:

  • Lists: Courses that shared a common characteristic, like being a best seller, or being highliy rated.
  • Collections: Courses that are manually curated by our team and focus on what a user is trying to accomplish, like building a website, or becoming a better photographer.
  • Featured: We created large, carousel units to feature different courses and instructors. What I love about the carousel unit is that it's a big, beautiful display image, but allows the previous and next items to 'peek' onto the page, giving the user some context.
  • Course cards: We kept our classic course cards as well, and surfaced invidual courses that fell into our most popular categories. We also added a 'quick view' hover to individual course cards, allowing sellers to hover on a course card and see the length, date published, and summary of a course without leaving the home page.

The Result

The 'quick view' hover state on our course cards gave us a 5-7% lift on revenue on our category and subcategory pages. We also saw a 2% lift in revenue overall for Udemy's homepage. Lastly, we saw a 175.5% increase in revenue for our collections pages.

There was still room to improve and iterate on the Udemy homepage. I left Udemy to go to Opendoor shortly after this project was completed, though the great design team at Udemy is still working on improving upon this design. You can see the latest version on their site.