Mobile App redesign

Udemy

Helping users make decisions and supporting diverse learning environments

Project overview

With over 210,000 online courses, Udemy is the world’s largest learning platform that provides a diverse range of online courses. As a user of Udemy myself, I have noticed several difficulties in the process of selecting the courses for me. In addition, despite having a global user base, the app’s UI lacked support for users who do not speak the language of their instructors. Through user research and usability evaluation our team sought ways to resolves these issues.

Duration

6 weeks

Tools

Figma, Figjam, Google survey, Balsamiq

Skills

User research, UI/UX Design, Usability evaluation

Team

Yeojun Lee
Yeojeong Lim

Current Problems

Crowded UI, irrelevant information to user cluttering the home page

No apparent sort, filter categories in the search results page

Absence of transcript, notes list, prominent note-taking button

Key features

Clear and user-friendly main page

A search bar was added at the top to help users quickly find the courses they need.
The main page was decluttered to present the content clearly and more user friendly.

Prominent and clear filter indication

We redesigned the search results filter using a text label replacing the filter icon and indicated on the results page with filter chips so that users can see and adjust the filters outside of the filter menu.

Live transcript to help learners around the world, in every situation

We added a live transcript feature to assist users to understand their lectures better and for people who having difficulty hearing lectures.

Design process

Discover

Competitor analysis

We conducted secondary research on other services to learn how they solved similar issues we face. We looked into YouTube and Etsy as well as other MOOC services to seek out solutions from all angles.

User Survey

We conducted a user survey using Google survey where 14 global Udemy users in the ages of 21-45 responded.

Results showed that users:

have a broad sense of the discipline of the course they want to take
Actively use the search bar to find courses
Various factors affect their decision to purchase a course - primarily the curriculum and when the course was updated

App store & Play store Reviews

To get a deeper understanding of people’s experiences using the Udemy app, we conducted review mining on both Apple app store and Google play store.

Reviews showed areas of improvement in:

Navigation
Information hierarchy / UI
Search filter
Subtitle (closed captioning)

Users were satisfied with:

Wide ranging lecture topics
Course quality

Define

Affinity map

We collated Udemy users’ accounts from the app store reviews and survey answers and organised them into five main themes.

Empathy map

By creating an empathy map, we synthesised what we learned from engaging with Udemy users. In this phase we reexamined all facets of people’s experiences using Udemy. Particularly by visualising users’ emotional responses and how they were resolving their frustrations, we were able to better identify pain points.

Prioritisation

We synthesised our research and insights and worked out possible solutions. These ideas were sorted into four categories in the 2x2 prioritisation matrix.

After considering the likely impact of possible redesign directions, time and resource constraints, we decided to prioritise the following two areas:

Helping users search and filter the vast number of courses on Udemy
Making courses more accessible for users with different backgrounds(language) and physical abilities and environment.

III

Develop

Crazy 8's Sketch

We sketched out designs before moving on to wireframes and high fidelity designs, to save time and resource in the latter stages of the design process.

Wireframes

We developed low~mid-fidelity wireframes to lay out content and visualise functionality and user flow. In this stage, we focussed on whether the interface and hierarchy of different elements made logical sense for the users.

A search bar is added at the top of the home screen for easier, intuitive search.

The existing search tab in the bottom navigation reveals a more detailed sub- category page.

On the lecture page student feedbacks can be sorted. Chat feature can answer questions and users can instantly sort wishlisted lectures into custom collections.

A live transcript is offered for the lecture videos. Past notes can be accessed with less steps and notes can be taken in various formats.

Customising closed captions is available in video settings.

Deliver

High fidelity designs

Clearer content information

We added a search bar at the top of the home screen to better accommodate user behaviour. We also drafted a more personalised default page taking out less relevant lists and items. Sorting and filter features are also made prominent in the search results page.

Maximising existing features

To help users in making a purchase decision, we re-organised the visual hierarchy, decluttered the page and made it possible to sort student reviews to assist users in making purchase decisions.
We added a ‘collection’ feature so that users can categorise items in their wishlist.

Enhanced accessibility

A live transcript can help users from different language backgrounds and in different using spaces.
Diversified note-taking modes also support users listening to lectures in various physical settings.

The option to customise closed captions can assist users with different visual abilities and benefit users using larger devices

Usability test

We tested our solutions by conducting 60 minute in depth interviews with participants experience using Udemy. Participants were given tasks relevant to the redesign and asked what they thought about the our solution compared to the existing product. *Further modifications were made based on the usability test.

Han, 30
Content creator

Having two search paths is good, especially the top search bar is easy to spot and intuitive.

Davin, 28
Developer

I really like that a variety of important features like sorting, lecture transcript and wishlist (collection) were added. I can now save time with these features.

Alec, 24
Cybersecurity

I prefer the redesign [in the lecture page] because I can quickly scan through the overview of the course.

Evaluation

Visualising information about users, especially information that I think I know well is crucial in grasping pain points and truly empathising with the user.
It was eye-opening to see the curb-cut effect of a single feature; adding a live-transcript for the lecture video not only helped users with different language backgrounds but also helped users who felt they were wasting their time rewinding the video for various reasons.