業務システムは使いにくいもの？当たり前をUXデザインで変えた時の効果を事例を交えて紹介

Slide 1

Slide 1 text

2020/09/04 Fixel株式会社 COO宮崎和樹業務システムは使いにくいもの︖ 当たり前をUXデザインで変えた時の効果を事例を交えて紹介

Slide 2

Slide 2 text

2 l システムにおけるデザインの課題（500⼈以上のシステム責任者の声） l デザイン改善事例を通してUXデザインの効果紹介 l なぜ、業務システムは使いにくい︖ l デザイン会社に依頼したら解決できるのか︖ l UXデザインのプロジェクトはどうやってすすめる︖ l UXデザインプロジェクトの成果物（納品物）は何がある︖ l まとめアジェンダ

Slide 3

Slide 3 text

3 l システムの⾒た⽬が古いし、使いにくい l 単⾊で暗いイメージ l ユーザーが「怖くて触れないボタン」がある l 機能が⽭盾している l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、システムがおかしくなった。 l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。システムにおけるデザインの課題（500⼈以上のシステム責任者の声）

Slide 4

Slide 4 text

4 l システムの⾒た⽬が古いし、使いにくい Ø サービス︓売上低下、競合に負ける Ø 社内システム︓効率が悪い（作業の時間が増えるだけ） l 単⾊で暗いイメージ Ø 気持ちの問題⾊使いなどによっては頭痛くなる l ユーザーが「怖くて触れないボタン」がある Ø 便利な機能も埋もれるシステムにおけるデザインの課題→そのままにしておくと

Slide 5

Slide 5 text

5 l 機能が⽭盾している Ø 使い込んだ⼈にしか分からないシステムになっていく l システムの使い⽅を教えるのが⼤変（マニュアルは5年前に更新が途絶えて。。。） Ø 教育コスト増⼤、離職率が上がる l 多様なクライアント（特に声の⼤きい⼈）の依頼に答えて機能拡張し続けたら、システムがおかしくなった。 Ø どんどん⽭盾したシステムになる l どうにかしないといけないが、対応できないから⾒ないふりをしている。 l 開発を委託している会社にデザイン改善の話をしても、良い提案をしてくれない。 Ø 臭いものにフタをしても、そのまま。いつも頭の⽚隅に課題として残る。システムにおけるデザインの課題→そのままにしておくと

Slide 6

Slide 6 text

事例紹介

Slide 7

Slide 7 text

三越伊勢丹百貨店企業データ・業界︓百貨店・従業員数︓18,799⼈・売上︓1.2兆円（2019年）解決したかった課題・顧客カルテは、バックヤードのPCか紙で管理していた。・カルテの管理を担当スタッフ依存から脱却・購買実績に基づきパーソナライズして提案をしたい得られた効果・iPadアプリ利用により、顧客情報をスタッフ間で共有・お客さんとアプリで一緒に購買履歴などを確認→提案 →満足度アップ・伊勢丹テンプレートデザインに対して、各店舗でカスタマイズ・伊勢丹で好評だったので、三越にも展開

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

ヒューマンテクノロジーズ（ KING OF TIME ）企業データ・業界︓企業向けクラウド勤怠管理サービス・従業員数︓39⼈（2015年⽀援時）・売上︓9億円（2015年⽀援時）解決したかった課題・UI/UXの優れた他社サービスにコンペで負ける・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱られた。得られた効果・単⽉の契約数が80％アップ・売上は4年で約3倍に向上・Fixelの⽀援でデザイン部署の開設・デザイン改善で⾒た⽬は良くなったが⼀覧性が悪くなり改善依頼 →対応することで、既存ユーザも満⾜（B2Bならでは） Before After

Slide 10

Slide 10 text

ヒューマンテクノロジーズ（ KING OF TIME ）企業データ・業界︓企業向けクラウド勤怠管理サービス・従業員数︓39⼈（2015年⽀援時）・売上︓9億円（2015年⽀援時）解決したかった課題・UI/UXの優れた他社サービスにコンペで負ける・2004年にサービスイン以降⼤きなUXUIの変更していない。 →改善したいがデザインのことはよくわからない・実は、過去に⾃社でUI/UXを⼩さく変えてみたら、ユーザから叱られた。得られた効果・単月の契約数が80％アップ・売上は4年で約3倍に向上・Fixelの支援でデザイン部署の開設・デザイン改善で見た目は良くなったが一覧性が悪くなり改善依頼 →対応することで、既存ユーザも満足（B2Bならでは） HT社サイトより引用：https://www.h-t.co.jp/recruit/company/

