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
Rettyとオレンジの歩み
Search
yuri
August 09, 2023
Design
0
780
Rettyとオレンジの歩み
yuri
August 09, 2023
Tweet
Share
Other Decks in Design
See All in Design
ホワイト化するこの世界の片隅に
hisayosky
0
190
アクセシビリティって何だろう? -アクセシビリティの概念、そして向き合い方まで-
securecat
5
930
0-1に挑むデザイナーが 知っておきたい2つの前提
swaaan
3
850
ノンデザイナーでもできる。直感的で使いやすいUIの設計方法
ncdc
8
6.5k
速攻で価値検証して無駄なものを作らないプロダクトデザイン
cremacrema
3
320
インターフェースのユーザビリティ概論および調査手法について
readymadegogo
0
130
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
720
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
0
390
Breaking News on the Web
souvikdg
0
380
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
340
User Experience Design für Entwickler
joergneumann
4
910
他人事じゃないWebアクセシビリティ入門
arihiro17
0
370
Featured
See All Featured
The Cult of Friendly URLs
andyhume
75
5.9k
Facilitating Awesome Meetings
lara
46
5.8k
Music & Morning Musume
bryan
43
5.9k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Bash Introduction
62gerente
607
210k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
BBQ
matthewcrist
82
9k
Practical Orchestrator
shlominoach
185
10k
Designing for Performance
lara
604
67k
Code Reviewing Like a Champion
maltzj
517
39k
How STYLIGHT went responsive
nonsquared
93
5k
How to Think Like a Performance Engineer
csswizardry
4
590
Transcript
Rettyとオレンジの歩み 2023.8.8 デザイナー 松園 友里
自己紹介 松園 友里 2022年8月にジョイン。 ネット予約チームでweb上の店舗トップや 予約フォームの体験改善を行っている。 仮説から施策立案、デザインまで関わり 体験はもちろん、数値(CVR)も右肩に上げることに貢献。 前Q、チームとしてMVPを受賞。
None
目次 ・Rettyのオレンジ ・オレンジとの付き合い方 ・オレンジの前にやるべきことがある! ・オレンジと向き合ってみた! ・まとめ
Rettyのオレンジ
#FFA014 2.04.....
オレンジとの付き合い方
オレンジの前に やるべきことがある!
コントラスト比 < 周りの情報との コントラスト Rettyが力を入れていること
周りの情報との コントラスト Rettyが力を入れていること
オレンジが画面内に たくさんある問題 Topic 1
コースカセットの予約ボタン削除 CVボタンであり数値に絡んでくるため なかなか削除に踏み切ることができていなかった Before 画面内にCVボタンが多く、みてほしいコ ンテンツに集中できていないのでは.... そもそもコースは詳細を見てからじゃない と、予約に踏み切れないのでは....
CTRは下がったものの、完了率としてはほぼ横ばい。 体験的には良くなったのでポジな結果に 各コースの比較がしやすく、 コンテンツに集中しやすくなった コースエリアでの体験も 詳細→予約へとシンプルでスムーズに コースカセットの予約ボタン削除 After
Before After ヘッダーをオレンジから白に
CVボタンの色が緑とオレンジの 2種類存在する問題 Topic 2
ボタン色の統一 retty.me/area/PRE00/ARE111/SUB22222/19981113/ retty.me/area/PRE00/ARE111/SUB22222/19981113/ onakapekkori retty.me/area/PRE00/ARE111/SUB22222/19981113/ retty.me/area/PRE00/ARE111/SUB22222/19981113/ onakapekkori 店舗ページ 予約ページ
ボタン色の統一 retty.me/area/PRE00/ARE111/SUB22222/19981113/ retty.me/area/PRE00/ARE111/SUB22222/19981113/ onakapekkori retty.me/area/PRE00/ARE111/SUB22222/19981113/ retty.me/area/PRE00/ARE111/SUB22222/19981113/ onakapekkori 店舗ページ 予約ページ
ボタン色の統一 retty.me/area/PRE00/ARE111/SUB22222/19981113/ retty.me/area/PRE00/ARE111/SUB22222/19981113/ onakapekkori retty.me/area/PRE00/ARE111/SUB22222/19981113/ retty.me/area/PRE00/ARE111/SUB22222/19981113/ onakapekkori 店舗ページ 予約ページ
ユーザー視点で 押しやすさのコントラストを Topic 3
ユーザーがこの画面でしてほしいことが わかりにくいのでは? ボタンにシャドウを加えた Before ◆事実 予約フォームの日時/人数選択画面の 遷移率がPCよりも低い ◆PCとの違い PCは選択すると下に進んでいく(=次にコースを 選択することがその画面で明示されている)のに対し、
SPはステップごとに画面が変わる
Before ボタンにシャドウを加えた After
Before ボタンにシャドウを加えた After 前Qの予約フォーム内での施策で 効果が一番高かった!!!!
1. ノイズになっているオレンジの削除 2. コンテンツのプライマリーカラーの統一 3. ボタン自体の強調 周りの情報とのコントラストまとめ
オレンジと 向き合ってみた!
コントラスト比 Rettyが力を入れていること
グラデーションで 打倒!コントラスト比
アプリアイコン 〜2016年 2017年リニューアル 重厚感、高級感、 大人っぽい、落ち着いた シャープで洗練された、 新しい、研ぎ澄まされた #000000 に #000000
に グラデーション グラデーション
人気店ラベル 人気店ラベル そのジャンルに詳しいユーザーさん達のオススメから 厳選されたお店のみにつくラベル Rettyの人気店とは? Rettyのユーザーさんの中には特定のジャンルに詳しい方々 がいる。Rettyの人気店は、食に詳しいユーザーの皆さんの オススメが集まることで作られる。 ※ 投稿数・好きなジャンルは2021年11月時点のものです
人気店ラベル 人気店ラベル=独自のコンテンツ ・コンテンツの中で重要なポジション ・ジャンルに目が行きやすいように
1. Rettyの体験として重要なものは コントラスト比を保つように工夫 2. グラフィックのテクニックで 視認性を確保する 配色によってオレンジの弱点を克服 ボタンはかなりハードルが高いので、他の部分から改善していく コントラスト比のまとめ
現状、最適解ではなくまだまだ発展途上 Rettyとオレンジの歩み 引き続き、ブランドカラーとの付き合い方は模索していきます to be continued....
ありがとうございました! ぜひRetty使ってみてください!