$30 off During Our Annual Pro Sale. View Details »

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

NCDC
November 30, 2016

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

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

NCDC

November 30, 2016
Tweet

More Decks by NCDC

Other Decks in Business

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. UXUI改修のプロセスの紹介

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide