storytelling ux tokyo-en

Storytelling for UXDDesigning UX by Experience plotting

Yoshinori Wakizaka@UX Tokyo3rd Jan 2013

yoshinori wakizaka@wackiesrock

Current

UI/UX specialist, Mobile Strategy Section

Past

Usability Engineer, Mobile phone R&DUCD Specialist, Design department

Member of UX TOKYO

Yoshinori Wakizaka

Introduction

•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.

Overview

Crafting UX Story Telling UX Story

Generating design ideas

Experience plotting: a method to create a plot of UX story

•“Storytelling for User Experience” Japanese edition has issued Dec 2011.•UX Tokyo has had presentation in seminar and conducted storytelling workshops.

Storytelling workshop by UX Tokyo

2012

2012/12Japanese Edition

2012/12Web UX

2012/2HCD-net

2012/4Dev LOVE

2012/8UX Nagoya& UX Osaka

2012/11UX Nagoya& UX Kyoto

2012/2World IA Day

2012/5Info design

Forum

2012/2Dev Love

2012/6Design

Association

2012/9Info design

Forum

2012/11Web UX

2012/10HCD-net

2012/1Chiba

Institute of tech

Workshop

Seminar

How to utilize UX story for designing

Visualize UX by crafting UX storyHow to utilize UX story for designing

UXチーム

分類してまとめたストーリー

ストーリーストーリー


CollectingStories

SelectingStories

CraftingStories

Image

Context

Context

Context

ImageImage

Image

3 steps to craft UX stories•3 steps to craft UX story.

• Search queries• Server log• Online forum/ community• Record of customer service• Consumer survey in marketing dept.• Log in usability testing

• Hearing from;　 - Users 　 - Business stakeholders　 - Colleagues• Observation

Investigate into log Hearing / Observation

•Stories start from listening.

Collecting Stories

(Quantitative) (Qualitative)

Selection

デモグラフィックス・２０代中盤・どこかの大学生・自宅でウェブを利用している・造園家として働いている

P5 - ジミー

・私はただ、これを自分のホームページとして使います。何故ならウェブでサイン　アップした時に、そのページが表示されるからです。・ストーリー：彼の妹は、インターネットで誤って自分が欲しいものとは別のものを　買ってしまった。この注文をキャンセルしようとしたが、それはできなかった。彼　らは彼女の返品を受け付けようとはしなかった。そこで彼女は、最終的にその商　品の代金をクレジットカードで支払った。それは、さほど高い買い物ではなかっ　たが、家族は皆、この悲惨な物語を彼女から聞かされている。そして長い間、彼　をオンラインから遠ざけている。・試合結果を控えておくのに、ESPNを使っている。友達は、携帯電話にスコアを　送るのに”何か”を使っていて、ジミーもそれを使いたいと思っている。・Youtubeが大好きで、友達と”おばかな”ビデオをたくさん見ている。

お気に入りのページ：ISP（ホームページ）ヤフーESPNTravelocity and ExpediaYouTubeWebMDSportsAuthority

ニーズ：慣れ親しんだサイトでする様に”失敗すること”を恐れないようにしたい

コメント、引用、ストーリー

安心してオンラインバンキングを利用することはできないが、オンラインショップで買い物をするだろう。スポーツの試合結果をみるためにウェブを利用する。ホテルをオンラインで予約したことがある。新しいことはウェブで検索して調べる。

Story board

Persona

UX Story

Ingredients

Anecdotes

Images

Context

Selecting Juicy Stories•Select juicy stories from ingredients.

•Craft story by weaving the ingredients of the story.

Structure

Elements Context Image

Point of view Context Character(Persona)

Images diction

Anecdotes Anecdotes AnecdotesAnecdotes

Crafting Story

Designing UX by using UX storyHow to utilize UX story for designing

UXチーム




CollectingStories

SelectingStories

Generating&

ApplyingDesign idea

Image

Context

Context

Context

ImageImage

Image

Steps for creating design idea•Creating design idea while crafting stories.

CraftingStory

Ideation

Iteration

•Create design idea on the way of crafting UX story.

Crafting stories

StructureContext

Anecdotes

Anecdotes

Scenariofor design idea

Contextof use Images

for the design

