Enter the kwoon
Empowering kung fu students to practice their art anytime, everywhere
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
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
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.
Understand the problem space
Research it and understand it well
Draw first conclusions
Translate research into artefacts
Create User Personas
Develop a task flow
Low Fidelity Wireframes
High Fidelity Wireframes
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.
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:
• 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.
• 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
To complete the discovery phase, a competitor analysis and a technology scan were performed.
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.
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 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.
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
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:
Orange from the Shaolin Temple monks' robes
Turquoise, representing nature, calmness and trust
Red as the colour of the warrior in Kung Fu
I also chose kung fu related icons representing the forms menu.
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.
Do at least 5 more user testings with high fidelity frames
Polish high fidelity wireframes
Translate it into a desktop version
Create a funding strategy to develop a full functioning prototype
Present to possible founders