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.9k
UXデザイナーが作るサービスの業務フロー設計
UX MILK All Night 2020 の登壇資料
ずーなり
September 12, 2020
Tweet
Share
Other Decks in Design
See All in Design
ZKK_001.pdf
nicholaspegu
0
830
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
260
portfolio
amitnk
1
120
Haruki_Konaka_Portforio.pdf
haruki556
0
550
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
130
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
260
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
680
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
160
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
110
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
0
450
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
9
7.8k
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
200
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Code Review Best Practice
trishagee
64
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Building Adaptive Systems
keathley
38
2.2k
How GitHub (no longer) Works
holman
311
140k
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