Udemy.com: a design & experience case study

A semi-in-depth look at Udemy.com, its visual design, and overall experience.

Jelvin Base
Prototypr

--

Disclaimer

This is a case study to share my general design process. I have no affiliations whatsoever with Udemy.com so all of the cases presented are hypothetical and are based on my assumptions and observations only.

Background

I was tasked with doing a design audit of Udemy.com to find out if there are any problems and/or weaknesses in the design and how I plan to improve it.

My concern is…

Since Udemy.com is already an established platform, there would’ve likely been a ton of iterations done already to justify the current design so I believe explicitly finding problems without any context won’t yield any objective results.

Typically, I’d hesitate to work on a design project without any context. One thing’s for sure, designing something without any basis is kinda like cooking steak for vegans; you might be a great cook but everything backfires if you’re cooking for the wrong crowd.

That said, despite the limited time & knowledge I have of the product, I’ll do my best to get as much info as I can to proceed this case study objectively & constructively.

©Udemy

About Udemy

Online education platforms have recently been trending over the past few years and have changed our perspectives in learning. I took a look at Udemy.com, an online marketplace for learners & teachers and a place where you can acquire new skills by enrolling to in-depth lessons from over 80,000 courses.

I personally visit Udemy to consume content when I have free time. With the platform’s recent overhaul, researching about it was quite intriguing.

Problem

Trying to find something new to learn can be daunting especially when you get bombarded with a ton recommendations on platforms like Udemy or Skillshare. Because of the abundance of courses, choosing the right course or class would be a challenge for new users hence decision fatigue comes to mind which is something I want to tackle.

Some factors to consider

Before moving on to the solution, I’d like to mention some aspects of Udemy I wish I knew before doing any work:

  • Brand, business, and product information
  • Data on traffic, statistics, and analytics
  • Current marketing strategy & business goals
  • Documents on their design and interaction
  • Any findings on users and their online learning behavior
  • User feedback analysis from the most current design

Solution

Due to my lack of product & business knowledge of Udemy.com, I decided to do a brief heuristic evaluation (by myself), create alternative designs, and formulate strategies with the available information online along with what my familiarity in research, user interface design, and user experience.

Goal

My main goal for this case study is to evaluate parts of the platform and to propose approaches for a possibly better experience for users that may potentially lead to conversion. Following up on my goal, I aim:

  1. To traverse the pages and find sections that can be improved
  2. To present alternate designs that may improve the overall experience
  3. To create actionable implementations and strategies based on the designs

Role

During the time I was reasearching, I worked on a mix of tasks including user experience overview, surface-level competitive analysis, some research on user behavior, user interface design, and strategy.

Things I’ll be focusing on:

As much as I want to go through the whole platform, I’ll only be focusing on these for now:

  1. Home page and its call(s)-to-action
  2. Course list & course details
  3. The finding & filtering experience

Without further ado, let’s get this party started. 🎉

Research

I start any project by doing research or discovery. During research, I do my best to find out whatever information I can to back my work up. For this case study, I had to experience the platform myself to determine if there was anything “wrong” or can be improved.

Depending on the scale & nature of the project, I would do a variety of methodologies but in the meanttime, I did only these:

  1. User experience audit
  2. Competitive analysis
  3. User behavior research

UX Audit

When conducting a user experience audit, there are a couple of things that should be considered like performance, accessibility, traffic, and heuristics among others but all I did for this case study was to look at the design and strategy plus some review on the usability.

Homepage (Desktop)

A quick glance at the home page above the fold can tell us what the overall experience is depending on whether a user is logged in or not. For users who aren’t logged in, the main call-to-action is to either sign up or to search for a course. From these observation, I can speculate that:

  • The content above the fold at the home page with no account logged in aims to let new users consider signing up for the platform.
  • The search call-to-action lets users know that there’s a plethora of lessons available on the platform.
Recommended courses based on what I’ve search for or enrolled on
  • After logging in, I was shown the top courses above the fold and a section of recommended courses based on what I’ve searched for or enrolled on. Since I already have an account, all the page needs to make me consider is to enroll on more courses.

So far, the front page also (almost always) offers discounts for certain courses so this means that they’re really taking their marketing game seriously. In terms of the overall layout of the Home Page, its design & layout is enough to showcase the top courses and top categories of the platform.

Finding Courses

Filtering already starts on the Home Page by going through the Category dropdown

