Udemy redesign

Udemy redesign

Client
Independent redesign
Project title
Research-informed UI redesign of Udemy's desktop website
Disciplines
Heuristic analysisCompetitive analysisUI

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.
image

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:

  1. Minimalistic and decluttered navigation
  2. Streamlined course search
  3. Card design improvements
  4. Course progress status bar

Approach

DISCOVERY

I started with a heuristic analysis of Udemy’s homepage to identify all my personal pain points.

image

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.

image

I collected examples for inspiration along the way.

image

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.

Udemy's current desktop navigation menu
Udemy's current desktop navigation menu

Navigation redesigned

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

image
image
image

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.

image

Search redesigned

My improved category search streamlines the user experience. The redesigned category menu is efficient, stylish and easier to use.

image
A scrim behind the search drawer creates visual separation
A scrim behind the search drawer creates visual separation

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.

image

Course cards redesigned

The redesigned course cards prioritize the display of overall course status, rather than progress in a single course video.

image

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.

image

Course progress bar redesigned

The redesigned progress bar is stylish, motivating in tone and clearer at a glance.

image

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.

Category search on mobile app
Category search on mobile app

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.

drewlong.ux@gmail.com · Linked In · Resume · Medium