SlideShare a Scribd company logo
UXマップを使ったサービス改善
株式会社Fablic デザイナー
塚由 恵介
こんばんは!
プロフィール
• 塚由恵介(くれちょん)
• フリーランス→Fablicに入社
• フリルのUX設計、iOSアプリデザイン
を担当
• 外部で発表するの初めてです
• めちゃくちゃ緊張してます!
3
お知らせ
フリルリニューアルしました!
5
ファッションフリマアプリ女性向けのフリマアプリ
6
リニューアルの目的
• リブランディング
•価値観の軸足を拡張する or ズラす
•より多くの人に使ってもらいたい
•リデザイン
•インタラクションを最適化する
•よりフリルを楽しんでもらいたい
7
ファッションフリマアプリ
リニューアルの目的
• リブランディング
•価値観の軸足を拡張する or 変える
•より多くの人に使ってもらいたい
•リデザイン
•インタラクションを最適化する
•よりフリルを楽しんでもらいたい
8
今回はこちらのお話
ファッションフリマアプリ
インタラクションとは?
Twitterを例に紹介
Twitterを起動するときのインタラクション
インタラクションがうまくデザインされてい
ないと・・・
これはうまくいってる例
Twitterを起動するときのインタラクション
Twitterを起動するときのインタラクション
ユーザー「アプリが使いにくい…。」
ユーザー「だれが使うんだこの機能…。」
デザイナー「うまく使ってくれない…。」
コンテキストに応じたUIデザインができない
どうやって改善しよう?
「なぜ使いにくいのか?」を
可視化するためのUXマップを作ろう!
Fablic流UXマップ
どんなUXマップを作るか?
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
18
どんなUXマップを作るか?
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
19
ユーザーモデルごとのマップを作成
モデル=「こういうひとはだいたいこういう行動をする」
どんなUXマップを作るか?
• 初めての購入者
• 初めての出品者
• リピート購入者
• リピート出品者
20
ユーザーモデルごとのマップを作成
モデル=「こういうひとはだいたいこういう行動をする」
今回はこちらを紹介
Fablic流UXマップの作りかた
目的達成までのインタラクションを並べる
アプリとの最初の接点
アプリの導入
アプリスタート
Uxマップを使ったサービス改善
理想的な感情の動きをプロットする
理想的な感情の動きとは?
• サービスが立てた仮説ベース
• ある程度想像でOK
• こうなればいいね、というものを描く
28
Uxマップを使ったサービス改善
実際にあった感情の動きをプロットする
実際にユーザーに使ってもらう、書いてもらう
31
Uxマップを使ったサービス改善
実際にあったユーザーの声を反映
何回か繰り返してモデル化&精度をあげる
ちなみにニールセン先生によるとユーザビリティテストは5回繰り返すと
75%の傾向がわかるらしい
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
離脱
•詳しく調査
•わかった問題
•デフォルトでフリル内で人気のブランドを
出していたことが、ユーザーの好みを制限
していた
•男性には特にうまく機能していない
•考えられる解決案
•ブランドを好きに選べたら自分向けのアプ
リだと認識してもらえるのでは?
40
タイムラインで何が起こっていたのか?
Uxマップを使ったサービス改善
理想との乖離
理想でも低い
眺めているだけでも様々な問題が見つかる
UXマップを作ってよかったこと
45
UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
46
UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
• 今のインタラクションがどうなっているのかを
可視化できた
47
UXマップを作ってよかったこと
• コンテキストに沿った適切なUI設計をするため
の良い材料になった
• 今のインタラクションがどうなっているのかを
可視化できた
• ユーザー調査を繰り返すことで改めて適切な
ユーザーモデルを構築できた
48
その中でも一番よかったのが…
• チーム全体の意識がユーザーの体験の改善に
向いた
• チーム全体の意識がユーザーの体験の改善に
向いた
めっちゃユーザーファースト!
実践編
後編:UXマップを実践しよう
株式会社Fablic デザイナー
塚由 恵介
身近なところでの
UXマップの利用例を出すべく、考えてきました
Think User First を Think User First
ここでドヤ顔
Think User First を Think User First
• 普段はデザイナーであるみなさんにユーザーを
体験してもらおう!
• 今回のイベントを想定してUXマップを作って
みました
56
「来てよかったと思えるイベントのUXマップ」
「来てよかったと思えるイベントのUXマップ」
• インタラクション:ぼくがパイロットテストで確認
• 理想的UX:ぼくのかんがえたさいきょうのイベント
• 現実的UX:ぼくがいつも思うこと&ヒアリング
58
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
イベントとの最初の接点
イベント中のインタラクション
イベント後のインタラクション
Uxマップを使ったサービス改善
理想との乖離
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
どうすればこの乖離を小さくできるか?
話したい人が集まる話しやすい場所づくり
69 カジュアルに話しかけていいスペースをイベント内に設置
Uxマップを使ったサービス改善
理想との乖離
Uxマップを使ったサービス改善
Uxマップを使ったサービス改善
遅れてきても座りやすいように前から座って
もらうようアナウンス&スタッフによる誘導
74
クックパッドさんご協力ありがとうございました
Uxマップを使ったサービス改善
平日なので明日も仕事
お酒だけでなくソフトドリンクも豊富に
77
他にも…
• 多くの人にチャンスがある抽選制
• エレベーターホールに誘導張り紙
• 円滑に進行するためにパネルディスカッション
の質問をふせんで集める
そう、これが…!
Think User First を Think User First や!!
ここでもう一度ドヤ顔
お知らせ
凄腕デザイナー募集!!
積極採用中!!!
凄腕デザイナー募集!!
気になる方はWantedly経由もしくは直接ご連絡ください!
https://www.wantedly.com/projects/1425
パネルディスカッションをお楽しみに
&楽しい懇親会にしましょう!
資料は後ほど共有させていただきます
リンク
• http://keisuke.tsukayoshi.com
• https://twitter.com/redxiii_
• https://www.wantedly.com/projects/1425
85

