UX/UI Case Study: Online Learning Platform

David Lipman
Sep 3, 2018 · 6 min read

Working out and learning self defense is at the top of many people’s to-do lists, but they often just can’t find the time to get to the gym or the studio. The idea for this product is to sell a monthly membership of online self defense classes that can be consumed from the comfort of one’s home. The challenge is marketing the product in an easy to digest way and building a product that the students will keep coming back to.

The Challenge

The first issue to tackle was to find if there would be enough of an interest in purchasing self defense courses in a digital format. Would self defense classes translate from an in-person experience to learning alone at home watching a video? In the initial research, I found an interest and also saw other websites selling similar courses. I noticed how some other websites had poor usability and on-boarding, so it seemed we had an opportunity here. But we understood the inherent challenge of learning self defense without a trainer in person. So our initial issues to tackle were:

  • To create an on-boarding system that guides the user through a clear process
  • To overcome the barrier of not having an in-person trainer
  • To motivate the student along so that they would not drop out

Deliverables

The product would include:

  • Marketing pages
  • The Video course pages
  • The membership pages, with a central dashboard and account utility pages
  • Community section for discussion and questions
  • Blog with informative articles

Research

I took a look at other sites selling self defense and martial arts courses as well as at successful online learning platforms, not necessarily related to self defense. And very helpful were the discussions I had with the target audience.

Competitive Analysis

I conducted a competitive analysis, gathering the findings in a spreadsheet. I found the overall user experience of some other self defense websites to be lacking; even having a hard time on one website figuring out how to purchase courses.

User Research

I interviewed different types of people to see if they’d be interested in learning self defense from online videos. I asked how they would use the product, and what they would need to stay motivated. From that, I created personas to gather who they are, their challenges, and what they want from such a product.

Getting a feeling of the different types of people, I was able to better understand their needs.

User Needs

  • The user is a single 20 year old who wants to gain muscle
  • The user is a 31 year old parent who can only exercise at home
  • The user doesn’t have much money to spend on fitness
  • The user is a 24 year old who wants to defend himself
  • The user is busy who has no time to leave home for fitness

Guiding Points

After putting together the personas and user needs, we were able to clarify our overriding goals.

  • Set the price at an affordable price point
  • Create a clear on-boarding process, and let it be clear that it’s no obligation, risk free as the value proposition should be clear.
  • Motivation should be included in several aspects, making sure the user does not feel alone, but part of a community.
  • Make it feel that your trainer is there with you

Features

I take the approach that features are not the focus, but what the user gets out of the product. That being said, features are a key element. Based on the personas, a feature chart is helpful in prioritizing features.

We will prioritize the features that give the most value, are the most practical to build, and, of course, that users desire. Based on the above, some key features should include:

  • For motivation, points and badges as you move along, equivalent to karate belts.
  • To motivate the students, community discussion, ability to upload video for feedback, and personal communication with trainer

The initial research and development of personas and their desired features allowed me to put together scenarios and user stories which would guide me in making sure the product is being designed with the user’s wishes and goals in mind.

User Scenarios

Example user scenarios:

  • The user wants access to a series of videos
  • The user wants an easy way to chat with others
  • The user needs motivational help
  • The user wants feedback from the instructor
  • The user wants to be able to leave a video and know where she left off

User Stories

Breaking down the user scenarios into specific steps of the user flow is a great guide in making sure we’re building the right product. Sample of user stories.

  • I want to read about the features
  • I want to sign up hassle free
  • I want a risk free free trial
  • Once logged in, I want to view all courses
  • I want to follow a track
  • I want to watch the video
  • I want to easily find a training partner
  • I want to request feedback
  • I want to ask for help
  • I want to easily navigate the videos
  • I want to switch to a different class
  • I want to see what I’ve accomplished already
  • I want to log out and know where I left off
Pricing page with faq’s

Putting it all together

With all guiding points in place, it is time to put together the puzzle pieces.

Information Architecture

I broke down the videos into two tracks, self defense and fitness, and further divided the videos into subsections called “Courses” which consist of individual classes. I divided the blog similarly into these two tracks, to keep the content organized. All information about the program we kept out of the main navigation, as we found that it distracted users from signing up.

A sitemap was created to help organize the content and pages, and help with user flow.

Wireframes

The wireframe process allowed me to see how everything fits together. We also used it to help with user flow. We played out scenarios of how the user would use the product and move between screens.

I began with listing out the main content and elements of each page and grouping them by related items. I then sketched the pages with a pen and paper, but some of them I created digitally. The wireframes allowed us to gather feedback and iterate.

Dashboard low-fidelity wireframe

Visual Design

The first step in the visual design was understanding the user and the emotions we wanted the product to give them. We then put together a mood board, pulling in images and other products and websites from the web. From that, we had a good ideas of the design style and direction that is appropriate to solve the design needs of the project.

Design Pattern

A design pattern was created to keep consistency throughout the website and product and make it easy to iterate and build on the design in the future.

Dashboard

Iterations

Research showed that past the basic information, the more information we provided about the course before sign up, the more it distracted the user from signing up. I also iterated on the visual design, to streamline the design, and keep a clean user interface. Based on feedback, we improved the dashboard to give the user a better overview of their progress and where they are currently holding.

David Lipman

Written by

UX/UI freelance designer working remotely

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade