2. Introduction
Yoshinori Wakizaka
Current
UI/UX specialist, Mobile Strategy Section
Past
Usability Engineer, Mobile phone R&D
UCD Specialist, Design department
Member of UX TOKYO
yoshinori wakizaka
@wackiesrock
3. Overview
•UX Tokyo has been conducting many storytelling
workshop during 2012 in Japan.
•Walkthrough full of step for crafting UX story at the
workshop.
•Invent “Experience plotting” to generate a plot of story.
•Trying to utilize storytelling approach for generating
design idea also.
Experience plotting: a method to create a plot of UX story
Generating design ideas
Crafting UX Story Telling UX Story
4. Storytelling workshop by UX Tokyo
•“Storytelling for User Experience” Japanese edition has
issued Dec 2011.
•UX Tokyo has had presentation in seminar and
conducted storytelling workshops.
2012/2 2012/2 2012/5 2012/6 2012/9 2012/10 2012/11
Dev Love World IA Day Info design Design Info design HCD-net Web UX
2012/12 Forum Forum
Association
Japanese Edition
2012
Seminar
Workshop
2012/12 2012/1 2012/2 2012/4 2012/8 2012/11
Web UX Chiba HCD-net Dev LOVE UX Nagoya UX Nagoya
Institute of tech & UX Osaka & UX Kyoto
10. Crafting Story
•Craft story by weaving the ingredients of the story.
Anecdotes Anecdotes Anecdotes Anecdotes
Elements Context Image
Point of view Context Character Images diction
(Persona)
Structure
11. How to utilize UX story for designing
Designing UX by using UX story
12. Steps for creating design idea
•Creating design idea while crafting stories.
Ideation
Generating
Collecting Selecting Crafting &
Iteration
Stories Stories Story Applying
Design idea
ストーリー ストーリー
Context
分類してまとめたストーリー
ストーリー ストーリー Image
Context
UXチーム
Context Image
Image
Image
13. Crafting stories
•Create design idea on the way of crafting UX story.
Anecdotes
Structure Context
Context
of use Images
for the design
Anecdotes
Scenario
for design idea
1. Craft UX story of the beginning. The story can be a set of 2. Generating design idea based on UX
“context of use”, “user insight” or “user scenario”. story. The idea will be part of the story.
15. Proposal of Experience Plotting
•A “semi-structured” method to design a plot (skelton) of
UX story.
•Plot ingredients of the story collected by survey/
research onto story structure.
•Put context of use and images as well as anecdote onto
the plot.
•Creator can add ad-hoc story elements if need more
elements.
•Flexibility; Can be applied to both of crafting UX story or
generating design idea with UX story.
16. Experience plotting
•Storyteller can craft the plot (skeleton) by plotting
ingredients onto story structure.
•Preparing story structure and framework before
crafting UX story, storyteller can craft a quality assured
story effectively.
Context
Context
Image
Anecdotes
Anecdotes
Anecdotes
Story
Structure
Scene A Scene B
Scene D
Scene C
Scene E
17. Procedure of the method
•4 steps to create the plot for crafting UX stories.
Anecdote Anecdote
Anecdote
elements
Anecdote
elements
elements Anecdote
elements
Structure
Anecdote
Anecdote
Anecdote Anecdote
Add ad-hoc elements to the plot 4 1 Collect anecdotes (fragments of stories)
Plot anecdotes onto story structure 3 2 Selecting anecdotes that collected at step1
Anecdote
Anecdote
Anecdote
Anecdote
Anecdote
Structure
Anecdote
Anecdote Anecdote
Anecdote
18. Pattern A: Story Structure framework
•Plot story elements along with story structures (e.g. hero)
contents
emotion
activity
Everyday World
日常の世界 anecdote
context
contents contents
The return The call to
activity 日常世界への帰還
to the world 冒険へのきっかけ
Adventure activity
anecdote anecdote
emotion emotion
context context
Threshold
世界の境界線
contents Achieving
目的の達成 Initiation
はじまりと試練
contents
activity the goal and trials activity
anecdote anecdote
emotion emotion
context context
contents 冒険の世界
World of the Quest
emotion
activity
context
anecdote
20. Experience plot by using the framework
insight
context
Design idea
anecdotes
contents
21. Pattern B: UX matrix framework
•More structured matrix to fill out story elements.
The call to Initiation The return
Plot of the story Adventure and trials
Departures World of the Quest
to the world
Activity Activity Activity Activity Activity Activity
Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity
Activity
Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity
Sub Activity Sub Activity Sub Activity
Context Context of use Context of use Context of use Context of use Context of use Context of use
Contents Contents Contents Contents Contents Contents Contents
Emotion Emotions Emotions Emotions Emotions Emotions Emotions
Device Device touch-point Device touch-point Device touch-point Device touch-point Device touch-point Device touch-point
touch point
22. Pattern B: UX matrix framework (example)
•Craft partial story and generate and plot design ideas.
The call to Initiation The return
Plot of the story Adventure and trials
Departures World of the Quest
to the world
Plan a schedule for
search something launch app book something do activities Finish activities
next month
check with friends launch PC search something book a plan go outside Reflect the activity
Activity
check my schedule visit to website see informations check date/ place do an activity Plan next actions
UX backgroundアプリ起動
story Design idea Design details, Context of use
○○する
Commute Commute Commute
Context or at office or at office or home
home outside outside
Contents contents user uses contents user uses contents user uses contents user uses contents user uses contents user uses
Emotion relax exiting want to get ASAP hard to find out :( Finally !! enjoy reflections
Device mobile mobile
mobile mobile
PC PC PC
touch point
23. Scene
Activity
Context of use
Emotion
Contents
Design idea
WIreframe
UX background story
Design idea Design details, Context of use
○○する
24. Summary
•UX story is output of user experience flow: Workshop
participants can use storytelling approach for ensuring/
empathizing UX in target users.
•UX story is trigger to generate design idea: Trying to
utilize storytelling approach for generating design idea
and combined the idea with UX story.
•Experience plotting for crafting UX story: Using
“experience plotting” enable participants to craft quality
assured UX story more efficiently.
•Telling: Need to cultivate how to tell the UX story.
26. Defining UX requirements
•Break down UX story into activity as user requirements.
UX story
Task step Task step Task step Task step
activity activity activity activity
activity activity activity activity
activity activity activity activity
activity activity activity activity
activity activity activity
27. Defining UX requirements (example)
•Each activity can be user requirements for a development
UX story
launch an app select a feature reserve something do tasks
launch an app check schedule register information confirm schedules
show home screen search something register something confirm something
log in to system select date do payment do something
open my page select place check reservation do something
check updates add options check it at my page
see something register schedules
check a venue
31. Introduction
Yoshinori Wakizaka
Current
UX Specialist, mobile strategy section
Past
Usability Engineer in Mobile Device R&D
UCD Specialist in Design department
Member of UX TOKYO
yoshinori wakizaka
@wackiesrock
32. これまでの活動
•2011年12月、UX Tokyoで「Storytelling for User Experience」を日本語
に翻訳して出版。
•以降、2012年には、ストーリーテリングをテーマに登壇、またワーク
ショップを多数開催。
•UXストーリーをクラフトする方法として、「経験プロット」という手法
を提案。
•「経験プロット」を、UXストーリーを作るだけでなく、UXストーリー
を使ったデザイン方法論としても活用。
経験プロット: UXストーリーのプロットを作成する方法
デザインアイディアを生み出す
UXストーリーの作成 ストーリーテリング
33. UX Tokyoとストーリーテリング
•2011年12月”Storytelling for User Experience”を翻訳出版。
•勉強会、大学でのワークショップによる実践。
2012/12 2012/2 2012/2 2012/5 2012/6 2012/9 2012/10 2012/11
本の上梓 Dev Love World IA Day 情報デザイン デザイン学会 情報デザイン HCD-net Web UX
フォーラム フォーラム
2012
Seminar
Workshop
2012/12 2012/1 2012/2 2012/4 2012/8 2012/11
Web UX 千葉工大 HCD-net Dev LOVE UX Nagoya UX Nagoya
& UX Osaka & UX Kyoto