Navigating through categories is made accessible by having the Category menu on the header navigation. Within the menu, I can either look for a general category or a specific category. I’m not sure how they sorted out the information architecture out but I think that it was helpful granularly splitting general & specific categories.

Further browsing through the site for courses, I noticed that there are small differences when I’m searching for a course and/or topic that I want to enroll on compared to a just doing a general search. The experience is split into browsing and searching.

General browsing experience

When browsing for a course, a user can start from the Category menu which goes to the Category page. You can further browse and filter down to specific categories and popular topics. Another layer of filtering happens when you reach the list of courses of the category/topic you’ve chosen as it shows you the All Filters function.

Overall searching experience

In terms of searching for courses, the experience differs from browsing as it shows you the All Filters function and a mix of topics and categories on the side. You can narrow down your results by choosing keywords/tags on the within the filter carousel.

Either you’re browsing or searching for a course, the objective of the experience is to narrow down your results to a specific course that you want to enroll on.

Viewing Courses

Product listing from Categories to Pages

After finding the course you want to enroll on, the next thing to do is to validate if the course is worth taking or not. Throughout the pages, here are some of the recurring information for users to see when they’re browsing for courses.

  • Course Title
  • Short course description
  • Price
  • Star ratings and no. of ratings
  • Author/s
  • Cover photo/video

Apart from the cover photo/video, the most emphasized info shown to users are the price, the star ratings, and the number of people who’ve rated.

Helpful tooltip to show more info

A helpful function on the platform is the tooltip. It appears whenever you hover to a course card. Although this is only available on desktop versions and only on certain pages, it helps users know what to expect when they get into the course. The tooltip also has a Add to Cart button and Favorite button to make it more accessible for users to choose as well.

Personally, I don’t mind reading all of the information in the Course Description especially if it’s a course that I want to enroll to. It depends on person to person though but I believe that the information listed above are enough to let the users know that the course is worth taking.

One part that I want to note is how cramped some of the text is; the typography could use some white space but all in all, it’s still legible & readable.

Competitive Analysis

Out of curiosity, I researched on Udemy’s competitors. The most related platforms that I can think of are Skillshare, CreativeLive, Lynda.com, and Coursera.

A quick comparison of the platforms in the online education ecosystem gives us an idea how similar they are but differ in their approaches on pricing, content, and call-to-action. One advantage that I could see that Udemy does compared to the other platforms is the “pay-per-course” model. It’s helpful for those learners who are busy but want to distribute their learning in extended sessions.

Doing a competitive analysis gives us an opportunity see what strategies our competition are applying and maybe take it a step further when we’re designing pages for the platform.

User Behavior

Considering the mental model of an online learner is important when designing for a platform like this. A question that comes into mind is “How do learners choose a course and consider subscribing to lessons on an online education platform?” This is assuming that those learners are already aware of platforms already; making them aware if such platforms exist is another thing.

Knowing their behaviour can determine how the content has , lay out calls-to-actions, and strategize flows to ease them through the browsing & purchasing process. I would’ve done some interviews to validate my assumptions on how they would choose a course once they land on a certain page. This is where contextual inquiries and supporting documents come into play.

I’d like to cite a paper written by NYA Adzobu that talks about usability of online education platforms set in developing countries.

Defining a Persona

It’s always helpful if there are user personas defined for me to reference whenever I’m designing something; this helps me constantly reevaluate my designs while considering their points of view.

Ideally, I would define at least three(3) personas to represent the target market of the platform but in this case, the user persona that I defined was from the perspective of a New Udemy.com User.

Designs & Approaches

Now that I’ve gathered all of the information I needed, I moved on to doing the redesigns. I made 3 cases and each case has a primary focus, rationale, execution, and some key metrics for validation.

Approach #1 — Home Page Design (Desktop)

Currently, the Home Page exudes a very “salesman” vibe. It’s definitely straight to the point; it gives you a search option off the bat while mentioning the lowest price for new users to see but I thought of making the call-to-action friendlier.

Shout out to copywriters because they would’ve written it better 🙌 • Photo by Kelly Sikkema

The search bar still functions as the old one but the placeholder on the alternative design switches & animates from one popular category to another while the hero image acts as a link going to the featured course.

The reason why I chose to stick to the layout is because I believe that the execution is effective already. Even so, I believe that rewriting the copy can make the experience more engaging because we’re making it more conversational.

