4つの事例から分かるビジネスを成功させたUXデザイン

Slide 1

Slide 1 text

4つの事例から分かるビジネスを成功させたUXデザイン SIer/情シス向け「ITとデザインは仲良し！」シリーズ第15回 2022/09/15

Slide 2

Slide 2 text

2 今日のスピーカの紹介 2 金成哲 Roy Kim UX Engineer & CEO of Fixel Inc. 商社マンプログラマー ITコンサルタント/アーキテクトプロダクトオーナーアプリ開発者/システムアーキテクト UXデザイナー、サービスデザイナーグランスフィア株式会社（現 GMOシステムコンサルティング株式会社）大林コーポレーション（株） BEA Japan Oracle Japan EMC Japan Agentec株式会社 NCデザイン＆コンサルティング株式会社（現NCDC株式会社） Fixel株式会社キャリア 5年 10年 11年

Slide 3

Slide 3 text

3 今日のスピーカの紹介 3 金成哲 Roy Kim UX Engineer & CEO of Fixel Inc. 営業テクノロジー UX/UIデザイン経営 5年 10年 10年ある程度は、俯瞰できます！

Slide 4

Slide 4 text

今日話す内容 1. Fixelのデザインの進め方 2. 事例紹介 ①：勤怠管理システム ②：承認管理システム ③：保険会社のコールセンターシステム ④：業務用ファイル共有システム 3. 結論：デザインはビジネス成敗の鍵！

Slide 5

Slide 5 text

1. Fixelのデザインの進め方

Slide 6

Slide 6 text

6 Fixelのやっている仕事仕事の種類別割合業務システム製造業システム UXHub開発システムのUIが専門で、よくあるLP作成などの仕事はやっておりません。

Slide 7

Slide 7 text

7 FixelのUXデザインプロセス ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整反復コンテキスト分析ジャーニーマップ作成メンタルモデル分析ワイヤーフレーム作成ユーザーテスト評価と改善ゴールと範囲の設定評価基準の検討ペルソナ定義 ① 計画フェーズ ② 分析フェーズ ③ 実証フェーズプロトタイピング実装フェーズに続く

Slide 8

Slide 8 text

8 ゴールと範囲の設定  プロジェクトの目的と対象範囲を明文化する  UXデザインで達成すべき使用者経験の特徴とレベルを決める  必要に応じてプロジェクトの範囲を見直すゴールと範囲の設定計画フェーズ [UX Honeycomb] [UX Pyramid]

Slide 9

Slide 9 text

9 ゴールと範囲の設定  プロジェクトの目的と対象範囲を明文化する  UXデザインで達成すべき使用者経験の特徴とレベルを決める  必要に応じてプロジェクトの範囲を見直すゴールと範囲の設定計画フェーズ [UX Honeycomb] [UX Pyramid] 各プロジェクトのビジネスにおける課題を明確に定義し、改善方針とKPI/KGIを共有する

Slide 10

Slide 10 text

10 ゴールと範囲の設定ゴールと範囲の設定計画フェーズ [UX Pyramid] 無駄に「100点満点」を狙わない！・先ずは競合に勝てればいい。・ROIを徹底的に考えて、・定めるターゲットレベルを明確に。

Slide 11

Slide 11 text

11 評価基準の検討  UXデザイン作業の成果を数字で測れる項目で定義する  比較のために現在のデータを取得し、目標値を定義する（Before/After比較）  必要なデータの取得ができていない場合はデータ取得方法を追加することを検討  価格変更や機能追加など、UXデザイン以外の影響要素を可能な限り分離した方がより厳密な評価測定ができる評価基準の検討計画フェーズこんな挿絵は飾り！データが取れれば、ログ収集や Excelによる分析だけでも十分！

Slide 12

Slide 12 text

12 B2Cでないからこそ、考慮すべきこと ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整反復コンテキスト分析ジャーニーマップ作成メンタルモデル分析ワイヤーフレーム作成ユーザーテスト評価と改善ゴールと範囲の設定評価基準の検討ペルソナ定義 ① 計画フェーズ ② 分析フェーズ ③ 実証フェーズプロトタイピング実装フェーズに続く必要な情報はほぼ決まっている初心者向けvs熟練者向け？サービスブループリントの方が有効！段階別WFの作成、エンジニアの参加３人３回まで KPIとの相関で判断軽めに！ステータスが大事！

Slide 13

Slide 13 text

13  標準プロセスはただの参考  各タスクの意味を理解して、案件ごとにプロセスをカスタマイズする  常に課題を意識し、その改善策としてのデザインを行う  全てのデザイン判断は課題と効果を基準に行う  無駄を削ぎ落とす  実装の制約を常に考慮する  絵に描いた餅にしたら、仕事が増えるだけ  エンジニアの確認を取りながらデザインを進めることで手戻りを最小限に  必要に応じて技術検証を並行しながら進める全てのプロジェクトは別物！