Slide 11

Slide 11 text

11 メニューに強弱がないトップ画⾯になくてもよい情報 Todoが⼩さくてわかりずらい

Slide 12

Slide 12 text

12 よく使う機能はアクセスしやすい場所へ配置 ToDoをシンプルで分かりやすくした他の機能は中へ隠した

Slide 13

Slide 13 text

① ② ③

Slide 14

Slide 14 text

住友電工（楽々Workflow）企業データ・業界︓⾮鉄⾦属・従業員数︓272,796⼈・売上︓3兆1779億円解決したかった課題・アメリカの関連会社へ本システムの導⼊を承諾させる（内部統制）・説得するためには、2週間でスマホとwebのデザイン改善得られた効果・アメリカの関連会社が導⼊を決定・中国など他国への販売が加速 Before After

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

コールセンター資料では⾮公開

Slide 18

Slide 18 text

モータ制御企業データ・業界︓モータ・従業員数︓3,000名・売上︓600億円解決したかった課題・単軸制御から多軸制御にソフトウェアをアップグレードが必要・⾒た⽬が古い得られた効果（具体的な数値等は⾮公開）・単軸の操作感で多軸を制御を可能としてユーザを混乱させない・時代に合った画⾯で古さを感じさせない Before After

Slide 19

Slide 19 text

生産装置メーカ企業データ・業界︓半導体・電⼦部品・その他・従業員数︓6,500⼈・売上︓2,200億円解決したかった課題・古い⾒た⽬で使い勝⼿の悪い制御画⾯を刷新したい・視線の移動が多いので操作が疲れる（ミスも起きやすい）得られた効果（具体的な数値等は⾮公開）・視線の移動が減ったため操作が容易になった。チェックも容易に・営業がスクショを貼って提案するようになり、受注が増えた。 ※古い画⾯のときは、スクショを避けていた。。・社内の他の⽣産装置にも展開し、会社としてデザイン統⼀を進めている。 Before After

Slide 20

Slide 20 text

3DCADメーカ企業データ・業界︓3D CADメーカ・従業員数︓数百名・売上︓⾮公開解決したかった課題・アイコンから出来ることの想像が難しい・ショートカットを覚えないと使いこなすのが難しい得られた効果（具体的な数値等は⾮公開）・メインメニューサブメニューの構成を⾒直して使いやすく・アイコンにも程よく説明を追記して、ビギナーユーザをフォロー・今⾵のデザインを取り⼊れて積極販売が出来るようになった Before After

Slide 21

Slide 21 text

国内楽器メーカ（ギターマルチエフェクター）企業データ・業界︓楽器メーカー・従業員数︓703⼈・売上︓⾮公開解決したかった課題・競合に遅れずエフェクターのスマホアプリをリリースしたいが、ノウハウが無く遅れた。後発であるならばUXデザインを考慮したアプリにしたい。・ブランド感を損なわないアプリにしたい。得られた効果（具体的な項⽬は⾮公開）・デザインを標準化することで継続的に展開可能なデザイン基盤を構築・ギターを持ったまま、スマホでチューニングが容易なアプリで⾼評価を得た。

Slide 22

Slide 22 text

22 答えは簡単デザインを考慮しないでエンジニアが配置しただけのシステムだからなぜ、業務システムは使いにくい︖

Slide 23

Slide 23 text

23 デザイン会社選定で考慮しないといけないポイント l アプリケーションのデザインが出来るか → Webサイトとアプリケーションのデザインは別のモノ l 実装に使われているライブラリの制限などを理解してデザインが出来るか →例えばMFCで作られている場合は、デザインに制限がかかる l システムの制限制約を考慮した上で情報設計やデザイン出来るか →ユーザに便利な⼀覧画⾯をデザインしても、表⽰に1分かかるなら現実的ではない l 再現可能なロジカルなデザインを出来るか →業務システムは属⼈化せずに、確かな仕事が出来るためのロジックでデザインが必須デザイン会社に依頼したら解決するの︖

Slide 24

Slide 24 text

24 属⼈化しないために Design System

Slide 25

Slide 25 text

25 デザインシステムとはデザインシステムデザインガイドライン UIコンポーネント（デザイン＆コード）各種リソース

