企業システム・サービスのためのUXデザイン最新事例セミナー（2016.11.30）セッション2資料「「KING OF TIME」のUXデザイン成功事例」

Slide 1

Slide 1 text

ROIを最⼤化するUXデザインの取り組み株式会社ヒューマンテクノロジーズシステム運⽤部部⻑⽷井隆徳 2016.11.30

Slide 2

Slide 2 text

会社及びサービス紹介ヒューマンテクノロジーズ及び KING OF TIME について ●  2003.12 株式会社ヒューマンテクノロジーズ設⽴ ●  2004.11 勤怠管理Ϋϥ΢υαʔϏε『KING OF TIME』サービスイン。 ●  2009 ご利⽤ユーザー数 No.1 ●  2016 利⽤者数6500社、46万⼈

Slide 3

Slide 3 text

⾃⼰紹介登壇者について l  ⽷井隆徳 l  システム運⽤部部⻑ l  KING OF TIME とセキュリティソリューションのシステム部⾨統括

Slide 4

Slide 4 text

本⽇の内容勤怠管理サービス『KING OF TIME』が⾏ったUXUI変更への取り組みについて l  プロジェクトの理由 l  プロジェクトを始めるにあたって l  パートナー選定プロセス l  UXUI変更のプロセス l  成果

Slide 5

Slide 5 text

プロジェクトの理由（課題） KING OF TIMEの抱える課題 KING OF TIMEは2004年にサービスイン、それ以降⼤きなUXUIの変更はない。開発⾯での課題 l  UXUIに対して指針がない。そのため •  機能追加が⾏われる際に、UXUI⾯での統⼀が図られていない。 •  開発者がどう作ればいいか迷う。 ⇒ 結果、ベストとは⾔いがたいものになってしまっている状態。 ⇒ վળ͍ͨ͠ࢥ͍͸͋ΕͲɺ俺たち開発だからデザインのことよくわかんないし...という悲しい状態に。

Slide 6

Slide 6 text

プロジェクトの理由（課題） KING OF TIMEの抱える課題営業・サポート⾯での課題 l  UXUIの優れた後発サービスと競合になった際に、そこが理由で負ける場合がある。 ⇒ ユーザーは同じ機能なら、当然⾒た⽬のいい⽅を選びますよね？ ⇒ 沢⼭、サービスを評価するのは⼤変だからぱっと⾒て⾒栄えのよさそうな⽅から評価しますよね？

Slide 7

Slide 7 text

プロジェクトを始めるにあたって痛みを共有するプロセス実は⼀度、UIを少し変えたことがあります。結果

Slide 8

Slide 8 text

プロジェクトを始めるにあたって痛みを共有するプロセス今までの使い⽅と少し変わったため、某⼤規模ユーザー様からとても⼤きなお叱りを受ける。㱺 ౰࣌ͷվળ͸͋͘·Ͱओ؍͔ΒͷมߋͰཧ࿦͕൐͍ͬͯͳͬͨɻ 㱺 ͦͷͨΊɺϢʔβʔʹ͖ͪΜͱҙਤΛ఻͑Δ͜ͱ͕Ͱ͖ͳ͔ͬͨɻ

Slide 9

Slide 9 text

プロジェクトを始めるにあたって痛みを共有するプロセスその苦い経験から、どの部署も積極的にUXUI変更に⼤きな声を挙げることもなく何年か経ちました。しかし、去年やはりUXUI変更をしたい、という社内的な雰囲気の⾼まりがあり、実現するにはどうすればよいかという話し合いを⾏いました。そこで出てきた結論は

Slide 10

Slide 10 text

プロジェクトを始めるにあたって痛みを共有するプロセスまずは⾃分たちが納得できる理論、プロセスとデザインを持ってお客様へも胸を張って改善しましたと⾔えるようにしたい！ ⇒ どうやったら納得⾏くものができるか、⾃分たちに基準と⾃信がない。 ⇒ ⾃分たちだけでなく外部の専⾨家の⼒を借りよう！

Slide 11

Slide 11 text

パートナー選定プロセスとその理由パートナー選定の⽅法⾃分たちの⼤事なサービスを共に改善していく協⼒者を選ぶ、というのがこのプロジェクトを成功させるために⼀番重要だと位置づけました。では、どんなパートナーがいいでしょうか？

Slide 12

Slide 12 text

パートナー選定プロセスとその理由パートナー選定の⽅法それは評価してみないと分からない。パートナーの評価㱺⼀緒に仕事をして初めて分かると考え、同じ課題を複数業者と同時に⾏うことを決めました。経費も時間も数倍かかるのですが、これは我々にとっては⾃然な結論でした。皆さんも、製品やサービスを選ぶのに複数のものを⽐較して決めますよね？それと同じことです。