More Related Content

PDF
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
PDF
Think user first #2 フリルの機能改善における仮説と検証
PDF
風呂場で考えるUIデザイナーの未来
PDF
デザイナーの私と サービスをつくる私
PDF
エクスペリエンス・デザイン
PDF
デザインのためのデザイン
PDF
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
PDF
デザインのための経営のデザイン
Holiday のデザインと開発 - ユーザーに価値を届けるためのプロトタイピングから実装まで
Think user first #2 フリルの機能改善における仮説と検証
風呂場で考えるUIデザイナーの未来
デザイナーの私と サービスをつくる私
エクスペリエンス・デザイン
デザインのためのデザイン
アプリを生み出す現場でUI/UXデザイナーが意識するべきこと:RoomClip
デザインのための経営のデザイン

What's hot (20)

PDF
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
PDF
「個」から「集」のデザイン
PDF
クックパッドデザイナーが実践するユーザーファースト
PDF
ブランディングを意識したサービス開発の一歩
PDF
SketchがAndroidのUIデザインに向いているワケ
PDF
サービスにおけるビジュアルデザインの役割
PPTX
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
PDF
Sketchで変わるワークフロー
PDF
UIデザイナー最終防衛マニュアル
PDF
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
PPTX
デザイナーが複業でデザイナーしてる話
PDF
DeNAでのサービスの作り方
PDF
これからのWebデザイナーのキャリアプラン
PDF
デザイナーとディレクターのイイ関係の作り方
PDF
レスポンシブサイト制作に効く デザインTipsあれこれ
PDF
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
PPTX
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
PDF
Creative insights 01 / 受託開発にプロトタイピングを導入した時のアレコレを語る
PDF
デザインに自信がつく、タイポグラフィの基本
PDF
デザインツール戦争とMaterial Theme Editor
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
「個」から「集」のデザイン
クックパッドデザイナーが実践するユーザーファースト
ブランディングを意識したサービス開発の一歩
SketchがAndroidのUIデザインに向いているワケ
サービスにおけるビジュアルデザインの役割
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Sketchで変わるワークフロー
UIデザイナー最終防衛マニュアル
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
デザイナーが複業でデザイナーしてる話
DeNAでのサービスの作り方
これからのWebデザイナーのキャリアプラン
デザイナーとディレクターのイイ関係の作り方
レスポンシブサイト制作に効く デザインTipsあれこれ
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Creative insights 01 / 受託開発にプロトタイピングを導入した時のアレコレを語る
デザインに自信がつく、タイポグラフィの基本
デザインツール戦争とMaterial Theme Editor
Ad