Slide 26

Slide 26 text

26 l 3rd party サービスプロバイダー向けのデザインガイドラインを公開していたが、あまり効果がなかったのでデザインシステムの提供に⽅針転換 l Web、iOS、Android向けのデザインシステムを提供 l 実装技術に依存しない、UIコンポーネントを提供 l Localization、markupやスタイルガイドラインまで提供例︓Salesforceのデザインシステム Salesforce Lightning Design System https://www.lightningdesignsystem.com

Slide 27

Slide 27 text

27 l Bluemix、Watson向けのデザインシステム作成後、全社向けのデザインシステムに発展 l SketchファイルによるUI Design KitとComponent Library Kitを提供 l Vanila.jsとReact.js、Vue.js、AngularJS向けの実装を提供例︓IBMのデザインシステム IBM Carbon Design System http://carbondesignsystem.com

Slide 28

Slide 28 text

28 デザインシステムを媒体にしたコラボレーションデザインシステムビジネスパーソンエンジニアデザイナー機能追加・改善の際に、判断の基準になる︕ デザイン資産の価値を定量化できる再利⽤できる部品が揃っている︕ 企業活動におけるデザイン活⽤の基盤

Slide 29

Slide 29 text

29 l 情シス l 社内システムを分かりやすく、使いやすくできる l システム間の使い勝⼿の⼀貫性を確保 l システム構築のコスト低減 l SIer l 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上（２５％以上） l ⼀貫性のあるデザインを⾼品質で提供することでお客様に対するサービス向上 l 他Sierに対する競争優位を占めることが可能になる l サービスプロバイダー l デザインの⼀貫性獲得によるブランド構築 l より迅速な改善・リリースが可能に l リリースを重ねてもデザインの⼀貫性や品質が落ちない l 今後のデザイントレンド変化に迅速に対応可能各プレイヤーにおけるデザインシステムの価値

Slide 30

Slide 30 text

30 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃っている • 複製&カスタマイズすることで新しいデザインシステムを瞬時作成可能 Fixel Design System 業務システム向け汎用的デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費用低減・工期短縮プロフェッショナルサービスデザインシステム作成・運用支援＋＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo

Slide 31

Slide 31 text

実際にどうやって進めるの︖

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

34 評価基準の検討 ü UXデザイン作業の成果を数字で測ることができる項⽬で定義する ü ⽐較のために現在のデータを取得し、⽬標値を定義する ü 必要なデータの取得ができていない場合はデータ取得⽅法を追加することを検討 ü 価格変更や機能追加など、UXデザイン以外の影響要素を可能な限り分離した⽅がより厳密な評価測定ができる評価基準の検討計画フェーズ

Slide 35

Slide 35 text

35 ペルソナ定義 ü 対象ユーザー像を具体的に定義 ü ユーザーの視点で物事を考えるための⼿法 ü 必要に応じて複数のペルソナを定義して使う v メインペルソナ、サブペルソナ、アンチペルソナ、エクストリームペルソナ等 ü 定義の詳細度は製品特性に応じて決める v 業務システムの場合、ITリテラシー、年齢代、性別など、かなり制限的な特徴の定義に留めることもありペルソナ定義分析フェーズ [ユーザー] [ペルソナ] 佐藤さん鈴⽊さん⽞⼈さん A B C

Slide 36

Slide 36 text

36 ペルソナの例ペルソナ定義分析フェーズ

Slide 37

Slide 37 text

37 コンテキスト分析 ü ペルソナが対象商品に接する動機、場所、環境などを確認する ü 主に制約条件や考慮すべき環境要因を確認して後のUI設計に反映する v [例] 使⽤するデバイス、⼿袋で操作、操作時間、後続作業、他の関連システムがある、など ü 後述するジャーニーマップ作成と並⾏可能コンテキスト分析分析フェーズ佐藤さん鈴⽊さんユーザーコンテキストユーザーコンテキスト外部コンテキストマーケット競合など

Slide 38

Slide 38 text

38 ジャーニーマップ作成 ü ペルソナが対象商品に接する以前から接した後までの接点を時系列で描写する ü ユーザーと商品間の接点を分析し、ユーザーの⾏動を理解することが第⼀の⽬的 ü 綺麗なものを作成することより、⼿軽に作成して変更できるものにする ü 先のコンテキスト分析と、後述するメンタルモデルを併記して作成することがあるジャーニーマップ作成分析フェーズ

