Aikido Kan

As a part of the Google certificate program, I have created a mobile application for aikido school students to help them easily and quickly book and cancel classes. The app also allows buying school memberships, viewing the number of people who have already enrolled in a class, and watching video tutorials.

Interact with the live prototype here

Type

Personal

Role

UI/Ux designer

Team

Individual

Year

2021

Problem

Most of the small aikido schools don't have a website or mobile application and in order to book classes students have to call a school and speak with a manager which is not convenient. Especially for people with hearing loss or someone who is not fluent in English.

Solution

A simple and user-friendly mobile app with the ability to book and cancel classes online.

A mockup of mobile app with footnotes.

Process

My approach

For this project, I used the design thinking process:

Design thinking process with 6 steps: Empathise, Define, Ideate, Prototype, Test, and Implement.

1. Empathise

Research goals

  • Find out how people prefer to book aikido classes and why.
  • What kind of information do people look for on aikido school websites.
  • Learn about users' pain points during the booking classes process.

Research methods

  • In-depth interview
  • Competitive audit

Competitive analysis

To get a better understanding of the competitor landscape, I conducted competitive audit.

Main findings
  • Most of the aikido schools' websites don't have an option to book classes online.
  • There are some information overload on most of the websites of aikido schools. This could prove overwhelming for some users, especially those new to the sport.
A screenshot from a Google Sheets with competitive analysis.

In-depth interviews

During Primary research 5 people were interviewed. Among participants were aikido school students or their parents. During interview sessions, were discussed participants experience visiting the aikido school, the main pain points, and frustrations.

Main findings
  • 3 out of 5 participants mentioned that they prefer to book classes using mobile apps over websites or phone calls.
  • New students, on the other hand, prefer to call a school to get more detailed info about classes.
  • Most of the participants mention that they want to see an up-to-date schedule and receive notifications about any changes in it.
  • Some of the those interviewed mentioned that overcrowded classes affect training effectiveness.

02. Define

Personas

Based on the results of user research, I developed two personas: a primary, Janet, and a secondary – Kevin. Each has different needs and goals. Janet is a novice student who needs special attention during training to be sure her technique is correct. Kevin, on the other hand, is a longtime student who needs easily schedule classes with the ability to make recurring bookings.

Two personas: Kevin and Janet.

User Stories

User stories of personas Kevin and Janet.

User Journey Map

To highlight pain points and identify opportunities for improvement, I developed a user journey map.

User Journey Map for Janet.

Problem Statements

Problem statements for both personas.

03. Ideation

To help me come up with lots of ideas for design solutions, I completed design activities, like How Might We and Crazy Eights.

The “How might we” The exercise helped me turn problems into design opportunities.

  • How can we make the booking process smooth and quick?
  • How to make the cancellation process quick and intuitive?
  • How might we help users book less crowded classes?

04. Prototype

Storyboards

Big picture storyboard helped me focus on what the user needs, their context, and why the product will be useful to the user.

The close-up storyboard, on the other hand, helped concentrate on the product and how it works.

Big-picture and Closed-up storyboards for an Aikido mobile app.

User Flow

I constructed a user flow of what a basic start-to-finish journey looks like while booking or canceling a class. This helps me in understanding ways users can interact with the product.

a user flow of what a basic start-to-finish journey

Wireframe

While designing wireframes, I tried to make the app functional and simple at the same time. The main goal was to ensure a quick and easy class booking process.

A screenshot of low-fidelity wireframes on the left and hi-fidelity wireframes on the right.

Low-fidelity prototype

To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of booking an aikido class.

screenshot with a low-fidelity prototype showing interactions between screens.

05. Test

The first round of usability study helped guide the designs from wireframes to mockups.

Objectives
  • Observe how users interact with the product.
  • Determine the ease at which users can navigate through the app to do the tasks like booking an aikido class, buying a membership, or canceling a class.
  • Test the overall ease of use of navigating the website.
  • Observe any frustrations or obstacles users may have during accomplishing the tasks.
Main findings
  • Some of the participants want to be able to book more than one class at once.
  • 3 out of 5 people had problems canceling a class
  • Most of participants want to see detailed information about memberships before buying it.
  • 2 out of 3 participants want to see a calendar on the class booking page.
Images of "before" and "after" after 1 round of usability testing.

06. Implement

Mockups

I made changes based on user feedback. And then I created a new high-fidelity version of the app that improved cancellation processes, included more detailed information about memberships, and added recurring bookings and a calendar date picker.

Hi-fidelity prototype

The high-fidelity prototype can be viewed here.

2nd round of usability testing

The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Images of "before" and "after" after 2 round of usability testing.

UI Kit

When designing the app, I used the 60-30-10 rule for colors and Gestalt principles such as similarity, proximity and common region for layout.

style guide of a mobile app

Final Design

mockups with final design mockups with final design

Next project

DesignSpot →