Slide 13

Slide 13 text

パートナー選定プロセスとその理由最初の選定まず、条件として下記を考えWebサイトを参考に7社選びました。 l  WebサービスのUXUI作成ができる。 l  Javascriptに造詣が深い。 l  弊社技術者とペアプログラミングが可能 l  ⼤規模サイトの作成に関わったことがある。 l  UXUIについてのコンサルティングができる。

Slide 14

Slide 14 text

パートナー選定プロセスとその理由最初の選定その中から3社に絞込み、3社に対して同じ課題をプロジェクトとして⾏いました。 l  NCDC様 l  A社・・・⼤規模向けUXUIを得意とするオールラウンダー。 l  B社・・・若さとやる気にあふれ⼩規模であることを活かして、細やかな対応が期待できる。

Slide 15

Slide 15 text

パートナー選定プロセスとその理由課題内容 KING OF TIME の従業員個⼈⽤画⾯（タイムカードと勤怠にまつわる申請）の再設計期間は約1ヶ⽉ɻその中で l  分析と⽅向性決定 l  ワイヤーフレーム l  ヴィジュアルデザイン l  コーディング（ペアプログラミング）を⾏いました。

Slide 16

Slide 16 text

パートナー選定プロセスとその理由評価 ※各項⽬ 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

Slide 17

Slide 17 text

NCDCさんを選んだ理由選定理由 l  NCDC様とA社は独⾃基準のポイントでは拮抗していた。 l  単純なUXUIの改修によるユーザーへの効果だけではなく、ビジネス⾯での戦略から効果を測るという提案があった。 l  競合分析を⾏い最も効果的なアプローチの提案があった。 l  ユーザーアンケートという、我々が全く思いつかなかった提案をしてくれた。 l  我々の⾔うことを鵜呑みにせず、きちんと俯瞰した視点から提案があった。 l  技術者のスキルが確かなものだった。我々のエンジニアへのスキルトランスファーも踏まえたペアプロを⾏ってくれた。

Slide 18

Slide 18 text

パートナー選定を終えて感想 l  正直、きつかったです。 1ヶ⽉とはいえ、3本同じプロジェクトを同時にこなしていたので頭の混乱度、時間的制約はかなりあった。 l  ただ、徐々に⾃分たちの中で今後のプロジェクトの成功に対する確信も⾼まっていった。 l  本プロジェクトの成功の鍵はパートナー選定と、それを⾏ったことによる⾃分たちの変化。 ⇒ ⼟壌はできたのであとはやるだけ！

Slide 19

Slide 19 text

UXUI改修のプロセスの紹介⽬標の設定とデザイン変更の意義まず、UXUIの改修を⾏うことにより何を成し遂げたいのか？当然、『KING OF TIME』ビジネスの成功が⽬標にあるのですが、最も効果的な（ROIの⾼い）部分から着⼿することにしました。また、デザイン変更の意義についても UXUIデザインが古臭い＆使い⾟いから変更する ⇒ 売上向上を⽬的としてUXUIデザイン変更すると位置づけました。

Slide 20

Slide 20 text

UXUI改修のプロセスの紹介

Slide 21

Slide 21 text

UXUI改修のプロセスの紹介⽬標リード数の増加と評価フェーズに⼊ったユーザーを逃さないことを第⼀に考え、UIの変更から⾏うことに決定。また、以前から評価直後にユーザーが何をすればよいか分かりにくい、という点に着⽬し、その部分のみUXの変更を⾏うことにしました。

Slide 22

Slide 22 text

UXUI改修のプロセスの紹介体制 MTG：週⼀度で定例MTGを⾏いました。弊社側の体制としては開発だけではなく、サポート、営業も参加し、変更の意義と効果を確認しつつ進めました。これにより、変更によって発⽣する、今後の新規顧客へのサポートや既存顧客へのフォローを全社的に⾏うことができた。連絡⼿段：Slack

Slide 23

Slide 23 text

UXUI改修のプロセスの紹介実際に⾏ったこと l 150画⾯を、⼩出しに出すのではなく⼀気に変更を⾏いました。 ⇒ 段階的に⾏うとユーザーに負荷がかかるため l 旧UIは既存顧客⽤に残し、サーバーサイドは⼿を⼊れず新UIを新設しました。 ⇒ 既存ユーザーへの配慮と最悪の事態に備え、ロールバックを容易くするため。 l 1年後に旧UIは撤廃予定でそれまでは2重メンテを続けていきます。