Slide 39

Slide 39 text

39 ジャーニーマップ作成よく⾒かけるジャーニーマップの例ジャーニーマップ作成分析フェーズ

Slide 40

Slide 40 text

40 ジャーニーマップ作成実⽤的なジャーニーマップの例ジャーニーマップ作成分析フェーズポストイットを使い素早く検討︕ デジタル化して整理

Slide 41

Slide 41 text

41 ジャーニーマップの例ジャーニーマップ作成分析フェーズ資料では⾮公開

Slide 42

Slide 42 text

42 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、何を考えているかを定義して分析する ü 表⾯的な動機からより根本的な動機を探ることで本当のニーズを⾒つけだす v 5 Why法に近い ü ペルソナの根本的な課題を解決する⼿段を検討する v イノベーションを起こし得るのはここ︕ ü リサーチを⾏い、定量的な分析をする⽅法もあるが、多くの場合ジャーニーマップと併記しながら定性的な分析を⾏うメンタルモデル分析分析フェーズ

Slide 43

Slide 43 text

43 メンタルモデル分析 ü ペルソナが対象商品に接する際に何を感じて、何を考えているかを定義して分析するメンタルモデル分析分析フェーズ定量的な分析例ジャーニーマップに併記して分析する例ジャーニーマップメンタルモデル

Slide 44

Slide 44 text

44 ワイヤーフレーム作成・プロトタイピング ü 今までの作業で⽴てた仮説を検証するための必要最⼩限のUIを作る l 最初は紙とペンを使ったUIスケッチでペーパープロトタイミングを⾏う l 最初はたくさんのアイデアを出して、それを集約していくことを繰り返す l チーム内で簡易的なユーザーテストを繰り返しながら短期間で成熟させて⾏く ü ある程度まとまった段階でユーザーテストで使えるプロトタイプにするワイヤーフレーム作成実証フェーズプロトタイピング

Slide 45

Slide 45 text

45 ユーザーテスト ü 仮説検証と問題発⾒の場 l ⽬的として価値をユーザーに提供できているかを確認 l ペルソナに近いユーザーを招き、役割劇、発話⽅などで⾏う (必要に応じて録画・録⾳を⾏う。専⾨機関に依頼する⽅法もある) l テストユーザーは社内など⾝近なところから探すのも⼿︕ l 課題を⾒つけ、分析を⾏い、対応策を考える ü UXデザインでも、最も⼤事なタスク︕ ユーザーテスト実証フェーズ

Slide 46

Slide 46 text

46 ユーザーテスト ü プロトタイピングツールを有効活⽤する l コードを書かなくてもユーザーに疑似体験をさせることができる l 迅速に新しい案を試すことができるユーザーテスト実証フェーズ

Slide 47

Slide 47 text

47 評価と改善 ü ユーザーテストの結果を分析し、必要な対応を⾏う l 仮説の誤りがあった場合は新しい仮説に基づいて再度検討を⾏う l ノイズと情報の区分が⼤事 l [最初に定義したゴールを達成できているか] で反復の必要性を決める（※現実的には予算や時間という制約を考慮する）評価と改善実証フェーズ反復コンテキスト分析ジャーニーマップ作成メンタルモデル分析ワイヤーフレーム作成ユーザーテスト評価と改善ゴールと範囲の設定評価基準の検討ペルソナ定義計画フェーズ分析フェーズ実証フェーズプロトタイピング [反復して完成度を⾼める] 最初から満点を狙わない。それは不可能︕

Slide 48

Slide 48 text

成果物はどんなものがあるの︖

Slide 49

Slide 49 text

49 UIデザイン成果物の例 1. ビジュアルデザイン画⾯デザインの仕上がりイメージ

Slide 50

Slide 50 text

50 UIデザイン成果物の例 2. デザインガイドライン UIデザインの各部品ごとのデザイン仕様とルールをまとめたもの

Slide 51

Slide 51 text

51 UIデザイン成果物の例 3. デザイン指⽰書画⾯ごとのデザイン仕様（要素のサイズや⾊、余⽩など）を記したもの

Slide 52

Slide 52 text

52 なぜ今、UI/UXに投資すべきか︖ 品質時間初回UXデザインプロジェクトの効果が最も⼤きいフェーズ 1 フェーズ 2 Quality of UX

Slide 53

Slide 53 text

