← Back to home

Udemy Course Taking

Role

Senior UX Designer / Design Lead for Mobile

The Challenge

Learning on-the-go is a relatively new concept. In today’s constantly-changing world, it seems like there’s always something new to learn or new trends to keep up with. With video as the main vehicle for delivering the ability to learn, we explored how we might create tools and features that aid learning while mobile and encourage users to complete their courses.

How are Students Learning

To determine what course-taking on a mobile device might look like, we first had to look at how people were using their mobile devices to learn. Working with our research team, we looked through usage analytics to see high-level trends, performed user interviews to get anecdotal evidence, and looked through support tickets to see how the app was being used as users encountered issues. Through this, we found two main use cases. The first was that many students were using their mobile device as a second screen to watch video while they practiced on another device (usually a laptop/desktop). The second use case were students who use their mobile device to consume content during their commute, or some other activity while away from home (for example, while on the treadmill at the gym).

Some of the multitude of explorations on how to organize all of the functionality in the mobile video player.

Improving the Video Player

For students that were using the mobile app as a second screen device, one of their biggest issues was trying rewatch a part of a lecture if they missed something. Because of how long each video lecture could be, getting to a specific point in the video could be a bit tedious. To help with this, we introduced the ability to jump forward or backward 15 seconds. We explored different time intervals, but eventually decided on 15 seconds as a way to more precisely scrub through the video.

The rewind-15 and forward-15 controls next to the playhead so all playback controls are near each other.

For students that were learning on the go, we explored what would provide students with more flexibility with their courses. Two features implemented were bookmarking and background audio mode. The use case for bookmarking was for students that found an interesting point in a lecture that they wanted to revisit at a later time. By bookmarking a point within a lecture, the student could see key points in a lecture and quickly revisit those points. Guiding another designer, we defined where a student can set a bookmark, and how they revisit the bookmarks.

The hero flow when a student bookmarks a point in the video.

Background audio was important for those commuting, since in many cases, it could be difficult to watch the video. A limitation for mobile devices was that video could not stream while the device was locked. We needed to find a way to allow students to listen to the audio track while the device was locked and control the playback. This was accomplished by seamlessly switching between the video playback and audio playback to provide an experience that required no effort. A student would just need to hit the lock button to lock their phone, as they normally would. The app would automatically switch video & audio playback, to just audio playback so that the student can continue to listen to the course. We also used the native playback controls on the lock screen to give students control to go to the next or a previous lecture.

Keep on Learning

While the video player is the main learning vehicle, there were several other opportunities elsewhere in the app to aid re-engagement and provide more learning material. One thing we heard from students was that it was difficult to continue a lecture/course from where they had previously left off. To solve this, we added a call-to-action to the home screen that gave students a way to easily jump to where they had left off in the lecture.

Wires and early concepts into how and where we might engage students to continue their previously touched course.

The explorations led to final treatments and placements for a module to resume your previous course, but ultimately ended on the first 2 variations.

Another improvement was the inclusion of additional learning material. Instructors generally would provide additional information or research in the form of links, text documents, or slideshows (called “Supplementary Material”). All of these were previously not accessible in the mobile app, so we created a way for students to access these materials.

Saving for Offline Use

One last frequent request  we heard from students was the ability to still take courses without an internet connection. By creating a mechanism that allowed students to select lectures, sections, or whole courses as available for offline consumption, we give the students control as to how they can take their course.

We explored how others were implementing simliar concepts. From swipe gestures to a setting controls, we ultimately decided on using a toggle next to each section and lecture. While the front-end control was relatively simple, there was some logic we needed to determine. For example, because of the large file sizes for videos, we needed to determine whether the user was on wi-fi. If the user was on cellular and the file size total was over 100MB, we’d queue the file to download when the user joined a wi-fi network.

The other consideration was how to handle removing downloaded files. As a way to keep things simple, tapping on the icon would unload the lecture or section. This destructive action would not take effect immediately – we would keep the file stored in memory, but prompt the user that the lecture or course was no longer available offline, with the ability to undo the action. This message would be presented for 5 seconds before disappearing, at which point the course would be removed from the device’s memory. If removing multiple courses, tapping on the icon would add the additional course to the queue of items to be removed and reset the timer.