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

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

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

Transcript

1. 4つの事例から分かる ビジネスを成功させたUXデザイン SIer/情シス向け「ITとデザインは仲良し！」シリーズ 第15回 2022/09/15
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年
3. 3 今日のスピーカの紹介 3 金 成哲 Roy Kim UX Engineer & CEO of Fixel Inc. 営業 テクノロジー UX/UIデザイン 経営 5年 10年 10年 ある程度は、俯瞰できます！
4. 今日話す内容 1. Fixelのデザインの進め方 2. 事例紹介 ①：勤怠管理システム ②：承認管理システム ③：保険会社のコールセンターシステム ④：業務用ファイル共有システム 3. 結論：デザインはビジネス成敗の鍵！
5. 1. Fixelのデザインの進め方
6. 6 Fixelのやっている仕事 仕事の種類別割合 業務システム 製造業システム UXHub開発 システムのUIが専門で、 よくあるLP作成などの仕事は やっておりません。
7. 7 FixelのUXデザインプロセス ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 ① 計画フェーズ ② 分析フェーズ ③ 実証フェーズ プロトタイピング 実装フェーズ に続く
8. 8 ゴールと範囲の設定  プロジェクトの目的と対象範囲を明文化する  UXデザインで達成すべき 使用者経験の特徴とレベルを決める  必要に応じてプロジェクトの範囲を見直す ゴールと 範囲の設定 計画フェーズ [UX Honeycomb] [UX Pyramid]
9. 9 ゴールと範囲の設定  プロジェクトの目的と対象範囲を明文化する  UXデザインで達成すべき 使用者経験の特徴とレベルを決める  必要に応じてプロジェクトの範囲を見直す ゴールと 範囲の設定 計画フェーズ [UX Honeycomb] [UX Pyramid] 各プロジェクトのビジネスに おける課題を明確に定義し、 改善方針とKPI/KGIを共有する
10. 10 ゴールと範囲の設定 ゴールと 範囲の設定 計画フェーズ [UX Pyramid] 無駄に「100点満点」を狙わない！ ・先ずは競合に勝てればいい。 ・ROIを徹底的に考えて、 ・定めるターゲットレベルを明確 に。
11. 11 評価基準の検討  UXデザイン作業の成果を数字で測れる項目で定義する  比較のために現在のデータを取得し、目標値を定義する（Before/After比較）  必要なデータの取得ができていない場合は データ取得方法を追加することを検討  価格変更や機能追加など、UXデザイン以外の影響要素を可能な限り分離した 方がより厳密な評価測定ができる 評価基準の検討 計画フェーズ こんな挿絵は飾り！ データが取れれば、ログ収集や Excelによる分析だけでも十分！
12. 12 B2Cでないからこそ、考慮すべきこと ※プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整 反復 コンテキスト分析 ジャーニーマップ 作成 メンタルモデル 分析 ワイヤーフレーム 作成 ユーザーテスト 評価と改善 ゴールと 範囲の設定 評価基準の検討 ペルソナ定義 ① 計画フェーズ ② 分析フェーズ ③ 実証フェーズ プロトタイピング 実装フェーズ に続く 必要な情報はほぼ 決まっている 初心者向けvs熟 練者向け？ サービスブルー プリントの方が 有効！ 段階別WFの 作成、エンジ ニアの参加 ３人３回まで KPIとの相関で 判断 軽めに！ ステータスが 大事！
13. 13  標準プロセスはただの参考  各タスクの意味を理解して、案件ごとにプロセスをカスタマイズする  常に課題を意識し、その改善策としてのデザインを行う  全てのデザイン判断は課題と効果を基準に行う  無駄を削ぎ落とす  実装の制約を常に考慮する  絵に描いた餅にしたら、仕事が増えるだけ  エンジニアの確認を取りながらデザインを進めることで手戻りを最小限に  必要に応じて技術検証を並行しながら進める 全てのプロジェクトは別物！
14. 2. 事例紹介
15. 15 ①勤怠管理システム：King Of Time
16. 16  状況  業界トップのマーケットシェアを持っていたけど、強力な二番手の登場  元ゲーム会社である競合は優れたデザインを武器に急成長  歴史のあるシステムなので５００を超える画面を対象にデザイン改善を決断  ５年間のプロジェクトを想定し、デザインパートナーを慎重に選ぶことに  ６つのデザイン会社に提案依頼、３つの会社に絞って１ヶ月間の有償依頼  その上、１社に絞ることを決議  Fixelが選ばれた理由  競合のデザイン評価によるゴールの明確化（相手が６０点なら７０点取れれば勝ち）  対象画面を５０以下に絞ることで期間を６ヶ月に短縮  サービス選定プロセスを確認し、試用期間中によく見られる画面を特定し、改善する 案件概要
17. 17 進め方 区分 １ヶ月目 ２ヶ月目 ３ヶ月目 ４ヶ月目 ５ヶ月目 〜12ヶ月目 Fixel 顧客 現状分析 課題定義 ワイヤフレーム作成 ビジュアルデザイン フロントエンド コードサンプル提示 レクチャー 実施 実装 改善方針提示 システム アーキテクチャ検討 ユーザー テスト ユーザー テスト  早期に改善方針を提示（銀行のUIをサービスに借用）  ユーザーテストによる仮説検証  実装へのインパクトは最小限に抑える
18. 18 Before
19. 19 Before
20. 20 Before
21. 21 Before
22. 22 After
23. 23 After
24. 24  単月の新規顧客獲得が180％に向上、売上は4年で３倍に  デザインの効果が認められ、顧客の内部にデザインチーム新設  デザイナーの採用・育成を支援 得られた効果
25. 25 2回目の改善で情報の一覧性をあげ、既存顧客の満足度アップ Before 改善版リリース 再度の改善
26. 26 ②承認管理システム：楽々ワークフロー
27. 27  状況  日本では業界トップのマーケットシェアを持っていたけど、アメリカの関連会社によっ て採用を拒否される  使い勝手が悪く、他に無償で使えるツールの方が使いやすい。  デザインがカッコ悪い  １ヶ月の改善期間を設けてもらって再挑戦することに  他社のシステムがアメリカの関連会社に混じって来ると、全体的なIT統制の観点からよ くないので、できるだけ対応したい  他の海外のマーケットから同様の反応が出る恐れがあるので、対応が必要  Fixelが選ばれた理由  業務システムのデザインの実績が豊富にある  デザインスプリントなど、超短期間の対応が可能 案件概要
28. 28 進め方 区分 １週間目 ２週間目 ３週間目 ４週間目 Fixel 顧客 現状分析 課題定義 PC版 ワイヤフレーム作成 PC版 ビジュアルデザイン 実装  パソコン版とスマホ版を各１週間でデザイン改善  プロダクトオーナー、エンジニアと密にコラボ（＝缶詰め）  パターン化による横展開（プロダクトのテンプレートが充実していたからこそ、短期間の改修が可能に） スマホ版 ワイヤフレーム作成 スマホ版 ビジュアルデザイン 情報提供 受注 機内で完成
29. 29 Before
30. 30 After
31. 31  アメリカの案件獲得  社内で「成功事例」として研究対象に。  進め方の分析・レポート提示  中国など、海外マーケットでは新デザインで展開  （残念ながら）日本では既存のデザインで提供し続ける  既存顧客へのインパクトを考慮 得られた効果
32. 32 ③保険会社のコールセンターシステム：CallView
33. 33  状況  数百人規模のコールセンターを日本各地で運営中  業務に使うシステムが必要に応じてバラバラに構築され、１件のコール応答に１０個く らいのシステムを立ち上げる必要があり、業務効率が低下  業務の難易度の他に、システムの使い方が壁になって、コールセンター要員のスキルセッ トが増えない  システムの理解ができず、離職するケースも生じる  システムの改修・統合と共にUX/UIデザインを改善して、業務効率を上げたい  業務効率＝１件の電話への対応にかかる全ての時間  Fixelが選ばれた理由  業務の特性を理解したデザイン改善案を提案段階から提示  デザインだけではなく、大規模業務システムの統合に対する技術的理解 案件概要
34. 34 進め方 区分 １ヶ月目 ２ヶ月目 ３ヶ月目 ４ヶ月目 ５ヶ月目 〜12ヶ月目 Fixel 顧客 SIer 業務トレーニ ングを受講 ワイヤフレーム作成 ビジュアルデザイン レビュー・フィードバック 改善方針提示 ユーザー テスト ユーザー テスト  業務が複雑で、システムも数も多いのでコールセンター要員対象のトレーニングを受講  複数のシステムからの制約があるのでデザインとSIerの確認を並行する 現状分析 課題定義 講義・情報提供 レビュー・フィジビリティテスト 業務理解確認
35. 35 Before
36. 36 After
37. 37  電話応対を１画面で完結できるようにすることで業務効率アップ  電話対応（2分）事後処理（2分） 合計4分を要していたが  電話対応（1分）事後処理（1分） 合計2分の半分に短縮  コールセンター要員の教育コストが半減  数百名のスタッフのうち、外部委託分を契約終了・他の業務へ移動  人件費の低減及び効率活用が可能に 得られた効果
38. 38  2021年IT賞受賞  社長賞受賞 受賞歴
39. 39 ④業務用ファイル共有サービス：@Tovas
40. 40  状況  2004年から提供している、業務用ファイル共有システムのデザインを改善したい  リリース当時はデザインに対する意識が低く、エンジニア主導で画面を作っている  顧客の要望に応じて随時機能追加をしてあるのでつぎはぎの画面になっており、簡単な 操作にも迷うユーザーが多くなってきた  最近の若い人々を意識したデザイン改善をしたい。しかし、長く使っているユーザーが 多いので、デザイン変更の衝撃を最小限にしたい  Fixelが選ばれた理由  業務システムの経験が豊富  既存システムのデザイン変更に伴う衝撃とその対応方法に優れている  デザインシステムの提供でフロントエンドの品質向上はもちろん、コストを低減できる  フロントエンドの費用を一部をデザイン改善に転用可能 案件概要
41. 41 進め方 区分 １ヶ月目 ２ヶ月目 ３ヶ月目 ４ヶ月目 ５ヶ月目 Fixel 顧客 SIer 課題整理 UX分析 ワイヤフレーム作成 デザインシステム作成 レビュー・フィードバック 改善方針提示 ユーザー テスト ユーザー テスト  デザインシステム作成・活用によるフロントエンドの効率アップ  システムのリリース前に営業によるデザイン変更案内（目的とメリットの説明）  マニュアル・ヘルプ文書など、顧客支援体制の整備による準備を徹底に 情報提供 レビュー・フィジビリティテスト ワイヤフレーム改善 ビジュアルデザイン 実装 顧客への案内・マニュアル作成など
42. 42 Before → After
43. 43 Before → After
44. 44  顧客の反応・評価が向上  業務システムとしては珍しく、デザイン変更に対する不満の声はほぼなかった  スマホ対応でサービスの活用度を上げることができた  デザインシステムでフロントエンド開発の工数が低減・品質が上がった  デザインシステムに含まれたUIコンポーネントを活用することで、長期的な メリットが得られる見込み  予期してなかった効果！  問い合わせの数が減ったので、ラーニングコストが低減 得られた効果
45. 3. 結論 デザインはビジネス成敗の鍵！
46. 46 DX  全てのビジネスにおけるユーザーとの接点にはデザインが必要  機能や価格だけで差を付けられることは難しくなった時代  例えば、既存のサービスはもちろん、新規ビジネスを扱うDXでも、デザインが 成敗を左右する  デザインに対する投資はできるだけ早期に、デザインと並走する体制を設けるの が最も効率的  後になって、「ここ、デザインして」と言われてもできることが限られる  デザインをうまく活用するものが勝つ！ ビジネスのUIはデザイン ユーザー デ ザ イ ン ビジネスプロセスイノベーション 新しいテクノロジー
47. 最後に  デザインシステムに興味があるデザイナー・エンジニアを募集しております。  業務システムのUX/UIデザインに興味があるデザイナー・エンジニアを募集して います。  周りに興味のありそうな方に、 是非ご紹介ください。  申し込みは弊社のウェブサイトから お願いします！ https://fixel.co.jp/blog/recruit-20210929/
48. MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A
49. MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました！ アンケート記入のお願い