Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fixel Inc.
September 15, 2022

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

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

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

Fixel Inc.

September 15, 2022
Tweet

More Decks by Fixel Inc.

Other Decks in Design

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の
    作成、エンジ
    ニアの参加
    3人3回まで
    KPIとの相関で
    判断
    軽めに!
    ステータスが
    大事!

    View Slide

  13. 13

    標準プロセスはただの参考
     各タスクの意味を理解して、案件ごとにプロセスをカスタマイズする

    常に課題を意識し、その改善策としてのデザインを行う
     全てのデザイン判断は課題と効果を基準に行う
     無駄を削ぎ落とす

    実装の制約を常に考慮する
     絵に描いた餅にしたら、仕事が増えるだけ
     エンジニアの確認を取りながらデザインを進めることで手戻りを最小限に
     必要に応じて技術検証を並行しながら進める
    全てのプロジェクトは別物!

    View Slide

  14. 2. 事例紹介

    View Slide

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

    View Slide

  16. 16

    状況
     業界トップのマーケットシェアを持っていたけど、強力な二番手の登場
     元ゲーム会社である競合は優れたデザインを武器に急成長
     歴史のあるシステムなので500を超える画面を対象にデザイン改善を決断
     5年間のプロジェクトを想定し、デザインパートナーを慎重に選ぶことに
     6つのデザイン会社に提案依頼、3つの会社に絞って1ヶ月間の有償依頼
     その上、1社に絞ることを決議

    Fixelが選ばれた理由
     競合のデザイン評価によるゴールの明確化(相手が60点なら70点取れれば勝ち)
     対象画面を50以下に絞ることで期間を6ヶ月に短縮
     サービス選定プロセスを確認し、試用期間中によく見られる画面を特定し、改善する
    案件概要

    View Slide

  17. 17
    進め方
    区分 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 5ヶ月目 〜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年で3倍に

    デザインの効果が認められ、顧客の内部にデザインチーム新設

    デザイナーの採用・育成を支援
    得られた効果

    View Slide

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

    View Slide

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

    View Slide

  27. 27

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

    Fixelが選ばれた理由
     業務システムのデザインの実績が豊富にある
     デザインスプリントなど、超短期間の対応が可能
    案件概要

    View Slide

  28. 28
    進め方
    区分 1週間目 2週間目 3週間目 4週間目
    Fixel
    顧客
    現状分析
    課題定義
    PC版
    ワイヤフレーム作成
    PC版
    ビジュアルデザイン
    実装

    パソコン版とスマホ版を各1週間でデザイン改善

    プロダクトオーナー、エンジニアと密にコラボ(=缶詰め)

    パターン化による横展開(プロダクトのテンプレートが充実していたからこそ、短期間の改修が可能に)
    スマホ版
    ワイヤフレーム作成
    スマホ版
    ビジュアルデザイン
    情報提供
    受注
    機内で完成

    View Slide

  29. 29
    Before

    View Slide

  30. 30
    After

    View Slide

  31. 31

    アメリカの案件獲得

    社内で「成功事例」として研究対象に。
     進め方の分析・レポート提示

    中国など、海外マーケットでは新デザインで展開

    (残念ながら)日本では既存のデザインで提供し続ける
     既存顧客へのインパクトを考慮
    得られた効果

    View Slide

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

    View Slide

  33. 33

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

    Fixelが選ばれた理由
     業務の特性を理解したデザイン改善案を提案段階から提示
     デザインだけではなく、大規模業務システムの統合に対する技術的理解
    案件概要

    View Slide

  34. 34
    進め方
    区分 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 5ヶ月目 〜12ヶ月目
    Fixel
    顧客
    SIer
    業務トレーニ
    ングを受講
    ワイヤフレーム作成
    ビジュアルデザイン
    レビュー・フィードバック
    改善方針提示
    ユーザー
    テスト
    ユーザー
    テスト

    業務が複雑で、システムも数も多いのでコールセンター要員対象のトレーニングを受講

    複数のシステムからの制約があるのでデザインとSIerの確認を並行する
    現状分析
    課題定義
    講義・情報提供
    レビュー・フィジビリティテスト
    業務理解確認

    View Slide

  35. 35
    Before

    View Slide

  36. 36
    After

    View Slide

  37. 37

    電話応対を1画面で完結できるようにすることで業務効率アップ
     電話対応(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
    進め方
    区分 1ヶ月目 2ヶ月目 3ヶ月目 4ヶ月目 5ヶ月目
    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