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 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:
The product will include:
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.
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.
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.
After putting together the personas and user needs, we were able to clarify our overriding goals.
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:
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.
Example user scenarios:
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.
With all guiding points in place, it is time to put together the puzzle pieces.
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.
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.
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.
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.
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.