About Udemy and why I chose this project

Udemy is an online learning platform and marketplace that offers 130,000 courses and serves over 400 million enrolled students globally. As a lifelong learner and educator at heart, I am passionate about education. And I love the potential for sites like Udemy to democratize knowledge and expand learning opportunities through technology.

Summary

This case study describes my proposed redesign of the desktop landing page of Udemy, an online educational marketplace and learning platform. In response to my own experience as a student on Udemy, I identified and took on three major pain points.

💡

1. Cluttered navigation menu

💡

2. Clunky category search

💡

3. Confusing card design and course progress bar

Landing page, actual

Landing page, redesigned

1. Cluttered navigation menu

🛑

The navigation bar is cluttered, unfocused and not personalized for students, the primary users.

Udemy's current navigation menu incorporates content for four user types, resulting in a total lack of visual hierarchy.

Navigation menu redesigned

The revised navigation is minimalistic and stylish, as it brings focus to the student user.

✅

Integrated product category buttons, now found in the category menu

✅

Streamlined navigation, bringing focus to the student user experience

✅

Improved UX writing, education-oriented, rather than marketplace-generic

✅

Color for clarity and visual separation between discrete sections

2. Clunky category search

🛑

The category search is clunky and error-prone, as users must navigate across a wide screen area to access sub-levels of content.

Category search redesigned

The redesigned category menu is efficient, stylish and easier to use.

A semi-transparent panel behind the search drawer creates visual separation and adds a stylish effect.

✅

Fewer menu items displayed, reducing visual clutter

✅

Decreased likelihood of user error, by reducing the screen area covered

✅

More responsive user experience, as only user-selected content is displayed

Category search on a redesigned mobile app

A "cookie crumbs"-style navigation is well suited to the depth of categories and sub-category menus on Udemy.

3. Confusing card design

🛑

The course cards in the progress bar are confusing, difficult to read and unstyled.

Course card, actual

What course is this? The title of a short lesson movie is easily read as the course title, which is cut off and barely legible.

Course card, redesigned

The course title is clear at a glance and the progress bar tracks the more relevant overall course progress.

Course cards redesigned

✅

Clearly emphasized course title, disambiguated from lesson through text placement and styling

✅

Progress bar reflects overall course progress, more relevant than progress in a short lesson movie

✅

Attractive styling for contemporary look

Confusing course progress bar

🛑

The progress bar is visually undifferentiated from the other content on the homepage.

Course progress bar, actual

Also, there's the writing: "start learning"? I'm over halfway through both of these courses.

Course progress bar, redesigned

Better! Improved UX writing, prominent "My Learning" button and contemporary styling motivate the student.

Course progress bar redesigned

✅

Visually discrete and stylistically defined, creating a distinctive student space

✅

“My Learning” tab upgraded to a more prominent ghost button, bringing greater focus to student user experience

Contact me

Want to collaborate on a similar project? Are you looking for a UX designer passionate about education and accessibility? I'd love to hear from you!

My email is long.andrew.b@gmail.com.

Udemy redesign