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
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
630
Первая беседа о Карте реализации историй
ashapiro
0
290
アフォーダンスとシグニファイア
ryokanakai
1
320
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
890
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
Design System for training program
mct
0
280
ブランドづくりの双視点 - GUILD #31 ブランディング勉強会
yampuu
0
110
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
Карта процесса-опыта. Презентация метода
ashapiro
0
330
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.2k
Dreamia
elsh
0
170
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Faster Mobile Websites
deanohume
305
30k
How STYLIGHT went responsive
nonsquared
95
5.2k
What's new in Ruby 2.0
geeforr
343
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Music & Morning Musume
bryan
46
6.2k
Code Reviewing Like a Champion
maltzj
520
39k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Side Projects
sachag
452
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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