Udemy is a massive online learning platform that offers over 130,000 courses and reaches over 400 million students worldwide through their website and mobile app. As a Udemy user, I found aspects of the interface frustrating and uninspired. This project is my proposed redesign for the navigation, search and course cards in both desktop and mobile.
Role
I completed UX Research and UI Design tasks on this redesign project for my portfolio. This was an independent project completed over a couple of months. I employed Google Sheets for heuristic analysis and Figma for competitive analysis and prototype design.
Thank you to Jayneil Dalal, CareerFoundry mentor, for initial guidance and encouragement!
Problem
How can I redesign elements of Udemy’s interface to create a student-focused experience that is stylishly minimalistic and distinctly educational in feel?
I found Udemy’s interface clunky, visually unfocused and non-specific - more marketplace than learning platform.
Solution
My redesign addresses four areas:
- Minimalistic and decluttered navigation
- Streamlined course search
- Card design improvements
- Course progress status bar
Approach
DISCOVERY
I started with a heuristic analysis of Udemy’s homepage to identify all my personal pain points.
As someone who manages their ADHD, what most bugged me was the visual bloat. I found it hard to focus on the courses I was taking, because Udemy does not significantly customize the experience for a registered user.
Through competitive analysis, I analyzed several other platforms, duplicating the pattern of interaction I knew from Udemy.
I collected examples for inspiration along the way.
Redesign #1
A decluttered navigation
The navigation bar is cluttered, unfocused and not personalized for students, the primary users. The glut of links and suggested search filters results in a total lack of visual hierarchy.
Navigation redesigned
The revised navigation is minimalistic and stylish, as it brings focus in UX writing to the student user.
The improved navigation features:
- 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
Redesign #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.
Search redesigned
My improved category search streamlines the user experience. The redesigned category menu is efficient, stylish and easier to use.
The improved search produces:
- Decreased likelihood of user error, by reducing the screen area covered
- More responsive user experience, as only user-selected content is displayed
- Fewer menu items displayed, reducing visual clutter
Redesign #3
Confusing card design
The course cards in the progress bar are confusing, difficult to read and unstyled.
Course cards redesigned
The redesigned course cards prioritize the display of overall course status, rather than progress in a single course video.
The improvements address:
- 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
Redesign #4
Confusing course progress bar
The progress bar is visually undifferentiated from the other content on the homepage.
Course progress bar redesigned
The redesigned progress bar is stylish, motivating in tone and clearer at a glance.
The specific improvements include:
- Green horizontal bars break up white space and bring focus to the student's content
- The “My Learning” tab is upgraded to a more prominent ghost button
- Increased visibility of the course cover images is more visually appealing and improves readability
- Improved UX writing is friendly and more specifically motivating ("ready for your next lesson" vs. "let's start learning")
Responsive redesign
I also adapted the streamlined search functionality to the mobile app. The effect is a simplified and more efficient browsing experience.
The notable improvements here include:
- Increased content visible above the fold [Search screen]
- Cookie-crumbs navigation improves user's ability to orient in a vast sea of results
- Increased content visible above the fold (by reducing ad size and increasing display of user-specific content) ["Featured" screen]
Result
This project was successful in that it provided the premise for making professional contact with a product designer at Udemy. We had a great chat, and I welcomed his openness to meet with me again as I prepare for job interviews. Highly successful in education product design (and a truly kind person), his input will be invaluable as I ramp up in my job search.
Made with Super.so + Notion.so + Cy template