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

プロダクトやサービスを開発したけれど、どうも思った通りにビジネスが伸びない。今風で、使い勝手がよく、わかりやすいデザインにしたけど、それでもユーザーが増えない等、ビジネスにおける課題をお持ちではないでしょうか？
Fixel株式会社は、BtoBやBtoE分野のプロダクトやサービスのUX/UIデザインに10年以上取り組んでおり、デザインの改善でビジネスにおける明確な定量的効果を出してきております。今回はデザインの改善によってビジネスの運命を変えた事例を具体的に説明します。

◆ このような方におすすめ
・BtoB/BtoE向けのプロダクトやサービスのデザイン改善を相談したい
・コンペに負けているが、理由がよく分からない
・見た目が古い、使い勝手が悪いことでプロダクトの全体的な評価が下がっている
・新規のプロダクトやサービスを作っているけど、デザインに不安がある

Transcript

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

   View Slide

2. 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年
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. 2. 事例紹介
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 18
    Before
    

    View Slide

19. 19
    Before
    

    View Slide

20. 20
    Before
    

    View Slide

21. 21
    Before
    

    View Slide

22. 22
    After
    

    View Slide

23. 23
    After
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. 29
    Before
    

    View Slide

30. 30
    After
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. 35
    Before
    

    View Slide

36. 36
    After
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. 42
    Before → After
    

    View Slide

43. 43
    Before → After
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide