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
680
Rettyとオレンジの歩み
yuri
August 09, 2023
Tweet
Share
Other Decks in Design
See All in Design
Ride or Die Animatics
warwatkar
0
140
デザインをみんなのものに 「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
340
現象と向き合うデザイン @Spectrum Tokyo Festival 2023
hirokazu_oda
3
1.3k
PRDがデザインプロセスを高速化した話
tooomo
1
330
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.1k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
290
Information Architects: The Missing Link in Design Systems
soysaucechin
0
120
Goodpatch Tour💙 / We are hiring!
goodpatch
28
700k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
250
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
120
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
165
13k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Statistics for Hackers
jakevdp
790
220k
GraphQLとの向き合い方2022年版
quramy
33
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Design by the Numbers
sachag
274
18k
Web development in the modern age
philhawksworth
203
10k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
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使ってみてください!