Slide 24

Slide 24 text

成果トップ画⾯のUX変更トップから⼊った際に、メニューに強弱がないためどこを優先して使えばよいかわからない。メニューの構成を銀⾏の業務になぞらえ l  よく使うもの㱺 ATMɿΑ͘࢖͍ɺ͙͢ʹΞΫηεՄೳͳ΋ͷʹ͢Δ l  たまに使うもの㱺 1F૭ޱɿͨ·ʹ࢖͏ɻ l  あまり使わないもの㱺 2֊ͷ౤ࢿ૭ޱɿ΄ͱΜͲ࢖Θͳ͍ に整理

Slide 25

Slide 25 text

トップ画⾯の変更(旧) 成果 ϝχϡʔʹڧऑ ͕ͳ͍ τοϓը໘ʹͳ ͯ͘΋Α͍৘ใ Todo͕খͯ͘͞ Θ͔ΓͣΒ͍

Slide 26

Slide 26 text

トップ画⾯の変更(新) 成果 Α͘࢖͏ػೳ͸ ΞΫηε͠΍͢ ͍৔ॴ΁഑ஔ ToDoΛγϯϓ ϧͰ෼͔Γ΍͢ ͨ͘͠ ଞͷػೳ͸ த΁Ӆͨ͠

Slide 27

Slide 27 text

成果 KING OF TIMEのリードユーザー数 2016年8⽉に新UIをリリースした結果、 7⽉度リード数に⽐べ8⽉度リード数は10％アップ！通常8⽉度はリード数が落ち込むところ、逆にアップとなった。ちなみに去年は-83%ダウンɻ 9݄౓΋໨ඪʹରͯ͠10%Ҏ্ͷ૿Ճ͕ݟΒΕͨɻ 定性的ではあるがデザインに懸念がある顧客に対してリリース前に新UIを⾒せることにより成約となったユーザーも多数あった。 ͞ΒʹɺUI͕ݪҼͰϩετͨ͠Ϣʔβʔ਺͕ 0݅ ͱ͍͏૝ఆҎ্ͷ੒ՌΛୡ੒ͨ͠ɻ 評価期間があるため、本当の結果がわかるまでは௕ظؒかかるがすでに⼀定の効果が⾒えている。

Slide 28

Slide 28 text

実施プロセスの中でのNCDCの活動に対する評価評価 l  KING OF TIME のUXUI改善をする上でのパートナーとして当初期待していたことを完璧にこなしてくれた。 l  デザイン⾯においての疑問に丁寧に答えてくれた。なぜこの⾊なのか、なぜこの場所にこれがあるのか等、あいまいな質問にも丁寧に答えてくれた。ブランディングワークショップを開催し、皆の持っているイメージからデザインの⽅向性を導いてくれた。 l  ⼀時期、JSの速度が出ずに困っていたがすばらしいエンジニアスキルとUXの変更で期待に応えてくれた。

Slide 29

Slide 29 text

UXデザインに対する今後の取り組み KING OF TIME 次フェーズはUXの変更を⾏い、既存顧客の定着率を⾼める。新規サービス新規サービスを始める際に、同じテーマでUIを作成することにより、会社として⼀体感のあるサービス展開を⽬指す。デザインの内製化デザイナーを社内で雇⽤し、スピードアップとҰ෦ͷ内製化を進める。

Slide 30

Slide 30 text

·ͱΊ まとめ l  パートナー選びは最重要項⽬なので納得⾏く選考を⾏う ⇒ ⼀時的にコストがかさむがそれも投資と考える l  UXUI改善も投資の⼀つなので、もっとも効果的で費⽤対効果の⾼い部分から⼿を付ける ⇒ ⼿がつけやすいところから⾏うと、何をやっているのかわからなくなる。また⼿をつける部分は⼀気に⾏う。 l  改善の⽬的をメンバー全員で共有し、腑に落ちるようにする ⇒ ⽬的がはっきりしているため、部署間での連携がスムーズに⾏く

Slide 31

Slide 31 text

࠷ޙʹ ઈࢍืूதʂ l UXUIσβΠφʔืूதʂ l ϑϩϯτΤϯυΤϯδχΞืूதʂ Greenͱ͍͏స৬αΠτͰืू͍ͯ͠·͢ɻͥͻڵຯ͕͋Δํ͸Ԡืͯ͠Լ͍͞ɻ ࿩Λฉ͍ͯΈ͍͚ͨͩͰ΋݁ߏͰ͢ʂ

Slide 32

Slide 32 text

ご清聴、ありがとうございました。