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
✅
Streamlinednavigation, 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 itemsdisplayed, 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” tabupgraded 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!
.gif?w=750&f=webp)