Slide 14

Slide 14 text

2. 事例紹介

Slide 15

Slide 15 text

15 ①勤怠管理システム：King Of Time

Slide 16

Slide 16 text

16  状況  業界トップのマーケットシェアを持っていたけど、強力な二番手の登場  元ゲーム会社である競合は優れたデザインを武器に急成長  歴史のあるシステムなので５００を超える画面を対象にデザイン改善を決断  ５年間のプロジェクトを想定し、デザインパートナーを慎重に選ぶことに  ６つのデザイン会社に提案依頼、３つの会社に絞って１ヶ月間の有償依頼  その上、１社に絞ることを決議  Fixelが選ばれた理由  競合のデザイン評価によるゴールの明確化（相手が６０点なら７０点取れれば勝ち）  対象画面を５０以下に絞ることで期間を６ヶ月に短縮  サービス選定プロセスを確認し、試用期間中によく見られる画面を特定し、改善する案件概要

Slide 17

Slide 17 text

17 進め方区分１ヶ月目２ヶ月目３ヶ月目４ヶ月目５ヶ月目〜12ヶ月目 Fixel 顧客現状分析課題定義ワイヤフレーム作成ビジュアルデザインフロントエンドコードサンプル提示レクチャー実施実装改善方針提示システムアーキテクチャ検討ユーザーテストユーザーテスト  早期に改善方針を提示（銀行のUIをサービスに借用）  ユーザーテストによる仮説検証  実装へのインパクトは最小限に抑える

Slide 18

Slide 18 text

18 Before

Slide 19

Slide 19 text

19 Before

Slide 20

Slide 20 text

20 Before

Slide 21

Slide 21 text

21 Before

Slide 22

Slide 22 text

22 After

Slide 23

Slide 23 text

23 After

Slide 24

Slide 24 text

24  単月の新規顧客獲得が180％に向上、売上は4年で３倍に  デザインの効果が認められ、顧客の内部にデザインチーム新設  デザイナーの採用・育成を支援得られた効果

Slide 25

Slide 25 text

25 2回目の改善で情報の一覧性をあげ、既存顧客の満足度アップ Before 改善版リリース再度の改善

Slide 26

Slide 26 text

26 ②承認管理システム：楽々ワークフロー

Slide 27

Slide 27 text

27  状況  日本では業界トップのマーケットシェアを持っていたけど、アメリカの関連会社によって採用を拒否される  使い勝手が悪く、他に無償で使えるツールの方が使いやすい。  デザインがカッコ悪い  １ヶ月の改善期間を設けてもらって再挑戦することに  他社のシステムがアメリカの関連会社に混じって来ると、全体的なIT統制の観点からよくないので、できるだけ対応したい  他の海外のマーケットから同様の反応が出る恐れがあるので、対応が必要  Fixelが選ばれた理由  業務システムのデザインの実績が豊富にある  デザインスプリントなど、超短期間の対応が可能案件概要

Slide 28

Slide 28 text

28 進め方区分１週間目２週間目３週間目４週間目 Fixel 顧客現状分析課題定義 PC版ワイヤフレーム作成 PC版ビジュアルデザイン実装  パソコン版とスマホ版を各１週間でデザイン改善  プロダクトオーナー、エンジニアと密にコラボ（＝缶詰め）  パターン化による横展開（プロダクトのテンプレートが充実していたからこそ、短期間の改修が可能に）スマホ版ワイヤフレーム作成スマホ版ビジュアルデザイン情報提供受注機内で完成

Slide 29

Slide 29 text

29 Before

Slide 30

Slide 30 text

30 After

Slide 31

Slide 31 text

31  アメリカの案件獲得  社内で「成功事例」として研究対象に。  進め方の分析・レポート提示  中国など、海外マーケットでは新デザインで展開  （残念ながら）日本では既存のデザインで提供し続ける  既存顧客へのインパクトを考慮得られた効果

Slide 32

Slide 32 text

32 ③保険会社のコールセンターシステム：CallView

Slide 33

Slide 33 text

33  状況  数百人規模のコールセンターを日本各地で運営中  業務に使うシステムが必要に応じてバラバラに構築され、１件のコール応答に１０個くらいのシステムを立ち上げる必要があり、業務効率が低下  業務の難易度の他に、システムの使い方が壁になって、コールセンター要員のスキルセットが増えない  システムの理解ができず、離職するケースも生じる  システムの改修・統合と共にUX/UIデザインを改善して、業務効率を上げたい  業務効率＝１件の電話への対応にかかる全ての時間  Fixelが選ばれた理由  業務の特性を理解したデザイン改善案を提案段階から提示  デザインだけではなく、大規模業務システムの統合に対する技術的理解案件概要