Viewers also liked (12)

PDF
BPStudy #111 iOS 10 and iPhone 7
PDF
UX milk (UX Jam) 20160108
PDF
UX Strategy 2016/06/18
PDF
DesignJP prototyping 20160825
PDF
Shin UX 2017 - UX strategy - UX review
PDF
新規事業サービス 「おいしい健康」の 機能追加・改善の仮説検証
PDF
チームを動かすデザイナー
PDF
Design JP vol2 (Motion Design & Animation)
PDF
UX Jam x UX Sketch 2017 HD
PDF
機能追加を行う際に考慮したい3つのポイント
PDF
AWA - Coockpad Tech Kitchen 20170913
PDF
自分たちでつくった"UXガイドライン"を片手に、クラウドワークスを作り変える。
BPStudy #111 iOS 10 and iPhone 7
UX milk (UX Jam) 20160108
UX Strategy 2016/06/18
DesignJP prototyping 20160825
Shin UX 2017 - UX strategy - UX review
新規事業サービス 「おいしい健康」の 機能追加・改善の仮説検証
チームを動かすデザイナー
Design JP vol2 (Motion Design & Animation)
UX Jam x UX Sketch 2017 HD
機能追加を行う際に考慮したい3つのポイント
AWA - Coockpad Tech Kitchen 20170913
自分たちでつくった"UXガイドライン"を片手に、クラウドワークスを作り変える。
Ad

Similar to Uxマップを使ったサービス改善 (20)

PPTX
UXdesign_schoo2/2
PPTX
Schoo講演資料130409
PDF
Schoo講演資料130409
PDF
Schoo講演資料130409
PPTX
UI/UXデザインでサイトを改善しよう
PDF
【Schoo web campus】8ヶ月で会員1万人と、総額8億円を集めたux改善 先生:吉田浩一郎
PDF
201210_オンデマンドコマースによるマネタイズ
PPTX
アイリッジご紹介資料
PDF
150806 カスタマージャーニーマップワークショップ
KEY
Bazaar
PDF
画面じゃなくて体験をデザインしよう!事業サイドとデザイナーで認識を一致させるカスタマージャーニーマップ作成ワークショップ
PDF
レビューサイト活用の重要性と効果測定 公開版
PDF
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
PDF
なぜUXをデザインしているのか
PDF
キッチンにはスマートフォンとカレーライス
PDF
201211オンデマンドコマースによるマネタイズ
PDF
新人が考える、UXと魔法の板っきれの話
PDF
第2回 FIC+FCS勉強会
PDF
App souken menu(ui&ux consulting)
PPTX
ソーシャルコマースとUI/UXの落とし穴
UXdesign_schoo2/2
Schoo講演資料130409
Schoo講演資料130409
Schoo講演資料130409
UI/UXデザインでサイトを改善しよう
【Schoo web campus】8ヶ月で会員1万人と、総額8億円を集めたux改善 先生:吉田浩一郎
201210_オンデマンドコマースによるマネタイズ
アイリッジご紹介資料
150806 カスタマージャーニーマップワークショップ
Bazaar
画面じゃなくて体験をデザインしよう!事業サイドとデザイナーで認識を一致させるカスタマージャーニーマップ作成ワークショップ
レビューサイト活用の重要性と効果測定 公開版
【Schoo web campus】webサイトの「ユーザー体験」を高める 先生:坂本貴史
なぜUXをデザインしているのか
キッチンにはスマートフォンとカレーライス
201211オンデマンドコマースによるマネタイズ
新人が考える、UXと魔法の板っきれの話
第2回 FIC+FCS勉強会
App souken menu(ui&ux consulting)
ソーシャルコマースとUI/UXの落とし穴

Uxマップを使ったサービス改善