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
5.1k
UXデザイナーが作るサービスの業務フロー設計
UX MILK All Night 2020 の登壇資料
ずーなり
September 12, 2020
Tweet
Share
Other Decks in Design
See All in Design
The Very Small Creatures - dressing up warm sequence
lizziestoryboards
0
220
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
300
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
120
LLMによるRAG評価用合成テストデータの生成
licux
6
720
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
540
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
180
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
890
横断組織デザイナーの働き方
mixi_design
PRO
0
340
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.7k
クライアントワークにおける UXリサーチの実践
kozotaira
0
370
デザイナーとPMの両ロール_3つのポイント
toy1618
1
200
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
69k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Rails Girls Zürich Keynote
gr2m
94
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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