Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
レコメンドエンジンを Figma で爆速 UX リサーチ
Search
konumaru
December 01, 2021
0
8.1k
レコメンドエンジンを Figma で爆速 UX リサーチ
完成図のデモ動画:
https://www.youtube.com/watch?v=STE7Basj82U
konumaru
December 01, 2021
Tweet
Share
More Decks by konumaru
See All by konumaru
main.pdf
konumaru
0
240
7日で学んだ強化学習
konumaru
0
210
AutoML 使ってみた
konumaru
0
160
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
132
8.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Typedesign – Prime Four
hannesfritz
39
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Done Done
chrislema
181
16k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Happy Clients
brianwarren
97
6.7k
What's in a price? How to price your products and services
michaelherold
243
12k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Transcript
レコメンドエンジンを Figma で爆速 UX リサーチ 1
ToC プロトタイピングとは プロトタイピングはなぜ必要? 既存のプロトタイピング 既存のプロトタイプへの色々 なぜ Figma だったのか 完成図のデモ動画 ユーザーテストの全体像
これからやっていきたいこと まとめ 2
自己紹介 konumaru @knmr_u 簡単な経歴 データサイエンティストとし て SaaS の会社に新卒入社 いつの間にか PdM
やる 今は CGM の会社で PdM ダイパ世代なので最近は で夜な 夜な思い出に浸ってる 3
プロトタイピングとは プロトタイピング(Prototyping)とは、実働するモデル(プロトタイプ)を早期に製作 する手法およびその過程を意味する。その目的は、設計を様々な観点から検証する、機 能やアイデアを形にすることでユーザーから早めにフィードバックを得るなど、様々で ある。 「プロトタイピング」Wikipedia より 要するに、試作品作って早い段階でわからないことを減らそうねってこ と 4
プロトタイピングはなぜ必要?① こんなメリットがある 作りたいもののイメージを具体的に持てる 関係者間での認識を合わせやすい 想定していなかった問題に早期に気がつける 高い精度のユーザーの声を聞ける, etc 5
プロトタイピングはなぜ必要?② デメリットもある 既存のシステムを汚してしまう プロトタイプに夢中になって完成しない 既存のシステムとはかけ離れたものを作ってしまう プロトタイピングが目的になる, etc 6
今回のお題 「ホーム画面に出るコンテン ツのもっといい感じにして欲 しい」 こういうの 7
既存のプロトタイピング 8
既存のプロトタイピングへの色々 アイディアから実現までのリードタイムを短くしたかった 現状だと短くても1ヶ月はかかる見積もり 本番環境へのリリースとなるため、実験も開発も安全な択を選びがち 検証をするなら大きな変更をするほうが新たにわかることが多い(はず) レコメンドエンジンの改善アイディアが出る量とそれを検証できるスピートが一致しな い アイディアはたくさんあるのにプロダクトへの実装が大変で積みがち とかとか 9
なぜ Figma だったのか 以下の要件を満たしてたから UI を手軽に作れて触れる spreadsheet のデータを UI に反映できる
他にも、STUDIO,miro あたりを検討した 10
試しみやってみる 11
お題:楽天市場をプロト タイピングする 赤色で囲まれたこの部分だけやる Figma のGoogle Sheets Syncという Plugin を活用する 12
完成図のデモ動画 GeForce RTX 3080 の値段を 100 円にしてみます YouTube へのリンク *
SpeakerDeck からはリンクに飛べなかったので Description にリンクを載せました (下にスクロールしたらリンクが出てきます) 13
ユーザーテストの全体像 ホーム画面のデザインは Figma で一度作ってしまえば修正の手間はほぼ0 実際のプロダクトではないがほぼ近い形で feedback が得られる モデルの修正は spreadsheet の時点で分離しているので独立して開発できる
14
細かい UX リサーチの作法はこのあたりが参考になる 15
これからやっていきたいこと ユーザーインタビューの仕組み化 効果検証の計測の仕組みづくり レコメンドエンジンの改善と UI の改善の分離 など 16
まとめ 実現手段はなんでもよくて、 最も早くユーザーが見れて触れるプロトタイプを作ることが重要 だし、そういうものづくりのほうが圧倒的に楽しい 17
参考資料 「スピード」と「品質」のスイッチング ~事業成長を支える生存戦略~ #devsumi デザインリサーチの教科書 ユーザーインタビューをはじめよう ― UX リサーチのための、「聞くこと」入門 UX
リサーチの道具箱 イノベーションのための質的調査・分析 18