KOKEMUX is a collaborative step-by-step process for structuring idea generation and user interface design. KOKEMUX has 4 phases:
Discovery to identify the users needs; Concept design to ideate the design focus; Task-oriented design to prototype design solutions and Reality check to gather feedback on the prototypes.
.
Discovery
Identifying user needs
.
Concept Design
Ideating the design focus
.
Task Oriented Design
Prototyping design solutions
Images ©Might Could Studios
Reality Check
Gathering feedback
KOKEMUX phases guide the software team through an analysis of the users and their needs, a brainstorming sketching session for ideating the design focus, initial and more detailed prototyping, prototype evaluation with users participating and analysis of the results. Each phase has 6 steps, which makes it easy for people with different backrounds to generate ideas and design the first versions of the user interface.
Find out more about the KOKEMUX process through the step-by-step process below!
How To
DISCOVERY
Step 1 – Eagle View
Instructions:
- Brainstorm and list the user groups you think will be using your product/application.
- Draw the user groups.
- Decide what you think will be the overall goal for the users to use the product/application.
- Draw the overall goal of the users.
- Write the steps the users will take to achieve the overall goal with words and arrows (5-15 simple steps).
Outcome:
The Eagle View illustration
Step 2 – User Group Analysis
Instructions:
- For each user group, that is listed on the initial Eagle View, analyze all the factors for the user group analysis.
- Each team member works on analyzing one user group.
- Team members can also collaborate on analyzing each user group.
- Look through the analysis of all user groups, comment and finalize.
- Decide what will be your target user group
- You will contact that group for the interviews
- You will build your design for that user group
Outcome:
A complete user group analysis sheet and a chosen target group
Step 3 – User Interviews
Instructions:
- Discuss how you want to change the interview guide.
- Discuss which people to interview.
- Discus how you want to record the results.
- Decide about different roles the team members have during the interview.
- Do one pilot run to practice how to conduct the interview.
- Conduct the interview according to the plan.
- Fill in the interview outcome template for documenting the results of each interview.
Outcome:
- Interview guide
- Filled-in outcome interview sheet
Template:
Step 4 – Persona
Instructions:
- Create a persona description based on the target user group interview material.
- Use the persona template.
- Be aware that you can not fill in the UX goals, you will do that in the next step.
Outcome:
Initial persona description.
Template:
Persona template
Step 5 – UX Goals
Instructions:
- Think about your persona psychological goals.
- Each team member selects three UX goals individually for the persona by using the UX goal sheet.
- Decide on the three UX goals that the team wants to focus on for the project:
- Each team member writes their three UX goals on post it notes – one by one.
- Put all the post-its on the wall from all team members.Group the ones that are the same and that are related.
- Select three UX goals that are in line with the persona psychological goals and with what the team wants to focus on.
- Modify the persona description by including the three UX goals in the description.
Outcome:
Three UX goals, Modified persona description
Template:
The UX goal sheet
Step 6 – Design Brief
Instructions:
- Fill in the items in the design brief.
Outcome:
A completed design brief.
Template:
The UCD sprint – design brief template
CONCEPT DESIGN
Step 1 – Existing Solutions
Instructions:
- Each team member should find at least 3 existing design solutions relevant for the persona’s needs and UX goals.
- These could come from the user interviews, your own experience, suggestions from peers, etc.
- Note down what you can learn from those design solutions
- Take turns and present these solutions to other team members.
- Each of your get 3 minutes to show the team the design solutions.
- Individually, note down interesting design solutions from the presentations of team members.
Outcome:
An individual list of interesting design solutions.
Step 2 – Concept Development
Instructions:
- Individually, look at the Eagle View, UX goals, and the material you have so far.
- Write down notes on what you find interesting for the design concept.
- Write a list of design ideas you want to use for your concept design.
- Prioritise your list of design ideas.
- Crazy 8 to consider alternative design concepts:
- Each team member takes an A4 paper and folds it so it has 8 sections
- Individually, pick the best idea from your design ideas that you want to use in your concept design
- Sketch in each section for one minute. Develop as many different sketches of design concepts for the picked idea as possible. When you cannot think about new solutions for the idea, pick your next idea from the list and continue sketching with that idea.
- You are done when you have sketched for 8 minutes, this is the reason for the name, the speed is crazy!
- Solution sketch development individually:
- Take your best idea(s) from the Crazy 8 activity
- Using the idea(s), make a solution sketch of three panes to communicate the idea(s)
- Each team member presents their solution sketch to team mates
- Others can ask clarifying questions but do not start evaluating the idea
- When all solution sketches have been presented, pick the best 3 of them by considering:
- Does the idea address the long term goal on the map?
- Is the idea what the Persona needs and wants?
- Are you able to prototype and test the idea?
- Is the solution exciting?
- Which ideas could be combined to form a solution?
Outcome:
3 solution sketches (or more, if they fit nicely together)
Step 3 – Storyboards
Instructions:
- As a team, prepare 3 storyboards based on the different solution sketches
- Make your primary persona as the main character
- Describe the need of the persona as the starting point of the storyboard
- Tell the story in 4-8 frames (as in comic strips)
- Include glimpses of the main functionality on a simplified user interface
- Make the storyboard understandable – your storyboard should explain itself. The story is more important than the visuals
- Provide a happy ending for the persona
- Give each storyboard a catchy title, pay attention
Outcome:
3 storyboards to evaluate with users
Step 4 – Storyboard Evaluation
Instructions:
- Recruit 3-4 people similar to the persona to an individual 45min storyboard evaluation session
- Plan the process for storyboard evaluation:
- Explain the purpose of the evaluation: collecting feedback on preliminary ideas
- Ask permission to record the session and take photos (on paper or on a video recording)
- Introduce the storyboard to the participant.
- Discuss the idea with the user.
- Repeat c. & d. for each storyboard.
- After discussing each storyboard, ask users to fill in a questionnaire comparing the ideas against a set of UX goals.
- Run a pilot test with 1 classmate (or 2 if needed) to make the test procedure fluent
- Evaluate the storyboards with 3-4 target user group members, one by one, according to the plan
- Analyze the results:
- What the participants liked and disliked in each storyboard?
- Which UX goals were chosen most often for each storyboard?
Outcome:
Storyboard evaluation report containing evaluation setup and results.
Template:
- Consent form
- Storyboard evaluation questionnaire template
- Report template
Step 5 – Target Concept
Instructions:
- Based on the evaluation feedback, form a desired solution (target concept) to take forward
- Define a slogan for your target concept
Outcome:
Target design concept
Step 6 – Scenarios
Instructions:
- Write 5 scenarios that describe how the persona will use your tool for their pragmatic and psychological needs. The UI design of the tool will be based on these scenarios. For each scenario:
- Pick an important need of the persona
- Describe how your tool allows the persona to fulfill that need
- The scenario should describe a situation of how the persona uses your design
Outcome:
5 scenarios addressing the needs of the persona
TASK ORIENTED DESIGN
Step 1 – User Tasks
Instructions:
- Read through the 5 scenarios.
- Think about what you can ask users to do when evaluating prototypes to meet these scenarios.
- Each team member selects one scenario and makes one task to ask the user to solve during prototype evaluation.
- Share the tasks with the team members:
- Be sure to have at least 5 tasks.
- Be sure that the users would use 20 minutes to solve the tasks.
- If shorter or longer, you have to add or skip tasks.
- Each of you selects one task from the joint list of tasks and lists how you expect the users to conclude the task.
Outcome:
A list of at least 5 tasks to be used in the prototype evaluations
Step 2 – UI Design Brainstorming
- Look at the Eagle View and the material you have so far.
- Write down notes and ideas on what you want to use when designing the interface:
- Look at the Long Term Goal.
- Write notes and ideas on the goals, opportunities and inspiration you‘ve collected around the room.
- Look at the notes for the Design Exploration.
- Write a list of your ideas.
- Pick one user task that you want to design for from the list of tasks to be used in the prototype evaluation.
- Crazy 8:
- Take an A4 paper and fold it so it has 8 squares.
- Pick one good idea from your list of ideas.
- Sketch an UI for the selected task in each section for 1 minute.
- After 1 minute move on to the next square and make an alternative design while you continue sketching:
- Try to sketch several variations of the same idea.
- Ask „what would be another good way of doing this?“
- If, you can‘t find more variations, pick another idea from your list or another task.
- You are done when you have sketched for 8 minutes, this is the reason for the name, the speed is crazy!
- The Crazy 8 activity helps you to consider alternative designs.
Outcome:
Individual A4 sheets with alternative UI designs
Step 3 – Design Solutions
Instructions:
- Each team member makes a design solution individually
- You take your best idea(s) from the Crazy 8
- You want to make a more detailed design
- You take three extended post-it notes
- You draw one design solution:
- For how to solve the challenges at hand
- The design needs to be detailed, thought-out and easy to understand
- Voting on good ideas
- Put all the design solutions on the wall in one long row, like at an art museum
- All participants get 10 dot stickers
- Look at all the solutions sketches
- Choose good designs:
- Don’t talk
- Put dot stickers beside the parts you like (if any)
- Put two or three dots on the most exciting ideas
- When all team members have chosen, put the post-its with more than one vote beside each other (the winners) and the others in another beside each other (the losers)
- Take 15 minutes to discuss the winning design
- The owner of the design can describe what was the thought behind the design
- Take max. 3 minutes per idea
Outcome:
Selection of good design solutions from the team for the UI design
Step 4 – Happy Paths
Instructions:
- Work 2 and 2 together to form collaborating pairs
- Distribute the user tasks (see User Tasks – Step 1) to be used in the prototype evaluations between collaborating pairs
- Draw the happy paths:
- Each pair chooses one task to begin with
- Draw the opening page/screen on a blackboard/whiteboard, that the user needs for finishing the task
- Build your design on the good design solution from the previous step
- Draw the next page/screen and the next one until the task is finished
- Then take the next task and make a happy path for that task
Outcome:
One happy path for each of the tasks to be used in the prototype evaluation
Step 5 – Low-fi Prototypes
Instructions:
- You should make a low fidelity (rough) prototypes for all the happy-paths
- Look at each step in the happy path
- Design a page/screen for each of the steps
- Note, when designing use the winning designs from the voting process (Design Solutions – Step 3)
Outcome:
A low-fidelity prototype for all the happy-paths, so all tasks can be solved in the prototype evaluations
Step 6 – Pilot Test
Instructions:
- Make all the material for the prototype evaluation ready.
- The introduction text.
- The background questions.
- The introduction to the prototype.
- The list of the tasks.
- The debriefing questions.
- Plan the prototype evaluations in Reality Check Step 1 and Reality Check Step 4.
- Decide which people you would like to involve:
- In the Low-fi prototype evaluation this could be users, piers or experts.
- In the High-fi prototype evaluation this should be potential users.
- Plan when and where the evaluation sessions will be conducted.
- Decide the roles the team members will have in each evaluation session.
- Recruit participants for the evaluations.
- Decide which people you would like to involve:
- Run one pilot test:
- Ask a person (not a team member) to take part in a pilot test.
- Conduct the prototype evaluation using all the material above and the prototype.
- Change the material and the prototype according to the results.
Outcome:
- A pilot tested material for prototype evaluation.
- The plan for the prototype evaluations (Step 1 and Step 4 in the Reality Check Phase).
- A modified prototype.
Template:
- Template for defining the material for the prototype evaluations.
- Template for planning the prototype evaluation sessions.
REALITY CHECK
Step 1 – Low-fi Prototype Evaluation
Instructions:
Preparation for conducting the prototype evaluation
- Have the Low-fi prototype ready (print it out, if you have made the prototype in a tool)
- Print out all the material for the prototype evaluation.
- Prepare the space you will use for the prototype evaluation.
- Decide the roles, who will be a conductor and who will be a prototype runner in each session.
Conducting the paper prototype evaluation
- The conductor welcomes the participant.
- The conductor reads the introduction to the participant.
- The conductor asks the participant the background questions.
- The conductor reads the introduction to the prototype.
- The conductor asks the participant to solve the tasks one by one.
- The prototype runner puts the next page/screen in front of the participant.
- When the participant has done all the tasks, or if 25 minutes have gone, the conductor asks the debriefing questions on the experiences of the participant during the prototype evalution.
- The conductor and the prototype runner write notes on what they think could be improved. Especially, if the participant is:
- ) Frustrated,
- ) slowed down,
- ) not able to complete the task,
- ) is confused or does not understand or
- ) needs help
- Write direct quotes from the participant, observations and interpretations you have.
Gathering the results:
- After each prototype evaluation session:
- Write positive comments from the participant on post-it notes (preferably green or yellow post-its).
- Write negative comments from the participant on post-it notes with a different color (fx. Red or bright pink).
- Make one column for each participant on a blackboard/whiteboard marked by: participant 1, participant 2, ….
- Make lines for each task on the blackboard/whiteboard.
- Put up the post-it notes for each participant.
Outcome:
- A table of post-it-notes with the feedback from participants from the prototype evaluation.
- Answers from the participant on the questions asked in the prototype evaluation
Step 2 – Evaluation Result Analysis
Instructions:
- Discuss the outcome of the prototype evaluation.
- Look at the table (from Step 1- Prototype Evaluation).
- Answer the overall questions:
- What can we learn from the prototype evaluation?
- Do we like to continue developing this product/tool?
- If the team wants to continue, answer these questions:
- What are the major issues to take into consideration after the prototype evaluation? – List the issues.
- Is there anything you would like to add, remove or change in the interface?
- Do you need to change the flow in the prototype?
- Do we think the users will have the experiences we want them to have from the UX goals?
- Make the changes on the paper prototype.
Outcome:
Answers to the question above
Step 3 – High-fi Prototypes
Instructions:
- Make a more detailed fidelity prototype for all the happy-paths based on the Low-fi prototypes.
- Base the design on comments you have got so far.
- Colors, shapes, sizes and style are used to support and enhance the functionality and the usage of the interface.
- Make it possible for users to move from one screen/page to another when clicking on buttons or links.
- If needed, adjust the material to be used for High-fi prototype evaluation
Outcome:
An intermediate clickable prototype for all the happy-paths, so all tasks can be solved in the prototype. This should be done in some prototyping tool like Figma, Balsamiq, etc.
Step 4 – Evaluation With Users
Instructions:
This evaluation should be conducted with potential users.
Preparation for conducting the High-fi prototype evaluations with users:
- Have the High-fi prototype ready
- Print out all the material for the prototype evaluation
- Prepare the space you will use for the prototype evaluation
- Decide the roles, who will be a conductor and who will be a note taker in each session
Conducting the High-fi prototype evaluation:
- The conductor welcomes the user
- The conductor reads the introduction to the user
- The conductor asks the user the background questions
- The conductor reads the introduction to the prototype
- The conductor asks the user to solve the tasks one by one
- When the user has done all the tasks, or if 25 minutes have gone, the conductor asks the debriefing questions on the experiences of the user during the prototype evaluation
- The conductor and the note taker write notes on what they see could be improved.
- It is recommended to make Post-it notes with one issue on each post-it note
- Write a note, if the user is: a) Frustrated, b) slowed down; c) not able to complete the task, d) is confused or does not understand, or e) needs help
- Write direct quotes from the users, observations, and interpretations you have on the post-its to extend the understanding of the issue
Gathering the results:
- Make one column for each user on a blackboard/whiteboard marked by: participant 1, participant 2, ….
- Make lines for each task on the blackboard/whiteboard.
- After each prototype evaluation session:
- Write positive comments from the user on post-it notes (preferably green or yellow post-its).
- Write negative comments from the user on post-it notes with a different color (fx. Red or bright pink).
- Put up the post-it notes for each user.
Outcome:
- A table with all post-it-notes with the feedback and issues observed during the prototype evaluation with users
- Answers from users to the questions asked in the prototype evaluation
Step 5 – Evaluation Result Analysis
Instructions:
- Answer the overall questions:
- What can we learn from the High-fi prototype evaluation?
- Do we like to continue developing this product?
- If the team wants to continue, answer these questions:
- What are the major issues to take into consideration after the High-fi prototype evaluation? – List the issues
- Is there anything you would like to add, remove or change in the interface?
- Do you need to change the flow in the prototype?
- Do we think the users will have the experiences we want them to have from the UX goals?
Outcome:
Answers to the above
Step 6 – Next Steps
Instructions:
Preparation for conducting the user tests:
You should answer the questions:
- Based on the work we have done in the KOKEMUX process:
- how would we proceed?
- Would we recommend dropping this idea or continuing?
- If you want to continue developing this idea, consider:
- What do you see as the next steps for working on the product?
- Make a list of action items. It could be:
- You need to go through some of the steps of the KOKEMUX process again
- You want to proceed to the next steps of development
- Make a detailed list of action items that can fit for continuing the work on the product
- This could be a list of user stories that fits into a Product Backlog
- This could be decisions on how to work further on the High-fi prototype
Outcome:
An interpreted outcome of the KOKEMUX process