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
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Gamification - CAS2011
davidbonilla
80
5k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How STYLIGHT went responsive
nonsquared
95
5.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A designer walks into a library…
pauljervisheath
203
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
4 Signs Your Business is Dying
shpigford
180
21k
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