Project

Direct Combatives

Direct Combatives is the venture to move online popular self-defense classes. The idea is to sell monthly membership to the online platform where students can learn self defense from the comfort of their home.

My Role

Research
UX
UI

Tools

Figma
Mockup
Pen & Paper

Duration

June-Sep 2017

01

Discovery

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 determine if there would be enough of an interest in purchasing self defense courses in a digital format. Would the classes translate from the in-person experience with Isaac to learning alone at home watching a video? In our initial research, I found an interest and also saw other websites selling similar courses. I noticed how many of the 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 teacher 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 to barrier of not having an in-person teacher
  • To motivate the student along

Deliverables

The product will include:

  • Marketing page
  • Video course pages, along with a page of the self-defense tracks
  • The membership pages, with a central dashboard and account utility pages
  • Community section for discussion and questions
  • Blog
02

Research

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

Competitive Analysis

We found the overall user experience of competing self defense websites to be lacking. We had a hard time even figuring out how to purchase courses. Our competitive analysis looked something like this.

User Research

We interviewed all types of people to see if they’d be interested in learning self defense from online videos. We asked how they would use the site, 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 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 Point

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 oblgiation, risk free. 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.
03

Planning

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 will 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
04

Design

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

Information Architecture

We broke down the videos into two tracks, self defense and fitness, and further divided the videos into subsections called "Courses." We 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 us 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 app and move between screens.

I began with listing out the main content and element on each page and grouping them by related items. I then draw out the pages with a pen and papers, but some of them I created in Balsamiq. The wireframes allowed us to gather feedback and iterate.

Visual Design

The first step in visual design was understanding the user and the emotions we wanted the project to give them. We then put together a mood board, pulling in images and other 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.

Style Guide

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.

Iterations

Research showed that 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.