UXデザイナーが作るサービスの業務フロー設計

by ずーなり

Slide 1

Slide 1 text

UXデザイナーが作るサービスの業務フロー設計 UX MILK All Night 2020.09.12 21:15 - 21:45

Slide 2

Slide 2 text

⾃⼰紹介 IA∕UXデザイナー職種⾼橋⼀成⽒名株式会社オロ会社名部署 DX事業部 UXチーム職歴 WEBデザイナーディレクター IA∕UXデザイナー

Slide 3

Slide 3 text

業務内容オロではデジタル戦略の策定、設計・開発、広告プロモーションまでワンストップで⾏っています 3 ワークショップ実施、体験設計、情報設計、システムが絡むディレクションを担当。ふんわりした要件を具体的にすることが得意です

Slide 4

Slide 4 text

⽬次 4 前提についてフローチャートを使った業務フロー設計プロジェクトの進め⽅について sli.doの質疑応答 1 2 3 4

Slide 5

Slide 5 text

5 UXデザインはユーザーを理解するところから始まる Photo by Ryoji Iwata on Unsplash

Slide 6

Slide 6 text

6 前提としてニーズが分かった上で依頼される案件も多いスキームの設計やプロダクトの開発⽅法、予算やスケジュールを確認されるところからスタート

Slide 7

Slide 7 text

7 今回はそのような案件に対してUXを考える⼿法をご紹介 POC時の UXデザイン⼿法です概念実証。新しいプロジェクトが本当に実現可能かどうか、効果や効⽤、技術的な観点から検証する⾏程。スモールスタートで始める POC・・・

Slide 8

Slide 8 text

8 前提についてプロジェクトの進め⽅について sli.doの質疑応答 1 2 3 4 フローチャートを使った業務フロー設計

Slide 9

Slide 9 text

9 フローチャートを使った業務フロー設計

Slide 10

Slide 10 text

フローチャートの代表例アクティビティ図ユーザーのシステム上での⾏動を把握しやすい 10

Slide 11

Slide 11 text

フローチャートの代表例ユースケース図システムでできることが把握しやすい 11

Slide 12

Slide 12 text

フローチャートの代表例シーケンス図データの流れが把握しやすい 12

Slide 13

Slide 13 text

フローチャートの代表例視点ユーザーの⾏動データの流れ処理の順序 13 システム中⼼の書き⽅

Slide 14

Slide 14 text

UX視点のフローチャート 14 UXからの視点ユーザーの⾏動データの流れ処理の順序ユーザーの⾏動が中⼼の書き⽅

Slide 15

Slide 15 text

15 モバイルオーダーでの注⽂フローチャート

Slide 16

Slide 16 text

16 Photo by Douglas Bagg on Unsplash

Slide 17

Slide 17 text

17 Photo by Edward Franklin on Unsplash

Slide 18

Slide 18 text

18 モバイルオーダーでの注⽂フローチャート UXフロー図

Slide 19

Slide 19 text

質問 19 どこから書くんですか？

Slide 20

Slide 20 text

回答 20 ステークホルダーを書くユーザー管理者オペレーター店舗担当者 1 それぞれの⾏動を書くオーダーを開始する店舗を選択する商品を選択する数量を変更するカスタマイズする 2 注⽂を受ける商品をつくる完了登録する商品を袋に詰める受け渡しカウンターに置く受付番号を確認する

Slide 21

Slide 21 text

回答 21 ステークホルダーが表⽰する画⾯を書くユーザー管理者オペレーター店舗担当者 3 機能やシステムの振る舞いを書く 4 店舗画⾯を表⽰商品画⾯を表⽰オーダー受付画⾯を表⽰店舗登録画⾯を表⽰ユーザー登録画⾯を表⽰履歴画⾯を表⽰商品登録画⾯を表⽰オーダー履歴画⾯を表⽰クーポン発⾏注⽂履歴再オーダー⼈気ランキング季節のメニューポイントメール送信 GPS取得 PUSH通知

Slide 22

Slide 22 text

回答 22 ユーザー管理者店舗担当者ユーザー画⾯店舗担当⽤画⾯管理画⾯パーツをならべる 5 オーダーを開始する店舗を選択する商品を選択する店舗画⾯を表⽰商品画⾯を表⽰店舗登録画⾯を表⽰商品登録画⾯を表⽰オペレーターオペレーター画⾯店舗を登録する商品を登録するシステムメール送信 GPS取得

Slide 23

Slide 23 text