Slide 34

Slide 34 text

34 進め方区分１ヶ月目２ヶ月目３ヶ月目４ヶ月目５ヶ月目〜12ヶ月目 Fixel 顧客 SIer 業務トレーニングを受講ワイヤフレーム作成ビジュアルデザインレビュー・フィードバック改善方針提示ユーザーテストユーザーテスト  業務が複雑で、システムも数も多いのでコールセンター要員対象のトレーニングを受講  複数のシステムからの制約があるのでデザインとSIerの確認を並行する現状分析課題定義講義・情報提供レビュー・フィジビリティテスト業務理解確認

Slide 35

Slide 35 text

35 Before

Slide 36

Slide 36 text

36 After

Slide 37

Slide 37 text

37  電話応対を１画面で完結できるようにすることで業務効率アップ  電話対応（2分）事後処理（2分）合計4分を要していたが  電話対応（1分）事後処理（1分）合計2分の半分に短縮  コールセンター要員の教育コストが半減  数百名のスタッフのうち、外部委託分を契約終了・他の業務へ移動  人件費の低減及び効率活用が可能に得られた効果

Slide 38

Slide 38 text

38  2021年IT賞受賞  社長賞受賞受賞歴

Slide 39

Slide 39 text

39 ④業務用ファイル共有サービス：@Tovas

Slide 40

Slide 40 text

40  状況  2004年から提供している、業務用ファイル共有システムのデザインを改善したい  リリース当時はデザインに対する意識が低く、エンジニア主導で画面を作っている  顧客の要望に応じて随時機能追加をしてあるのでつぎはぎの画面になっており、簡単な操作にも迷うユーザーが多くなってきた  最近の若い人々を意識したデザイン改善をしたい。しかし、長く使っているユーザーが多いので、デザイン変更の衝撃を最小限にしたい  Fixelが選ばれた理由  業務システムの経験が豊富  既存システムのデザイン変更に伴う衝撃とその対応方法に優れている  デザインシステムの提供でフロントエンドの品質向上はもちろん、コストを低減できる  フロントエンドの費用を一部をデザイン改善に転用可能案件概要

Slide 41

Slide 41 text

41 進め方区分１ヶ月目２ヶ月目３ヶ月目４ヶ月目５ヶ月目 Fixel 顧客 SIer 課題整理 UX分析ワイヤフレーム作成デザインシステム作成レビュー・フィードバック改善方針提示ユーザーテストユーザーテスト  デザインシステム作成・活用によるフロントエンドの効率アップ  システムのリリース前に営業によるデザイン変更案内（目的とメリットの説明）  マニュアル・ヘルプ文書など、顧客支援体制の整備による準備を徹底に情報提供レビュー・フィジビリティテストワイヤフレーム改善ビジュアルデザイン実装顧客への案内・マニュアル作成など

Slide 42

Slide 42 text

42 Before → After

Slide 43

Slide 43 text

43 Before → After

Slide 44

Slide 44 text

44  顧客の反応・評価が向上  業務システムとしては珍しく、デザイン変更に対する不満の声はほぼなかった  スマホ対応でサービスの活用度を上げることができた  デザインシステムでフロントエンド開発の工数が低減・品質が上がった  デザインシステムに含まれたUIコンポーネントを活用することで、長期的なメリットが得られる見込み  予期してなかった効果！  問い合わせの数が減ったので、ラーニングコストが低減得られた効果

Slide 45

Slide 45 text

3. 結論デザインはビジネス成敗の鍵！

Slide 46

Slide 46 text

46 DX  全てのビジネスにおけるユーザーとの接点にはデザインが必要  機能や価格だけで差を付けられることは難しくなった時代  例えば、既存のサービスはもちろん、新規ビジネスを扱うDXでも、デザインが成敗を左右する  デザインに対する投資はできるだけ早期に、デザインと並走する体制を設けるのが最も効率的  後になって、「ここ、デザインして」と言われてもできることが限られる  デザインをうまく活用するものが勝つ！ビジネスのUIはデザインユーザーデザインビジネスプロセスイノベーション新しいテクノロジー

Slide 47

Slide 47 text

最後に  デザインシステムに興味があるデザイナー・エンジニアを募集しております。  業務システムのUX/UIデザインに興味があるデザイナー・エンジニアを募集しています。  周りに興味のありそうな方に、是非ご紹介ください。  申し込みは弊社のウェブサイトからお願いします！ https://fixel.co.jp/blog/recruit-20210929/

Slide 48

Slide 48 text

MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A

Slide 49

Slide 49 text

MAKE DESIGN EASY SIer/情シスのデザインパートナーありがとうございました！アンケート記入のお願い