SlideShare a Scribd company logo
1 of 32
Download to read offline
ROIを最⼤化するUXデザインの取り組み
株式会社ヒューマンテクノロジーズ
システム運⽤部 部⻑ ⽷井 隆徳
2016.11.30
会社及びサービス紹介
ヒューマンテクノロジーズ 及び KING OF TIME について
● 2003.12 株式会社ヒューマンテクノロジーズ設⽴
● 2004.11 勤怠管理クラウドサービス『KING OF TIME』サービスイン。
● 2009 ご利⽤ユーザー数 No.1
● 2016 利⽤者数6500社、46万⼈
⾃⼰紹介
登壇者について
l ⽷井 隆徳
l システム運⽤部 部⻑
l KING OF TIME とセキュリティソリューションのシステム部⾨統括
本⽇の内容
勤怠管理サービス『KING OF TIME』が⾏ったUXUI変更への取り組みについ
て
l プロジェクトの理由
l プロジェクトを始めるにあたって
l パートナー選定プロセス
l UXUI変更のプロセス
l 成果
プロジェクトの理由(課題)
KING OF TIMEの抱える課題
KING OF TIMEは2004年にサービスイン、それ以降⼤きなUXUIの変更はない。
開発⾯での課題
l UXUIに対して指針がない。そのため
• 機能追加が⾏われる際に、UXUI⾯での統⼀が図られていない。
• 開発者がどう作ればいいか迷う。
⇒ 結果、ベストとは⾔いがたいものになってしまっている状態。
⇒ 改善したい思いはあれど、俺たち開発だからデザインのことよくわかんないし...という悲しい状態に。
プロジェクトの理由(課題)
KING OF TIMEの抱える課題
営業・サポート⾯での課題
l UXUIの優れた後発サービスと競合になった際に、そこが理由で負ける場合がある。
⇒ ユーザーは同じ機能なら、当然 ⾒た⽬のいい⽅を選びますよね?
⇒ 沢⼭、サービスを評価するのは⼤変だから
ぱっと⾒て⾒栄えのよさそうな⽅から評価しますよね?
プロジェクトを始めるにあたって
痛みを共有するプロセス
実は⼀度、UIを少し変えたことがあります。
結果
プロジェクトを始めるにあたって
痛みを共有するプロセス
今までの使い⽅と少し変わったため、
某⼤規模ユーザー様からとても⼤きなお叱りを受ける。
⇒ 当時の改善はあくまで主観からの変更で理論が伴っていなった。
⇒ そのため、ユーザーにきちんと意図を伝えることができなかった。
プロジェクトを始めるにあたって
痛みを共有するプロセス
その苦い経験から、どの部署も積極的にUXUI変更に⼤きな声を挙げることもなく何年か
経ちました。
しかし、去年やはりUXUI変更をしたい、という社内的な雰囲気の⾼まりがあり、実現する
にはどうすればよいかという話し合いを⾏いました。そこで出てきた結論は
プロジェクトを始めるにあたって
痛みを共有するプロセス
まずは⾃分たちが納得できる理論、プロセスとデザインを持ってお客様へも胸を張って
改善しましたと⾔えるようにしたい!
⇒ どうやったら納得⾏くものができるか、⾃分たちに基準と⾃信がない。
⇒ ⾃分たちだけでなく外部の専⾨家の⼒を借りよう!
パートナー選定プロセスとその理由
パートナー選定の⽅法
⾃分たちの⼤事なサービスを共に改善していく協⼒者を選ぶ、
というのがこのプロジェクトを成功させるために⼀番重要だと位置づけました。
では、どんなパートナーがいいでしょうか?
パートナー選定プロセスとその理由
パートナー選定の⽅法
それは評価してみないと分からない。
パートナーの評価 ⇒ ⼀緒に仕事をして初めて分かる
と考え、同じ課題を複数業者と同時に⾏うことを決めました。
経費も時間も数倍かかるのですが、これは我々にとっては⾃然な結論でした。
皆さんも、製品やサービスを選ぶのに複数のものを⽐較して決めますよね?それと同じことです。
パートナー選定プロセスとその理由
最初の選定
まず、条件として下記を考えWebサイトを参考に7社選びました。
l WebサービスのUXUI作成ができる。
l Javascriptに造詣が深い。
l 弊社技術者とペアプログラミングが可能
l ⼤規模サイトの作成に関わったことがある。
l UXUIについてのコンサルティングができる。
パートナー選定プロセスとその理由
最初の選定
その中から3社に絞込み、3社に対して同じ課題をプロジェクトとして⾏いました。
l Fixel(NCDC)様
l A社 ・・・ ⼤規模向けUXUIを得意とするオールラウンダー。
l B社 ・・・ 若さとやる気にあふれ⼩規模であることを活かして、細やかな対応が期待できる。
パートナー選定プロセスとその理由
課題内容
KING OF TIME の従業員個⼈⽤画⾯(タイムカードと勤怠にまつわる申請)の再設計
期間は約1ヶ⽉。その中で
l 分析と⽅向性決定
l ワイヤーフレーム
l ヴィジュアルデザイン
l コーディング(ペアプログラミング)
を⾏いました。
パートナー選定プロセスとその理由
評価
※各項⽬ 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
NCDCさんを選んだ理由
選定理由
l Fixel(NCDC)様とA社は独⾃基準のポイントでは拮抗していた。
l 単純なUXUIの改修によるユーザーへの効果だけではなく、ビジネス⾯での戦略から効果を測るという提案があ
った。
l 競合分析を⾏い最も効果的なアプローチの提案があった。
l ユーザーアンケートという、我々が全く思いつかなかった提案をしてくれた。
l 我々の⾔うことを鵜呑みにせず、きちんと俯瞰した視点から提案があった。
l 技術者のスキルが確かなものだった。我々のエンジニアへのスキルトランスファーも踏まえた
ペアプロを⾏ってくれた。
パートナー選定を終えて
感想
l 正直、きつかったです。
1ヶ⽉とはいえ、3本同じプロジェクトを同時にこなしていたので頭の混乱度、時間的制約は
かなりあった。
l ただ、徐々に⾃分たちの中で今後のプロジェクトの成功に対する確信も⾼まっていった。
l 本プロジェクトの成功の鍵はパートナー選定と、それを⾏ったことによる⾃分たちの変化。
⇒ ⼟壌はできたのであとはやるだけ!
UXUI改修のプロセスの紹介
⽬標の設定とデザイン変更の意義
まず、UXUIの改修を⾏うことにより何を成し遂げたいのか?
当然、『KING OF TIME』ビジネスの成功が⽬標にあるのですが、最も効果的な(ROIの⾼い)部分
から着⼿することにしました。
また、デザイン変更の意義についても
UXUIデザインが古臭い&使い⾟いから変更する ⇒ 売上向上を⽬的としてUXUIデザイン変更する
と位置づけました。
UXUI改修のプロセスの紹介
UXUI改修のプロセスの紹介
⽬標
リード数の増加と評価フェーズに⼊ったユーザーを逃さないことを第⼀に考え、UIの変更から⾏うこ
とに決定。
また、以前から評価直後にユーザーが何をすればよいか分かりにくい、という点に着⽬し、その部分
のみUXの変更を⾏うことにしました。
UXUI改修のプロセスの紹介
体制
MTG:週⼀度で定例MTGを⾏いました。弊社側の体制としては開発だけではなく、サポート、営業
も参加し、変更の意義と効果を確認しつつ進めました。
これにより、変更によって発⽣する、今後の新規顧客へのサポートや既存顧客へのフォローを全社的
に⾏うことができた。
連絡⼿段:Slack
UXUI改修のプロセスの紹介
実際に⾏ったこと
l 150画⾯を、⼩出しに出すのではなく⼀気に変更を⾏いました。
⇒ 段階的に⾏うとユーザーに負荷がかかるため
l 旧UIは既存顧客⽤に残し、サーバーサイドは⼿を⼊れず新UIを新設しました。
⇒ 既存ユーザーへの配慮と最悪の事態に備え、ロールバックを容易くするため。
l 1年後に旧UIは撤廃予定でそれまでは2重メンテを続けていきます。
成果
トップ画⾯のUX変更
トップから⼊った際に、メニューに強弱がないためどこを優先して使えばよいかわからない。
メニューの構成を銀⾏の業務になぞらえ
l よく使うもの ⇒ ATM:よく使い、すぐにアクセス可能なものにする
l たまに使うもの ⇒ 1F窓⼝:たまに使う。
l あまり使わないもの ⇒ 2階の投資窓⼝:ほとんど使わない
に整理
トップ画⾯の変更(旧)
成果
メニューに強弱
がない
トップ画⾯にな
くてもよい情報
Todoが⼩さく
てわかりずらい
トップ画⾯の変更(新)
成果
よく使う機能は
アクセスしやす
い場所へ配置
ToDoをシンプ
ルで分かりやす
くした
他の機能は
中へ隠した
成果
KING OF TIMEのリードユーザー数
2016年8⽉に新UIをリリースした結果、
7⽉度リード数に⽐べ8⽉度リード数は10%アップ!
通常8⽉度はリード数が落ち込むところ、逆にアップとなった。ちなみに去年は-83%ダウン。
9⽉度も⽬標に対して10%以上の増加が⾒られた。
定性的ではあるがデザインに懸念がある顧客に対してリリース前に新UIを⾒せることにより成約となったユーザーも多数あった。
さらに、UIが原因でロストしたユーザー数が 0件 という想定以上の成果を達成した。
評価期間があるため、本当の結果がわかるまでは⻑期間かかるがすでに⼀定の効果が⾒えている。
実施プロセスの中でのNCDCの活動に対す
る評価
評価
l KING OF TIME のUXUI改善をする上でのパートナーとして当初期待していたことを完璧にこなしてくれた。
l デザイン⾯においての疑問に丁寧に答えてくれた。なぜこの⾊なのか、なぜこの場所にこれがあるのか等、
あいまいな質問にも丁寧に答えてくれた。
ブランディングワークショップを開催し、皆の持っているイメージからデザインの⽅向性を導いてくれた。
l ⼀時期、JSの速度が出ずに困っていたがすばらしいエンジニアスキルとUXの変更で期待に応えてくれた。
UXデザインに対する今後の取り組み
KING OF TIME
次フェーズはUXの変更を⾏い、既存顧客の定着率を⾼める。
新規サービス
新規サービスを始める際に、同じテーマでUIを作成することにより、
会社として⼀体感のあるサービス展開を⽬指す。
デザインの内製化
デザイナーを社内で雇⽤し、スピードアップと⼀部の内製化を進める。
まとめ
まとめ
l パートナー選びは最重要項⽬なので納得⾏く選考を⾏う
⇒ ⼀時的にコストがかさむがそれも投資と考える
l UXUI改善も投資の⼀つなので、もっとも効果的で費⽤対効果の⾼い部分から⼿を付ける
⇒ ⼿がつけやすいところから⾏うと、何をやっているのかわからなくなる。
また⼿をつける部分は⼀気に⾏う。
l 改善の⽬的をメンバー全員で共有し、腑に落ちるようにする
⇒ ⽬的がはっきりしているため、部署間での連携がスムーズに⾏く
最後に
絶賛募集中!
l UXUIデザイナー募集中!
l フロントエンドエンジニア募集中!
Greenという転職サイトで募集しています。ぜひ興味がある⽅は応募して下さい。
話を聞いてみたいだけでも結構です!
ご清聴、ありがとうございました。