回答 23 ユーザー店舗担当者ユーザー画⾯店舗担当⽤画⾯⽮印を使ってフローをつくる 6 オーダーを開始する店舗を選択する商品を選択する店舗画⾯を表⽰商品画⾯を表⽰管理者管理画⾯店舗登録画⾯を表⽰商品登録画⾯を表⽰オペレーターオペレーター画⾯店舗を登録する商品を登録するシステムメール送信 GPS取得

Slide 24

Slide 24 text

24 モバイルオーダーでの注⽂フローチャートアクティビティ図 UXフロー図

Slide 25

Slide 25 text

UX視点のフローチャート UXフロー図ユーザーの⾏動フローを把握しやすい 25

Slide 26

Slide 26 text

26 UXフロー図店舗を選択する・GPSを取得し近隣店舗を表⽰する or ・都道府県のプルダウンを表⽰するカスタマイズする 1. 店舗と同様の注⽂⽅法で選べる 2. カスタマイズ状態を表⽰する時間を確認する・受付番号と共に商品ができあがる時間を表⽰するオーダーを確認する 1. 店舗の注⽂画⾯に表⽰する 2. オーダーの優先順位を表⽰するモバイルオーダーでの注⽂フローチャート

Slide 27

Slide 27 text

27 UXフロー図ステークホルダーや関係ツール全体の⾏動や振る舞いを⼀覧化・予算感が⾒える・フェーズが⽴てられるモバイルオーダーでの注⽂フローチャート

Slide 28

Slide 28 text

28 シェアバイクでのレンタルフローチャート

Slide 29

Slide 29 text

29 アクティビティ図 UXフロー図シェアバイクでのレンタルフローチャート

Slide 30

Slide 30 text

30 UXフロー図置き場を選択する・GPSを取得し近隣バイク置き場を表⽰する or ・都道府県のプルダウンを表⽰する読み取りをする・バイクのQRコードを読み取る or ・バイクの番号を読み取る⽬的地を選択する 1. ワンウェイ式では到着地の置き場確保が必要 2. 選択した場所が変更できるようにするレンタルバイクを表⽰する 1. レンタル状況を確認できるよう管理画⾯を⽤意 2. 未返却のバイクを探せるようにするシェアバイクでのレンタルフローチャート

Slide 31

Slide 31 text

31 UXフロー図意識しながら書くと良いこと・必要な機能を確認しながら・ユーザーのタッチポイントを考えながら・ユーザーの⾏動を追いながらシェアバイクでのレンタルフローチャート

Slide 32

Slide 32 text

32 前提についてフローチャートを使った業務フロー設計 sli.doの質疑応答 1 2 3 4 プロジェクトの進め⽅について

Slide 33

Slide 33 text

サービスの全体像∕ユーザーの理解 33 サービス全体をイメージする必要なフローや機能を⾒つけるワイヤーフレーム・モックを作る機能・画⾯・フローを考える機能・画⾯・フローを調整するサービスの全体像からアプローチつくるものがある程度決まっていて、ユーザーが良いと感じるものを考える UXフロー図ワイヤーフレーム実装

Slide 34

Slide 34 text

ユーザーの⾏動を観察するユーザーのインサイトを⾒つけるサービスのアイデアを考えるサービスの全体像∕ユーザーの理解ユーザーの理解からアプローチ 34 ユーザーの課題を⾒つける機能・画⾯・フローを考えるユーザーのインサイトを⾒つけて、つくるものを考えるインタビューペルソナエクスペリエンスマップワイヤーフレーム機能設計

Slide 35

Slide 35 text

サービスの全体像∕ユーザーの理解全体像からのアプローチ 35 まずは想定できる範囲でサービス全体を考えるサービス全体から考えると優先順位が判断しやすい必要なところでユーザーをリサーチすれば良い Photo by Ivan Bandura on Unsplash

Slide 36

Slide 36 text

まとめ 36 UXフロー図は・ステークホルダー∕⾏動∕画⾯∕機能をまずは考えてみる・システム上での⾏動だけでなく、リアルでの⾏動も含める・サービスの全体像から考えると計画が⽴てやすい

Slide 37

Slide 37 text

宣伝 37 オロの広報note ⾼橋∕UXチームnote https://note.com/oro_official https://note.com/zooooonari

Slide 38

Slide 38 text

38 前提についてプロジェクトの進め⽅についてフローチャートを使った業務フロー設計 1 2 3 4 sli.doの質疑応答

Slide 39

Slide 39 text

39 Fin