1. Craft UX story of the beginning. The story can be a set of “context of use”, “user insight” or “user scenario”.

2. Generating design idea based on UX story. The idea will be part of the story.

Experience PlottingA proposal of framework for creating UX story

•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.

Proposal of 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.

Story Structure

Scene A Scene B

Scene CScene E

Scene D

AnecdotesAnecdotes

Anecdotes

ContextImage

Context

Experience plotting

Procedure of the method

12

43

Collect anecdotes (fragments of stories)

Anecdote Anecdote

AnecdoteAnecdote

AnecdoteAnecdote

Selecting anecdotes that collected at step1

Anecdote Anecdote

AnecdoteAnecdote

AnecdoteAnecdote

Plot anecdotes onto story structure

Structure

Anecdote

Anecdote

Anecdote

Add ad-hoc elements to the plot

Structure

Anecdote

Anecdote

Anecdote

elements

elementselementselements

•4 steps to create the plot for crafting UX stories.

日常の世界

冒険の世界

冒険へのきっかけ

はじまりと試練

日常世界への帰還

目的の達成

世界の境界線

Pattern A: Story Structure framework

Everyday World

The call toAdventure

Initiationand trials

Achievingthe goal

The returnto the world

Threshold

World of the Quest

anecdote

activitycontext

emotioncontents

•Plot story elements along with story structures (e.g. hero)

anecdote

activity

context

emotion

contents

anecdote

activity

context

emotion

contents

anecdote

activity

context

emotion

contents

anecdote

activity

context

emotion

contents

anecdote

activitycontext

emotioncontents

Handwriting used for workshop

Experience plot by using the framework

anecdotes

contents

insight

context

Design idea

•More structured matrix to fill out story elements.

Pattern B: UX matrix framework

Plot of the story

Activity

Context

Contents

Emotion

Devicetouch point

Activity

Sub Activity

Activity

Sub Activity

Activity

Sub Activity

Activity

Sub Activity

Activity

Sub Activity

Activity

Sub Activity

Emotions Emotions Emotions Emotions Emotions Emotions

Device touch-point

Contents Contents Contents Contents Contents Contents


Initiationand trials Departures World of the Quest The return

to the world

Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity Sub Activity

Sub Activity Sub Activity Sub Activity

Device touch-pointDevice touch-pointDevice touch-pointDevice touch-pointDevice touch-point

Context of use Context of use Context of use Context of use Context of use Context of use

Pattern B: UX matrix framework (example)

Plot of the story

Activity

Context

Contents

Emotion

Devicetouch point

contents user uses contents user uses contents user uses contents user uses contents user uses contents user uses

PCmobile

PCmobile

PC mobile mobile

