From User Stories to Flows
Visualisation II - HCD 2021
WORKSHOP BREAKDOWN
1
Recap - 5 minutes
2
Low-fidelity visual prototypes - Part I
3
User focused design research
4
Failing early: the importance of user testing
1
QUICK RECAP OF PART I
5 minutes
What is UX design?
Design for Empathy
User flows
Clickable prototypes
User Experience Design (UX) is...
The process of guiding a user to perform certain ‘tasks’ (eg. connecting a device, capturing data, accessing information) through a product’s virtual or physical interface
DESIGN WITH EMPATHY
A user story...
Captures a description of a product feature (software, hardware or both) from the perspective of the end user.
It is written in the 1st person using plain language.
A user flow...
Make explicit the connections between various interactive elements. Eg. How do you get from one screen to the next to complete a specific task.
Example
“[As a] traveller looking to book accommodations, [I want to] only see listings within my price range [so that] I can save time in my search.”
Wireframe magazine
Clickable prototypes
User flows show what the interaction will look like.
Clickable prototypes show what the interaction will feel like.
2
LOW FIDELITY VISUAL PROTOTYPES - PART II
15 minutes
Work session
Create an interactive prototype of one of the user interactions in your user flow.
15 minutes
3
DESIGN RESEARCH
20 minutes
Introduction to design research - 5 minutes
Work session - 15 minutes
Cultural probes
Card sorting
Participatory mapping
Participatory design sessions
Working in groups of 3-4 people, brainstorm on methods for gaining insights about the group you will be designing for.
15 minutes
4
FAILING EARLY: THE IMPORTANCE OF USER TESTING
20 minutes
Introduction to user testing - 5 minutes
Work session - 15 minutes
User testing
Testing your device or app (or both!) with real users is a critical step in product design.
While no two tests are alike, there are some guidelines for writing and deploying tests.
User testing
Types of tests:
Creating a user test
Step 1: describe the scenario to your tester(s) *in some cases, especially live testing, you might be able to select participants that are part of the target group you are designing for
Step 2: create tasks
Describing a scenario
The purpose of this step is to describe the scenario to the participant as clearly as possible. You need to set the stage before you set tasks :)
Example of a scenario
“Imagine that you have a device that allows you to record the air quality in your community and save the reading to a database. You can access the reading from a web or mobile application, as well as create and view graphs and charts.
In the next couple of screens, we will ask you to make a chart comparing the readings between January 2016 and January 2017.”
Example of test questions
Description question:
“Look at the screen and talk about what you see.”
Example of test questions
Task-based:
“Create a new chart that compares air quality readings between January 2016 and January 2017”
Example of test questions
Evaluative:
“In terms of simplicity, how would you rate the process of creating a comparison chart? 1- Very complicated 2- Difficult 3- Average 4- Easy 5- Super simple”
Example of test questions
Verbal response:
“Was the information presented in a clear way?”
Example of test questions
Verbal response:
“What, if anything, would you improve?”
Write a scenario and one task-based user question for the interaction you prototyped.
15 minutes
RESOURCES
UX Design
Design Methods (research and testing)
Hanington, B. & Martin. B. (2012). Universal Methods of Design: 100 Ways to Research Complex Problems, Develop Innovative Ideas, and Design Effective Solutions. Beverly, MA: Rockport Publishers
RESOURCES
Free wireframe + prototyping tools
Free open source desktop pencil.evolus.vn/
Marvel App (Android and iOS)
User testing