/**/

Udemy redesign

image

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

image

Landing page, redesigned

image

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.
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.
The revised navigation is minimalistic and stylish, as it brings focus to the student user.
image
image
βœ…
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.
image

Category search redesigned

The redesigned category menu is efficient, stylish and easier to use.
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.
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.
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.
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.
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.
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.
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!

image