【HT糸井様】UXセミナー20161130

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 Fixel(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 Fixel（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