relax exiting want to get ASAP hard to find out :( Finally !! enjoy reflections

Commuteor at office

Commuteor at office

Commuteor home home outside outside

Plan a schedule for next month

check with friends

check my schedule

search something

launch PC

visit to website

launch app

search something

see informations

book something

book a plan

check date/ place

do activities

go outside

do an activity

○○する

Finish activities

Reflect the activity

Plan next actions

アプリ起動

•Craft partial story and generate and plot design ideas.

Design idea Design details, Context of useUX background story

Departures World of the QuestInitiationand trials

The returnto the world


UX background story

○○するDesign idea Design details, Context of use

Activity

Scene

Context of use

Emotion

Contents

Design ideaWIreframe

•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.

Summary

Appendix: Story to requirements

Defining UX requirements

UX storyTask step Task step Task step Task step

activity activity activity activity




activity activity activity

•Break down UX story into activity as user requirements.

UX story

Defining UX requirements (example)

search something

launch an app select a feature reserve something do tasks

launch an app confirm schedules

show home screen

select date

confirm something

log in to system

select place

check it at my page

do something

open my page

add options

register schedules

do something

check updates

see something

check schedule

check a venue

register information

register something

do payment

check reservation

•Each activity can be user requirements for a development

twitter@uxtokyo

facebookuxtokyo

日本語版資料

ストーリーテリングとUXストーリーを使ったUX設計

Yoshinori Wakizaka@UX Tokyo2nd Jan 2013

yoshinori wakizaka@wackiesrock

Current

UX Specialist, mobile strategy section

Past

Usability Engineer in Mobile Device R&DUCD Specialist in Design department

Member of UX TOKYO

Yoshinori Wakizaka

Introduction

•2011年12月、UX Tokyoで「Storytelling for User Experience」を日本語に翻訳して出版。•以降、2012年には、ストーリーテリングをテーマに登壇、またワークショップを多数開催。•UXストーリーをクラフトする方法として、「経験プロット」という手法を提案。•「経験プロット」を、UXストーリーを作るだけでなく、UXストーリーを使ったデザイン方法論としても活用。

これまでの活動

UXストーリーの作成ストーリーテリング

デザインアイディアを生み出す

経験プロット: UXストーリーのプロットを作成する方法

•2011年12月”Storytelling for User Experience”を翻訳出版。

•勉強会、大学でのワークショップによる実践。

UX Tokyoとストーリーテリング

2012

2012/12本の上梓

2012/12Web UX

2012/2HCD-net

2012/4Dev LOVE

2012/8UX Nagoya& UX Osaka

2012/11UX Nagoya& UX Kyoto

2012/2World IA Day

2012/5情報デザインフォーラム

2012/2Dev Love

2012/6デザイン学会

2012/9情報デザインフォーラム

2012/11Web UX

2012/10HCD-net

2012/1千葉工大

Workshop

Seminar

UXストーリーをデザインに活用する方法

ストーリーを使ったUXの可視化UXストーリーをデザインに活用する方法

•UXストーリーをつくる３つのステップ。

ストーリーのつくり方

UXチーム




ストーリーを集める

ストーリーを選ぶ

ストーリーを紡ぐ

Image

Context

Context

Context

ImageImage

Image

•ストーリーは聞くことから始まる。

ストーリーを集める

• サーチログ• サーバログ• オンラインフォーラム / コミュニテイ• カスタマーサービスの記録• トレーニングとセールスデモの記録• マーケティング部門 / 顧客満足度調査• ユーザビリティ調査ログ

• ヒアリング　 - ユーザー　 - ビジネスステークホルダー　 - 同僚• 観察

ログをみる聞く、観察する

•ストーリーを作る前に良い素材を選ぶ。

ストーリーを選ぶ

選ぶ素材

Anecdote（ストーリーの断片）



UXストーリー

•UXのストーリーは大きく３つに分けられる。

UXストーリーの構成要素

構造（パタン）

要素 Context Image

視点コンテクストキャラクター心的イメージ言葉遣い

アネクドート（ストーリーの断片）




UXストーリーを使ったデザインUXストーリーをデザインに活用する方法

UXチーム




CollectingStories

SelectingStories

Generating&

ApplyingDesign idea

Image

Context

Context

Context

ImageImage

Image

デザインアイディアを生み出すステップ•ストーリーを作りながらデザインアイディアを生み出す

CraftingStory

Ideation

Iteration

•ストーリーを作りながらデザインアイディアを考える

ストーリーの作成

ストーリーの構造コンテクスト

アネクドート

アネクドート

デザインアイディアのシナリオ

利用状況デザインの

イメージ

1. まずUXストーリーの前半部分を作る。このストーリーが「利用状況」や「ユーザーインサイト」、「シナリオ」の集まりとなる。

2. ストーリーをベースにデザインアイディアを作る。このアイディアはストーリーの一部になる。

経験プロットUXストーリーを作成するフレームワークの提案

•ストーリーのプロット（設計図）をつくるための方法。

•抽出した要素を構造上にプロットしていく。

•コンテクストやイメージも追加する。

•欠けてる要素は後から追加する。

•UXをそのままストーリーにするのではなく、新しいアイ

ディアを盛り込んだストーリーを作ることもできる。

•ストーリーボードの下地にもなる。

経験プロットについて

•ストーリーの構造の上に、集めてきた素材をプロットしてくことによって、UXストーリーのプロット（骨組み、設計図）を作成する。•UXストーリーを作成する前に、ストーリーの構造とプロットを作成するためのフレームワークを用意する。構造と素材を活用することによって、手早く質や構成が担保されたストーリーを作成することができる。

ストーリーの構造

シーンA シーンB

シーンCシーンE

シーンD

アネクドートアネクドート

アネクドート

コンテクストイメージ

コンテクスト

経験プロットの手順

経験プロットの手順

12

43

アネクドート(ストーリーの断片)を集める




アネクドートを選別する




アネクドートをプロットする

構造

アネクドート

アネクドート

アネクドート

要素を追加する

構造

アネクドート

アネクドート

アネクドート

要素

要素要素要素

日常の世界

冒険の世界



日常世界への帰還

目的の達成

世界の境界線

フレームワークA: ストーリー構造

アネクドート

アクティビティコンテクスト

エモーションコンテンツ

•ストーリーの要素をストーリー構造に沿ってプロットする。

アネクドート

アクティビティ

コンテクスト

エモーション

コンテンツ

アネクドート


コンテクスト

エモーション

コンテンツ

アネクドート


コンテクスト

エモーション

コンテンツ

アネクドート


コンテクスト

エモーション

コンテンツ

アネクドート

アクティビティコンテクスト

エモーションコンテンツ

ワークショップで用いる手書きのテンプレート

英雄構造のフレームワークを用いた経験プロット

アネクドート

コンテンツ

インサイト

コンテクスト

デザインアイディア

•プロットの段階でUXの要素を抽出、整理できる。

フレームワークB: UXマトリクス

ストーリーのプロット


コンテクスト

コンテンツ

キャラクターの気持ち

タッチポイント


サブアクティビティ











喜怒哀楽感想

喜怒哀楽感想

喜怒哀楽感想

喜怒哀楽感想

喜怒哀楽感想

喜怒哀楽感想

デバイスタッチポイント

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ



冒険への出発冒険冒険からの帰還















利用状況利用状況利用状況利用状況利用状況利用状況

•まず部分的にストーリーを作り、デザインアイディアをプロットする。

フレームワークB: UXマトリクス（例）

ストーリーのプロット


コンテクスト

コンテンツ

キャラクターの気持ち

タッチポイント

コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ

旅へのきっかけ


○○へ出発冒険○○からの帰還

PCモバイル

PC

モバイルPC

モバイルモバイル

平常心ワクワクするすぐ予約したいなかなか見つからない

ついに本番余韻を楽しむ

オフィス通勤時間

オフィス通勤時間

通勤時間自宅

自宅屋外屋外

来月の予定を立てる

友だちと連絡

自分のスケジュール確認

○○を調べる

PCを起動する

サイト訪問

アプリを起動する

○○を検索

○○をみる

予約する

○○を予約

場所・日程確認

○○する

○○に行く

○○する

○○する

○○終了○○を付ける

○○を見返す

次の予定を考える

アプリ起動デザインアイディアデザインのディテール、利用状況背景となるUXストーリー

UXバックグラウンドストーリー

○○するデザインアイディアデザインのディテール、利用状況


シーン

利用状況

エモーション

コンテンツ

デザインアイディアワイヤフレーム

•UXストーリーはユーザー経験のフローのアウトプット：ストー

リーテリングによってUXを視覚化し、共有可能なものにした。

•UXストーリーはデザインアイディアを生み出すためのトリガ：

ストーリーテリングのアプローチを用いてデザインアイディアを

生み出し、ストーリーとアイディアを結びつけた。

•UXストーリーを作るための手法「経験プロット」：経験プロッ

トを利用してクオリティが担保されたUXストーリーを効率的に作

ることができるようになった。

•ストーリーの「テリング」への取り組みは今後の課題。

まとめ

付録: ストーリーから要件を抽出する

UXの要件を定義する

UX storyタスクステップ






•UXストーリーをユーザー要件となるアクティビティに分解する。

タスクステップ

















UXストーリー

UXの要件を定義する (例)

○○を検索

アプリ起動機能選択 ○○を予約タスクの実行

アプリ起動スケジュール確認

ホーム表示

日付選択

○○の確認

ログイン

場所選択

マイページで確認

○○の実施

マイページ表示

オプション追加

スケジュール登録

○○の実施

アップデートの確認

○○を閲覧

スケジュール確認

場所の確認

情報の登録

○○の登録

支払い

予約の確認

•それぞれのアクティビティが開発で必要な要件となる。

twitter@uxtokyo

facebookuxtokyo (http://www.facebook.com/groups/123561481030446/)

http://www.facebook.com/groups/123561481030446/

http://www.facebook.com/groups/123561481030446/

storytelling ux tokyo-en

Documents