Matthias
UX researcher

Enter the kwoon

Empowering kung fu students to practice their art anytime, everywhere

Image alt tag

digikwoon- full cycle product development

digikwoon wants to connect kung fu practitioners remotely to practice and learn basic movements and forms.

Length: 10 weeks

Role: UX Research, UX/ UI design

Tools used: Figma, Sketch, InVision, Adobe, pen and paper, brain and creativity

Platform: Android

Team: The one and only: Matthias with help the help of people's advice

Challenge to solve: Due to covid-19 most martial arts schools moved to online teaching. The main problem raised up though: how to teach the complex patterns of kung fu virtually?

Research Methods: Qualitative and Quantitative methods (survey, interviews, usability testing, conceptual inquiries), Competitive Analysis, Secondary Research

Research Goal: Finding a digital solution that is both: feasible and easy-to-use

Target Audience: martial arts schools and students

Vision: Make kung fu practice accessible and shareable

Double Diamond

Double Diamond

Double Diamond

In order to structure this product development, I used the double diamond for organizing my process.

As you will see, the process is divided into Discover, Define, Develop and Deliver phases. More often than not, these processes are fluent.

  1. Discover:

    • Understand the problem space

    • Research it and understand it well

    • Draw first conclusions

  2. Define:

    • Translate research into artefacts

    • Understand pain-points

    • Create User Personas

    • Develop a task flow

  3. Develop:

    • Sketching

    • Low Fidelity Wireframes

  4. Deliver:

    • User Testing

    • High Fidelity Wireframes

    • Prototyping

1. Discover: You have to start somewhere.

Primary Research: User interviews

At the discovery phase of my project, I conducted user interviews in order to get a better understanding of my problem space.

I did a total of five interviews with people who practice kung fu and do that actually remotely. Over zoom, I interviewed people to understand their frustrations and get a better idea of their behaviours but also what they are doing now instead of my design solution.

It blew my mind, how I had certain assumptions in my head and how they were shortly changed. Out of the interview pain points were made.

An insight to demographics and basic data.

An insight to demographics and basic data.

Primary Research: User surveys

To gather more information beforehand and get a broader picture, I decided to do a short 10 questions online survey.

The online survey, done through surveymonkey, contained ten questions, a few demographic, but mainly open-ended questions to dig deeper into the problem space. My main insights were:

Improvements
• integration of website with online learning, having all classes recorded and stored, doing more basics and homework and more personal interaction with the instructor.
• Only one participants mentioned that martial arts should be a physical interaction with other people and that online can only help to memorized forms.

Pain-points
• Not having one platform with movements in steps and numbered
• Difficult to understand three dimensional aspects of form
• Subtleties get lost and applications are missing without physical contact
• Need of contact training
• Learning only works with blended structure
• Watching videos online and offline

What else?

To complete the discovery phase, a competitor analysis and a technology scan were performed.

2. Define: Getting into specifics.
Pain points categorized into four sections.

Pain points categorized into four sections.

Here are: Joana and Jeremia, the two kung fu students.

Here are: Joana and Jeremia, the two kung fu students.

Personas

To better understand my users, I created a Proto-Persona and furthermore, based on interviews and surveys, a primary and a secondary persona.

Before getting into sketching, I wanted to know who I am designing for. I approached the development of my personas in a heuristic manner based on my secondary and primary research.

The pain points Joana and Jeremia have are:

  • Not being able to share experience with others

  • Not practising with others

  • Online practice is not the same as in person

Task Flow Diagram

Before getting into sketching and wireframing, I wanted to better understand my user's journey and clear up which part of my product to highlight. That's why I decided to make a task flow diagram.

The task flow starts with the user signing up, choosing their kung fu school, and if they are a student or an instructor. After that, they land on the home screen where they click on the add button which leads them to add a video screen where they choose a video and then add text to it. Clicking on the post leads them to the profile screen.

Task Flow Diagram

Task Flow Diagram

3. Develop: an informed design process
Sketches

Sketches

Sketches

Before getting into digital wireframing, I usually do at least one, in this case three, round of sketching. I follow the crazy8's idea where I sketch eight frames as fast as possible.

The sketches gave me insights to where to go with my designs when starting wireframing. To do so, I did three iterations with eight sketches each time, trying to sketch as quick as possible to let my ideas flow.

Only after that, I moved into sketch the best ideas and put them into a flow and, therefore, into an order.

Low Fidelity Wireframe: home screen

Low Fidelity Wireframe: home screen

Low Fidelity Wireframes

At the beginning of my design process I created wireframes for testing purposes. They were tested twice with five participants each round.

My chosen tool to make the wireframes was figma. It was important to not only understand how people would use the app and where their focus would fall but also how placing a button and the UX writing influences the task flow.

I did three iterations in total before going into high fidelity.

Results of 1st and 2nd round of user testing

Results of 1st and 2nd round of user testing

User Testing: design based on evidence

Before high fidelity, I did two testing rounds in order to reveal possible usability problems.

User testing was made to ten people, five per round.

The outcome of the testing was not 100% clear. That opened more space for learning. As visible my second round was less clear to the users than my first round.

The results of this made me:

  • Go back to the elements that worked such as add button and home screen

  • Taking out the like option, only leaving comment section

Iterations of home screen from low to high fidelity

Iterations of home screen from low to high fidelity

4. Deliver: Research made visual-
high-fidelity wireframes
Enter the kwoon

UI Design: from low to high fidelity

Once I tested out all usability mistakes and went into low fidelity wireframing, I started designing the final screens in figma.

To do so, I created a Brand and afterwards a Visual Identity. I chose DIN Next LT Pro as my typeface for a modern, easy to read look, round icons for friendliness, and the main brand colours:

  1. Orange from the Shaolin Temple monks' robes

  2. Turquoise, representing nature, calmness and trust

  3. Red as the colour of the warrior in Kung Fu

I also chose kung fu related icons representing the forms menu.

5. Switching platforms-
iPhone iterations

High Fidelity Prototype designed in Figma.

6. Conclusion: Enter the 36th chambers of UX

Translating an idea into a full high fidelity wireframes.

At first, this was the most scariest project for me, since I love to work in a team but here I was completely on my own. I get more creative in a collective or collaborative environment, so this was challenging but I also could dig deeper into an issue I truly care about and that made it all worth it.

Due to my research experience, the first part was pretty easy and came naturally to me. That said, the designing was pretty hard under pressure.

Next Steps

  1. Do at least 5 more user testings with high fidelity frames

  2. Polish high fidelity wireframes

  3. Translate it into a desktop version

  4. Create a funding strategy to develop a full functioning prototype

  5. Present to possible founders

50
Iterations
48
Screens
100
litres of coffee
"Never practice alone"
digikwoon