The approach was inspired by how the content above the fold is presented at Instructables and the voice & tone of the content of Mailchimp.

The main goal for this approach is to make the call-to-action friendlier with the hopes to increase conversions even just by a bit. The caveat for this approach is that it might not align with the brand’s messaging but I believe it’s worth taking a shot.

Approach #1 Summary:

  • Approach: make the call-to-action friendlier
  • Goal: potentially increase conversion
  • Execution: A/B testing to 5%-10% of new users
  • Test duration: 7–14 days
  • Key metric: at least 5% increase in conversions (bought courses)
  • Caveat: might not align with the brand’s voice & tone

Approach #2 — Onboarding before Browsing/Searching (Mobile)

One thing that I noticed that can be implemented in a content heavy platform for the mobile app is a onboarding wizard.

Rather than redesigning the filter function, the platform can filter out what new users want to learn even before searching for courses by asking what their preferences are with Udemy’s most popular categories and topics as choices.

Sample screens of the Onboarding Wizard • Photos credited on Unsplash

The choice of questions may vary depending on what users prefer. In case user don’t want to go through the steps, they can just skip the onboarding process.

Some of the onboarding flows that I’ve seen that were effective include Netflix and Canva. Check out the article by UX Planet below to find out more or this link to see Netflix’s page flow.

One consideration why I made this approach is because of Udemy’s current marketing strategy. Every once in a while, Udemy ads promote how users can access content anywhere, anytime. I speculated that they may be trying to get more users to consume content through their phones.

For this approach, it can be implemented if there are relatively more users who access content through their mobile phones instead of their desktop browsers.

Approach #2 Summary:

  • Approach: create a preference onboarding wizard
  • Goal: filter user preferences to narrow down choices
  • Execution: Usability testing sessions with high fidelity prototype
  • Participants: 5–7 participants
  • Key metric: At least 75% completion rate
  • Caveat: might take some time to recruit and facilitate with participants

Approach #3 — Product Lists and Page (Desktop)

One of the most important aspects to consider in a content-heavy platform is how the typography is implemented. I believe there really is nothing wrong with the current layout and spacing but the information can be made easier to read with just a few tweaks on the margins.

Another important thing to consider in typography is the isolation of content. Apart from the shadow, the tooltip blends on the cards so some sort of overlay might be helpful to focus on whatever the user’s hovering on.

This might not seem much but improving the overall design especially in typography is extremely important to keep the reader’s attention to what’s important.

Approach #3 Summary:

  • Approach: design a more readable layout
  • Goal: improve reading and choosing experience
  • Execution: Focus group discussion or usability testing session for validation
  • Participants: 5–7 participants
  • Key metric: user validation from FGD or UT
  • Caveat: costly to conduct, takes time to recruit participants

I personally do not know if they have implemented these on their platform before since I always browse through the desktop. I’d definitely appreciate it if anybody can validate this for me.

Conclusion

Based on the information I got from the heuristic evaluation I did on Udemy.com, I’ve come up with a few approaches that can be tested to see if there will be any effects if the designs were to be implemented on the actual site. I can’t say for sure if what I presented is for better or for worse but it’d be pretty interesting to test and find out. Hi, Udemy peeps!

Overall, the approaches I presented weren’t really redesigns; most of it are just possible alternatives to what’s already there.

Things I would’ve done

If I were a part of the design team, here a couple of the things that I would’ve done — maybe facilitate — before doing any redesign:

  1. Brand immersion and in-depth product research
  2. Contextual inquiries with current & target customers
  3. Review of content and information architecture
  4. Comprehensive competitor analysis
  5. Full platform audit & walkthrough
  6. Research and streategy on localization

The would-be results of those research methods along with the considerations I mentioned in the Background would’ve given me enough insight to know what the “problems” are in the design and what approaches may help alleviate and/or improve the situation.

Ultimately, this whole process is just a tip of the iceberg since I only tackled the client facing part of the platform. If I were to go deeper, I’d look at the technical side too but that’s for another time.

I wasn’t planning on posting this online. I’m not a fan of unsolicited design but I thought that this might be a good opportunity for me to have my design process evaluated and get some constructive feedback (if ever someone chooses to read everything that is).

If there are any conflicts, I’d appreciate it if you can point it out to me or if I missed anything. I’ll do my best to resolve it. Thanks!

--

--