Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UXデザイナーが作るサービスの業務フロー設計
Search
ずーなり
September 12, 2020
Design
3
4.8k
UXデザイナーが作るサービスの業務フロー設計
UX MILK All Night 2020 の登壇資料
ずーなり
September 12, 2020
Tweet
Share
Other Decks in Design
See All in Design
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
310
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
460
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.1k
WHAT ARE ME?
takuro_nakajima
PRO
0
1.9k
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
260
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
410
PdMを始めたUIデザイナーのリアルな課題
muture
0
720
Building a mindful relationship with digital media for zillennials prone to anxiety
mastervicedesign
0
200
Sci-Fi: Descenso
elrtovar
0
260
Cхематизация процессов и пользовательского опыта с Картой процесса-опыта
ashapiro
0
240
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
310
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
970
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
48
7.1k
Building an army of robots
kneath
302
42k
Writing Fast Ruby
sferik
623
60k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Documentation Writing (for coders)
carmenintech
65
4.3k
Making Projects Easy
brettharned
113
5.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing Experiences People Love
moore
138
23k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Transcript
UXデザイナーが作るサービスの 業務フロー設計 UX MILK All Night 2020.09.12 21:15 - 21:45
⾃⼰紹介 IA∕UXデザイナー 職種 ⾼橋 ⼀成 ⽒名 株式会社オロ 会社名 部署 DX事業部
UXチーム 職歴 WEBデザイナー ディレクター IA∕UXデザイナー
業務内容 オロではデジタル戦略の策定、設計・開発、 広告プロモーションまでワンストップで⾏っています 3 ワークショップ実施、体験設計、情報設計、システム が絡むディレクションを担当。ふんわりした要件を具 体的にすることが得意です
⽬次 4 前提について フローチャートを使った業務フロー設計 プロジェクトの進め⽅について sli.doの質疑応答 1 2 3 4
5 UXデザインは ユーザーを理解する ところから始まる Photo by Ryoji Iwata on Unsplash
6 前提として ニーズが分かった上で依頼される案件も多い スキームの設計やプロダクトの開発⽅法、予算やスケジュー ルを確認されるところからスタート
7 今回はそのような案件に対してUXを考える⼿法をご紹介 POC時の UXデザイン⼿法です 概念実証。新しいプロジェクトが本当に実現可能かどうか、 効果や効⽤、技術的な観点から検証する⾏程。スモールスタートで始める POC・・・
8 前提について プロジェクトの進め⽅について sli.doの質疑応答 1 2 3 4 フローチャートを使った業務フロー設計
9 フローチャート を使った業務フロー設計
フローチャートの代表例 アクティビティ図 ユーザーの システム上での ⾏動を 把握しやすい 10
フローチャートの代表例 ユースケース図 システムで できることが 把握しやすい 11
フローチャートの代表例 シーケンス図 データの流れが 把握しやすい 12
フローチャートの代表例 視点 ユーザーの⾏動 データの流れ 処理の順序 13 システム中⼼の書き⽅
UX視点のフローチャート 14 UXからの視点 ユーザーの⾏動 データの流れ 処理の順序 ユーザーの⾏動が 中⼼の書き⽅
15 モバイルオーダーでの 注⽂フローチャート
16 Photo by Douglas Bagg on Unsplash
17 Photo by Edward Franklin on Unsplash
18 モバイルオーダーでの注⽂フローチャート UXフロー図
質問 19 どこから書くんですか?
回答 20 ステークホルダーを 書く ユーザー 管理者 オペレーター 店舗担当者 1 それぞれの⾏動を
書く オーダーを 開始する 店舗を 選択する 商品を 選択する 数量を 変更する カスタマイ ズする 2 注⽂を 受ける 商品を つくる 完了登録 する 商品を 袋に詰める 受け渡し カウンター に置く 受付番号を 確認する
回答 21 ステークホルダーが 表⽰する画⾯を書く ユーザー 管理者 オペレーター 店舗担当者 3 機能やシステムの
振る舞いを書く 4 店舗画⾯を 表⽰ 商品画⾯を 表⽰ オーダー受付 画⾯を表⽰ 店舗登録 画⾯を表⽰ ユーザー登録 画⾯を表⽰ 履歴画⾯を 表⽰ 商品登録 画⾯を表⽰ オーダー履歴 画⾯を表⽰ クーポン 発⾏ 注⽂履歴 再オーダー ⼈気 ランキング 季節の メニュー ポイント メール送信 GPS取得 PUSH通知
回答 22 ユーザー 管理者 店舗担当者 ユーザー 画⾯ 店舗担当⽤ 画⾯ 管理画⾯
パーツをならべる 5 オーダーを 開始する 店舗を 選択する 商品を 選択する 店舗画⾯を 表⽰ 商品画⾯を 表⽰ 店舗登録 画⾯を表⽰ 商品登録 画⾯を表⽰ オペレーター オペレーター 画⾯ 店舗を 登録する 商品を 登録する システム メール送信 GPS取得
回答 23 ユーザー 店舗担当者 ユーザー 画⾯ 店舗担当⽤ 画⾯ ⽮印を使ってフローをつくる 6
オーダーを 開始する 店舗を 選択する 商品を 選択する 店舗画⾯を 表⽰ 商品画⾯を 表⽰ 管理者 管理画⾯ 店舗登録 画⾯を表⽰ 商品登録 画⾯を表⽰ オペレーター オペレーター 画⾯ 店舗を 登録する 商品を 登録する システム メール送信 GPS取得
24 モバイルオーダーでの注⽂フローチャート アクティビティ図 UXフロー図
UX視点のフローチャート UXフロー図 ユーザーの ⾏動フローを 把握しやすい 25
26 UXフロー図 店舗を選択する ・GPSを取得し近隣店舗を表⽰する or ・都道府県のプルダウンを表⽰する カスタマイズする 1. 店舗と同様の注⽂⽅法で選べる 2.
カスタマイズ状態を表⽰する 時間を確認する ・受付番号と共に商品が できあがる時間を表⽰する オーダーを確認する 1. 店舗の注⽂画⾯に表⽰する 2. オーダーの優先順位を表⽰する モバイルオーダーでの注⽂フローチャート
27 UXフロー図 ステークホルダーや関係ツール 全体の⾏動や振る舞いを⼀覧化 ・予算感が⾒える ・フェーズが⽴てられる モバイルオーダーでの注⽂フローチャート
28 シェアバイクでの レンタルフローチャート
29 アクティビティ図 UXフロー図 シェアバイクでのレンタルフローチャート
30 UXフロー図 置き場を選択する ・GPSを取得し近隣バイク置き場を表⽰する or ・都道府県のプルダウンを表⽰する 読み取りをする ・バイクのQRコードを読み取る or ・バイクの番号を読み取る
⽬的地を選択する 1. ワンウェイ式では到着地の置き場確保が必要 2. 選択した場所が変更できるようにする レンタルバイクを表⽰する 1. レンタル状況を確認できるよう管理画⾯を⽤意 2. 未返却のバイクを探せるようにする シェアバイクでのレンタルフローチャート
31 UXフロー図 意識しながら書くと良いこと ・必要な機能を確認しながら ・ユーザーのタッチポイントを 考えながら ・ユーザーの⾏動を追いながら シェアバイクでのレンタルフローチャート
32 前提について フローチャートを使った業務フロー設計 sli.doの質疑応答 1 2 3 4 プロジェクトの進め⽅について
サービスの全体像∕ユーザーの理解 33 サービス全体をイメージする 必要なフローや機能を⾒つける ワイヤーフレーム・モックを作る 機能・画⾯・フローを考える 機能・画⾯・フローを調整する サービスの全体像からアプローチ つくるものがある程度決まっていて、 ユーザーが良いと感じるものを考える
UXフロー図 ワイヤーフレーム 実装
ユーザーの⾏動を観察する ユーザーのインサイトを⾒つける サービスのアイデアを考える サービスの全体像∕ユーザーの理解 ユーザーの理解からアプローチ 34 ユーザーの課題を⾒つける 機能・画⾯・フローを考える ユーザーのインサイトを⾒つけて、つくるものを考える インタビュー
ペルソナ エクスペリエンスマップ ワイヤーフレーム 機能設計
サービスの全体像∕ユーザーの理解 全体像からのアプローチ 35 まずは想定できる範囲でサービス全体を考える サービス全体から考えると優先順位が判断しやすい 必要なところでユーザーをリサーチすれば良い Photo by Ivan Bandura
on Unsplash
まとめ 36 UXフロー図は ・ステークホルダー∕⾏動∕画⾯∕機能をまずは考えてみる ・システム上での⾏動だけでなく、リアルでの⾏動も含める ・サービスの全体像から考えると計画が⽴てやすい
宣伝 37 オロの広報note ⾼橋∕UXチームnote https://note.com/oro_official https://note.com/zooooonari
38 前提について プロジェクトの進め⽅について フローチャートを使った業務フロー設計 1 2 3 4 sli.doの質疑応答
39 Fin