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 再利⽤可能なデザイン及びフロントエンド部品の活⽤による⽣産性向上(25%以上) 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 パシフィックセンチュリープレイス丸の内8階 設⽴ 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