More Related Content

Similar to HT Itoi_sama UX

インタリオカンファレンス案内(修正版)3
インタリオカンファレンス案内(修正版)3インタリオカンファレンス案内(修正版)3
インタリオカンファレンス案内(修正版)3
Tomoaki Sawada
 
インタリオカンファレンス案内(修正版6)092408
インタリオカンファレンス案内(修正版6)092408インタリオカンファレンス案内(修正版6)092408
インタリオカンファレンス案内(修正版6)092408
Tomoaki Sawada
 

Similar to HT Itoi_sama UX (20)

Keycloak & midPoint の紹介
Keycloak & midPoint の紹介Keycloak & midPoint の紹介
Keycloak & midPoint の紹介
 
「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112
「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112
「IoTで広がる未来への可能性」熊本IoTアライアンスキックオフセミナー 170112
 
「IoTで創造する新しい産業」高知家フューチャーセミナー 161107
「IoTで創造する新しい産業」高知家フューチャーセミナー 161107「IoTで創造する新しい産業」高知家フューチャーセミナー 161107
「IoTで創造する新しい産業」高知家フューチャーセミナー 161107
 
[Cloud OnAir] お客様事例紹介 -リクルートライフスタイルにおける デジタルトランスフォーメーションとクラウド活用- 2018年7月12日 放送
[Cloud OnAir] お客様事例紹介 -リクルートライフスタイルにおける デジタルトランスフォーメーションとクラウド活用- 2018年7月12日 放送[Cloud OnAir] お客様事例紹介 -リクルートライフスタイルにおける デジタルトランスフォーメーションとクラウド活用- 2018年7月12日 放送
[Cloud OnAir] お客様事例紹介 -リクルートライフスタイルにおける デジタルトランスフォーメーションとクラウド活用- 2018年7月12日 放送
 
IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1IAチャンネル:nissenのIA最適化事例その1
IAチャンネル:nissenのIA最適化事例その1
 
Tibco mashery資料
Tibco mashery資料Tibco mashery資料
Tibco mashery資料
 
インタリオカンファレンス案内(修正版)3
インタリオカンファレンス案内(修正版)3インタリオカンファレンス案内(修正版)3
インタリオカンファレンス案内(修正版)3
 
今更ながらの「マイクロサービス」
今更ながらの「マイクロサービス」今更ながらの「マイクロサービス」
今更ながらの「マイクロサービス」
 
200504 fin-Jaws #12 School Atsumi
200504 fin-Jaws #12 School Atsumi200504 fin-Jaws #12 School Atsumi
200504 fin-Jaws #12 School Atsumi
 
業務プロセス改革とデータマイニング -2010年度LBIビジネス講演会
業務プロセス改革とデータマイニング -2010年度LBIビジネス講演会業務プロセス改革とデータマイニング -2010年度LBIビジネス講演会
業務プロセス改革とデータマイニング -2010年度LBIビジネス講演会
 
アジャイル事例紹介
アジャイル事例紹介アジャイル事例紹介
アジャイル事例紹介
 
Heroku Update Jul, 2013
Heroku Update Jul, 2013Heroku Update Jul, 2013
Heroku Update Jul, 2013
 