53 まとめ l 業務システムはデザインされていないから、使いやすくない l ユーザ⽬線で、少しだけでもデザインするだけで効果は絶⼤ l 開発のことを考慮しながらデザインしないと、絵に描いた餅になる。

Slide 54

Slide 54 text

54 今後計画しているウェビナー（セミナー）の内容 l ⾮デザイナーの為の l UXデザイン l ビジュアルデザイン l UIデザイン l サービスデザイン l プロトタイピング l 業務システムのデザイン l デザインとITをマージしたUX Driven Processes l デザインを囲むコミュニケーション l 適切なフィードバック⽅法 l デザインへのインプット l ITへのアウトプット l デザインのROI l UXHubとFixel Design Systemの詳細 l その他、事例紹介など

Slide 55

Slide 55 text

Fixel株式会社のご紹介 Fix + Pixel = Fixel We take care of every pixels in your System.

Slide 56

Slide 56 text

56 About us 社名 Fixel 株式会社 / Fixel Inc. 所在地〒100-6208 東京都千代⽥区丸の内1-11-1 パシフィックセンチュリープレイス丸の内８階設⽴ 2019年8⽉1⽇資本⾦ 3,100万円役員代表取締役 CEO ⾦成哲執⾏役員 COO 宮﨑和樹 CDO 池本哲也

Slide 57

Slide 57 text

57 Our Mission ”Make Design Easy” デザインを個⼈の感性に依存する抽象的な⾏為から、デザインをロジックで組み⽴てる客観的、かつ具体的なものに変えることで、ビジネスや⽇常での活⽤度を上げる。デザインの制作過程や成果物、そして⻑期に渡るデザインの運⽤に⾄る、全ての⼿法を明確に定義して提供することで、企業・組織のデザイン導⼊を加速させる。デザインを評価可能な資産にすることで、ビジネスにおけるデザインの価値を最⼤化するビジネスとテクノロジーの観点からデザインをリバースエンジニアリングし、「ノンデザイナーでも理解できるもの・再利⽤が容易なもの・価値を測定・評価できるもの」としてデザインを再定義する

Slide 58

Slide 58 text

58 Position of Fixel

Slide 59

Slide 59 text

59 Fixelの4つのサービス l 既存サービス・システムのUI/UXデザイン改善 ü 既存システムの技術的制約を把握した上で改善を⽀援 l 新規サービス・ビジネスビルドアップ⽀援 ü 早期にモックアップを作りビジネス検証、並⾏して技術的な検証も実施 l デザインシステムの制作と運⽤⽀援 UXHub ü 事業会社のデザインシステム作成⽀援から、SIerの⽀援まで l 事業会社・SIerのデザインパートナーとして継続的なサービスの提供

Slide 60

Slide 60 text

60 Fixelのサービスリモートデザインサービス全てのデザイン⽀援をオンラインで⾏うことで、オフラインに⽐べ、よりリアルタイム、迅速、柔軟な対応新サービス⽴ち上げ⽀援サービス全デザインシンキング、UXデザインなど、デザインの⼿法を⽤いて貴社の新しいビジネスモデルを迅速に検証し事業化する https://fixel.co.jp/lp/remote-design https://fixel.co.jp/lp/new-services

Slide 61

Slide 61 text

61 Fixelのサービス製造業向けUX/UIデザインサービス組み込みの制御パネルや稼働モニタ、設計ツールなど、製造業の現場で使われるシステムのUX/UIデザインや開発を⽀援クラウドを活⽤したサービス開発 AWSなどのマイクロサービスを疎結合させたシステムの開発サービス。⾼速な開発が可能。 https://fixel.co.jp/lp/manufacturing https://fixel.co.jp/lp/cloud-si

Slide 62

Slide 62 text

62 Fixelのサービス業務システムのUI/UXデザイン改善仕事に使われるシステムの⾒た⽬、効率・使い勝⼿を格段に向上デザインシステム作成・運⽤サービスデザインシステムの設計から制作・運⽤の⽀援はもちろん実装技術の統合などもお⼿伝い致します。 https://fixel-ux.studio.design https://fixel.co.jp/lp/design-system/

Slide 63

Slide 63 text

63 Fixelのサービス UXHub デザインシステムの作成と運⽤の⼿間を限りなく「ゼロ」に︕ デザインシステム構築・運⽤プラットフォーム https://uxhub.tokyo/

Slide 64

Slide 64 text

MAKE DESIGN EASY