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

2016年11月30日開催しました「企業システム・サービスのためのUXデザイン最新事例セミナー」のセッション2「「KING OF TIME」のUXデザイン成功事例〜ROIを最大化するUXデザインの取り組み〜」/株式会社ヒューマンテクノロジーズ システム運用部 部長 糸井隆徳様の資料です。本資料に関するお問い合わせは、NCデザイン&コンサルティング株式会社（info@ncdc.co.jp）までご連絡ください。

Transcript

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の優れた後発サービスと競合になった際に、そこが理由で負ける場合がある。 ⇒ ユーザーは同じ機能なら、当然 ⾒た⽬のいい⽅を選びますよね？ ⇒ 沢⼭、サービスを評価するのは⼤変だから ぱっと⾒て⾒栄えのよさそうな⽅から評価しますよね？
7. プロジェクトを始めるにあたって 痛みを共有するプロセス 実は⼀度、UIを少し変えたことがあります。 結果
8. プロジェクトを始めるにあたって 痛みを共有するプロセス 今までの使い⽅と少し変わったため、 某⼤規模ユーザー様からとても⼤きなお叱りを受ける。 㱺 ౰࣌ͷվળ͸͋͘·Ͱओ؍͔ΒͷมߋͰཧ࿦͕൐͍ͬͯͳͬͨɻ 㱺 ͦͷͨΊɺϢʔβʔʹ͖ͪΜͱҙਤΛ఻͑Δ͜ͱ͕Ͱ͖ͳ͔ͬͨɻ
9. プロジェクトを始めるにあたって 痛みを共有するプロセス その苦い経験から、どの部署も積極的にUXUI変更に⼤きな声を挙げることもなく何年か 経ちました。 しかし、去年やはりUXUI変更をしたい、という社内的な雰囲気の⾼まりがあり、実現する にはどうすればよいかという話し合いを⾏いました。そこで出てきた結論は
10. プロジェクトを始めるにあたって 痛みを共有するプロセス まずは⾃分たちが納得できる理論、プロセスとデザインを持ってお客様へも胸を張って 改善しましたと⾔えるようにしたい！ ⇒ どうやったら納得⾏くものができるか、⾃分たちに基準と⾃信がない。 ⇒ ⾃分たちだけでなく外部の専⾨家の⼒を借りよう！
11. パートナー選定プロセスとその理由 パートナー選定の⽅法 ⾃分たちの⼤事なサービスを共に改善していく協⼒者を選ぶ、 というのがこのプロジェクトを成功させるために⼀番重要だと位置づけました。 では、どんなパートナーがいいでしょうか？
12. パートナー選定プロセスとその理由 パートナー選定の⽅法 それは評価してみないと分からない。 パートナーの評価 㱺 ⼀緒に仕事をして初めて分かる と考え、同じ課題を複数業者と同時に⾏うことを決めました。 経費も時間も数倍かかるのですが、これは我々にとっては⾃然な結論でした。 皆さんも、製品やサービスを選ぶのに複数のものを⽐較して決めますよね？それと同じことです。
13. パートナー選定プロセスとその理由 最初の選定 まず、条件として下記を考えWebサイトを参考に7社選びました。 l  WebサービスのUXUI作成ができる。 l  Javascriptに造詣が深い。 l  弊社技術者とペアプログラミングが可能 l  ⼤規模サイトの作成に関わったことがある。 l  UXUIについてのコンサルティングができる。
14. パートナー選定プロセスとその理由 最初の選定 その中から3社に絞込み、3社に対して同じ課題をプロジェクトとして⾏いました。 l  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  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改修のプロセスの紹介
21. UXUI改修のプロセスの紹介 ⽬標 リード数の増加と評価フェーズに⼊ったユーザーを逃さないことを第⼀に考え、UIの変更から⾏うこ とに決定。 また、以前から評価直後にユーザーが何をすればよいか分かりにくい、という点に着⽬し、その部分 のみUXの変更を⾏うことにしました。
22. UXUI改修のプロセスの紹介 体制 MTG：週⼀度で定例MTGを⾏いました。弊社側の体制としては開発だけではなく、サポート、営業 も参加し、変更の意義と効果を確認しつつ進めました。 これにより、変更によって発⽣する、今後の新規顧客へのサポートや既存顧客へのフォローを全社的 に⾏うことができた。 連絡⼿段：Slack
23. UXUI改修のプロセスの紹介 実際に⾏ったこと l 150画⾯を、⼩出しに出すのではなく⼀気に変更を⾏いました。 ⇒ 段階的に⾏うとユーザーに負荷がかかるため l 旧UIは既存顧客⽤に残し、サーバーサイドは⼿を⼊れず新UIを新設しました。 ⇒ 既存ユーザーへの配慮と最悪の事態に備え、ロールバックを容易くするため。 l 1年後に旧UIは撤廃予定でそれまでは2重メンテを続けていきます。
24. 成果 トップ画⾯のUX変更 トップから⼊った際に、メニューに強弱がないためどこを優先して使えばよいかわからない。 メニューの構成を銀⾏の業務になぞらえ l  よく使うもの 㱺 ATMɿΑ͘࢖͍ɺ͙͢ʹΞΫηεՄೳͳ΋ͷʹ͢Δ l  たまに使うもの 㱺 1F૭ޱɿͨ·ʹ࢖͏ɻ l  あまり使わないもの 㱺 2֊ͷ౤ࢿ૭ޱɿ΄ͱΜͲ࢖Θͳ͍ に整理
25. トップ画⾯の変更(旧) 成果 ϝχϡʔʹڧऑ ͕ͳ͍ τοϓը໘ʹͳ ͯ͘΋Α͍৘ใ Todo͕খͯ͘͞ Θ͔ΓͣΒ͍
26. トップ画⾯の変更(新) 成果 Α͘࢖͏ػೳ͸ ΞΫηε͠΍͢ ͍৔ॴ΁഑ஔ ToDoΛγϯϓ ϧͰ෼͔Γ΍͢ ͨ͘͠ ଞͷػೳ͸ த΁Ӆͨ͠
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の変更で期待に応えてくれた。
29. UXデザインに対する今後の取り組み KING OF TIME 次フェーズはUXの変更を⾏い、既存顧客の定着率を⾼める。 新規サービス 新規サービスを始める際に、同じテーマでUIを作成することにより、 会社として⼀体感のあるサービス展開を⽬指す。 デザインの内製化 デザイナーを社内で雇⽤し、スピードアップとҰ෦ͷ内製化を進める。
30. ·ͱΊ まとめ l  パートナー選びは最重要項⽬なので納得⾏く選考を⾏う ⇒ ⼀時的にコストがかさむがそれも投資と考える l  UXUI改善も投資の⼀つなので、もっとも効果的で費⽤対効果の⾼い部分から⼿を付ける ⇒ ⼿がつけやすいところから⾏うと、何をやっているのかわからなくなる。 また⼿をつける部分は⼀気に⾏う。 l  改善の⽬的をメンバー全員で共有し、腑に落ちるようにする ⇒ ⽬的がはっきりしているため、部署間での連携がスムーズに⾏く
31. ࠷ޙʹ ઈࢍืूதʂ l UXUIσβΠφʔืूதʂ l ϑϩϯτΤϯυΤϯδχΞืूதʂ Greenͱ͍͏స৬αΠτͰืू͍ͯ͠·͢ɻͥͻڵຯ͕͋Δํ͸Ԡืͯ͠Լ͍͞ɻ ࿩Λฉ͍ͯΈ͍͚ͨͩͰ΋݁ߏͰ͢ʂ
32. ご清聴、ありがとうございました。