ぐるなびが活用するElastic Cloud
ぐるなびが活用するElastic Cloudぐるなびが活用するElastic Cloud
ぐるなびが活用するElastic Cloud
 
【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術【初公開】チャットワーク検索機能を支える技術
【初公開】チャットワーク検索機能を支える技術
 
SaaSをもっと便利に、使いやすくする方法 [Oracle Cloud Days Tokyo 2016]
SaaSをもっと便利に、使いやすくする方法 [Oracle Cloud Days Tokyo 2016]SaaSをもっと便利に、使いやすくする方法 [Oracle Cloud Days Tokyo 2016]
SaaSをもっと便利に、使いやすくする方法 [Oracle Cloud Days Tokyo 2016]
 
OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果
OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果
OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果
 
IT Pro EXPO 2016 | 実践IoT!最新活用事例30選
IT Pro EXPO 2016 | 実践IoT!最新活用事例30選IT Pro EXPO 2016 | 実践IoT!最新活用事例30選
IT Pro EXPO 2016 | 実践IoT!最新活用事例30選
 
ソーシャルメディア戦略の基盤に欠かせないクラウドの今
ソーシャルメディア戦略の基盤に欠かせないクラウドの今ソーシャルメディア戦略の基盤に欠かせないクラウドの今
ソーシャルメディア戦略の基盤に欠かせないクラウドの今
 
インタリオカンファレンス案内(修正版6)092408
インタリオカンファレンス案内(修正版6)092408インタリオカンファレンス案内(修正版6)092408
インタリオカンファレンス案内(修正版6)092408
 
[Cloud OnAir] アプリケーションにフォーカス!ビジネスに直結する開発の極意をご紹介します。(LIVE) 2018年3月8日 放送
[Cloud OnAir] アプリケーションにフォーカス!ビジネスに直結する開発の極意をご紹介します。(LIVE) 2018年3月8日 放送[Cloud OnAir] アプリケーションにフォーカス!ビジネスに直結する開発の極意をご紹介します。(LIVE) 2018年3月8日 放送
[Cloud OnAir] アプリケーションにフォーカス!ビジネスに直結する開発の極意をご紹介します。(LIVE) 2018年3月8日 放送
 

More from Fixel Inc.

More from Fixel Inc. (7)

元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
元ITコンサルタントの目から見た「ITにおける今までのデザインとこれからのデザイン」
 
サーバレスを可能にするAWSサービスの概要
サーバレスを可能にするAWSサービスの概要サーバレスを可能にするAWSサービスの概要
サーバレスを可能にするAWSサービスの概要
 
業務システムにおけるインタラクションとアニメーション
業務システムにおけるインタラクションとアニメーション業務システムにおけるインタラクションとアニメーション
業務システムにおけるインタラクションとアニメーション
 
新サービス活用おけるUXの活用事例
新サービス活用おけるUXの活用事例新サービス活用おけるUXの活用事例
新サービス活用おけるUXの活用事例
 
ITにおけるデザイン活用の課題と対応策ーデザインシステムでできること
ITにおけるデザイン活用の課題と対応策ーデザインシステムでできることITにおけるデザイン活用の課題と対応策ーデザインシステムでできること
ITにおけるデザイン活用の課題と対応策ーデザインシステムでできること
 
明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介明日から使える業務向けデザインシステムのご紹介
明日から使える業務向けデザインシステムのご紹介
 
AWSを利用したアプリ開発
AWSを利用したアプリ開発AWSを利用したアプリ開発
AWSを利用したアプリ開発
 

HT Itoi_sama UX