HT Itoi_sama UX
- 1. ROIを最⼤化するUXデザインの取り組み 株式会社ヒューマンテクノロジーズ システム運⽤部 部⻑ ⽷井 隆徳 2016.11.30
- 2. 会社及びサービス紹介 ヒューマンテクノロジーズ 及び KING OF TIME について ● 2003.12 株式会社ヒューマンテクノロジーズ設⽴ ● 2004.11 勤怠管理クラウドサービス『KING OF TIME』サービスイン。 ● 2009 ご利⽤ユーザー数 No.1 ● 2016 利⽤者数6500社、46万⼈
- 3. ⾃⼰紹介 登壇者について l ⽷井 隆徳 l システム運⽤部 部⻑ l KING OF TIME とセキュリティソリューションのシステム部⾨統括
- 4. 本⽇の内容 勤怠管理サービス『KING OF TIME』が⾏ったUXUI変更への取り組みについ て l プロジェクトの理由 l プロジェクトを始めるにあたって l パートナー選定プロセス l UXUI変更のプロセス l 成果
- 5. プロジェクトの理由（課題） KING OF TIMEの抱える課題 KING OF TIMEは2004年にサービスイン、それ以降⼤きなUXUIの変更はない。 開発⾯での課題 l UXUIに対して指針がない。そのため • 機能追加が⾏われる際に、UXUI⾯での統⼀が図られていない。 • 開発者がどう作ればいいか迷う。 ⇒ 結果、ベストとは⾔いがたいものになってしまっている状態。 ⇒ 改善したい思いはあれど、俺たち開発だからデザインのことよくわかんないし...という悲しい状態に。
- 6. プロジェクトの理由（課題） KING OF TIMEの抱える課題 営業・サポート⾯での課題 l UXUIの優れた後発サービスと競合になった際に、そこが理由で負ける場合がある。 ⇒ ユーザーは同じ機能なら、当然 ⾒た⽬のいい⽅を選びますよね？ ⇒ 沢⼭、サービスを評価するのは⼤変だから ぱっと⾒て⾒栄えのよさそうな⽅から評価しますよね？
- 13. パートナー選定プロセスとその理由 最初の選定 まず、条件として下記を考えWebサイトを参考に7社選びました。 l WebサービスのUXUI作成ができる。 l Javascriptに造詣が深い。 l 弊社技術者とペアプログラミングが可能 l ⼤規模サイトの作成に関わったことがある。 l UXUIについてのコンサルティングができる。
- 14. パートナー選定プロセスとその理由 最初の選定 その中から3社に絞込み、3社に対して同じ課題をプロジェクトとして⾏いました。 l Fixel(NCDC）様 l A社 ・・・ ⼤規模向けUXUIを得意とするオールラウンダー。 l B社 ・・・ 若さとやる気にあふれ⼩規模であることを活かして、細やかな対応が期待できる。
- 15. パートナー選定プロセスとその理由 課題内容 KING OF TIME の従業員個⼈⽤画⾯（タイムカードと勤怠にまつわる申請）の再設計 期間は約1ヶ⽉。その中で l 分析と⽅向性決定 l ワイヤーフレーム l ヴィジュアルデザイン l コーディング（ペアプログラミング） を⾏いました。
- 16. パートナー選定プロセスとその理由 評価 ※各項⽬ 1〜10段階 進行 ドキュメ ント 分析 やりやす さ UX UI 技術力 価格 提案力 合計 NCDC 様 8 6 8 8 8 8 8 7 10 71 A社 8 10 8 9 8 8 6 5 8 70 B社 6 6 8 7 5 6 6 8 7 59
- 17. NCDCさんを選んだ理由 選定理由 l Fixel（NCDC）様とA社は独⾃基準のポイントでは拮抗していた。 l 単純なUXUIの改修によるユーザーへの効果だけではなく、ビジネス⾯での戦略から効果を測るという提案があ った。 l 競合分析を⾏い最も効果的なアプローチの提案があった。 l ユーザーアンケートという、我々が全く思いつかなかった提案をしてくれた。 l 我々の⾔うことを鵜呑みにせず、きちんと俯瞰した視点から提案があった。 l 技術者のスキルが確かなものだった。我々のエンジニアへのスキルトランスファーも踏まえた ペアプロを⾏ってくれた。
- 18. パートナー選定を終えて 感想 l 正直、きつかったです。 1ヶ⽉とはいえ、3本同じプロジェクトを同時にこなしていたので頭の混乱度、時間的制約は かなりあった。 l ただ、徐々に⾃分たちの中で今後のプロジェクトの成功に対する確信も⾼まっていった。 l 本プロジェクトの成功の鍵はパートナー選定と、それを⾏ったことによる⾃分たちの変化。 ⇒ ⼟壌はできたのであとはやるだけ！
- 19. UXUI改修のプロセスの紹介 ⽬標の設定とデザイン変更の意義 まず、UXUIの改修を⾏うことにより何を成し遂げたいのか？ 当然、『KING OF TIME』ビジネスの成功が⽬標にあるのですが、最も効果的な（ROIの⾼い）部分 から着⼿することにしました。 また、デザイン変更の意義についても UXUIデザインが古臭い＆使い⾟いから変更する ⇒ 売上向上を⽬的としてUXUIデザイン変更する と位置づけました。
- 20. UXUI改修のプロセスの紹介
- 23. UXUI改修のプロセスの紹介 実際に⾏ったこと l 150画⾯を、⼩出しに出すのではなく⼀気に変更を⾏いました。 ⇒ 段階的に⾏うとユーザーに負荷がかかるため l 旧UIは既存顧客⽤に残し、サーバーサイドは⼿を⼊れず新UIを新設しました。 ⇒ 既存ユーザーへの配慮と最悪の事態に備え、ロールバックを容易くするため。 l 1年後に旧UIは撤廃予定でそれまでは2重メンテを続けていきます。
- 24. 成果 トップ画⾯のUX変更 トップから⼊った際に、メニューに強弱がないためどこを優先して使えばよいかわからない。 メニューの構成を銀⾏の業務になぞらえ l よく使うもの ⇒ ATM：よく使い、すぐにアクセス可能なものにする l たまに使うもの ⇒ 1F窓⼝：たまに使う。 l あまり使わないもの ⇒ 2階の投資窓⼝：ほとんど使わない に整理
- 27. 成果 KING OF TIMEのリードユーザー数 2016年8⽉に新UIをリリースした結果、 7⽉度リード数に⽐べ8⽉度リード数は10％アップ！ 通常8⽉度はリード数が落ち込むところ、逆にアップとなった。ちなみに去年は-83%ダウン。 9⽉度も⽬標に対して10%以上の増加が⾒られた。 定性的ではあるがデザインに懸念がある顧客に対してリリース前に新UIを⾒せることにより成約となったユーザーも多数あった。 さらに、UIが原因でロストしたユーザー数が 0件 という想定以上の成果を達成した。 評価期間があるため、本当の結果がわかるまでは⻑期間かかるがすでに⼀定の効果が⾒えている。
- 28. 実施プロセスの中でのNCDCの活動に対す る評価 評価 l KING OF TIME のUXUI改善をする上でのパートナーとして当初期待していたことを完璧にこなしてくれた。 l デザイン⾯においての疑問に丁寧に答えてくれた。なぜこの⾊なのか、なぜこの場所にこれがあるのか等、 あいまいな質問にも丁寧に答えてくれた。 ブランディングワークショップを開催し、皆の持っているイメージからデザインの⽅向性を導いてくれた。 l ⼀時期、JSの速度が出ずに困っていたがすばらしいエンジニアスキルとUXの変更で期待に応えてくれた。
- 30. まとめ まとめ l パートナー選びは最重要項⽬なので納得⾏く選考を⾏う ⇒ ⼀時的にコストがかさむがそれも投資と考える l UXUI改善も投資の⼀つなので、もっとも効果的で費⽤対効果の⾼い部分から⼿を付ける ⇒ ⼿がつけやすいところから⾏うと、何をやっているのかわからなくなる。 また⼿をつける部分は⼀気に⾏う。 l 改善の⽬的をメンバー全員で共有し、腑に落ちるようにする ⇒ ⽬的がはっきりしているため、部署間での連携がスムーズに⾏く
- 32. ご清聴、ありがとうございました。