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
1k
Rettyとオレンジの歩み
yuri
August 09, 2023
Tweet
Share
Other Decks in Design
See All in Design
Cyber Heart Online Book
hjnasby
0
180
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
130
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.3k
7 Core Values of Round-L
wired888
0
1.7k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
280
CursorでAI活用のナレッジベースを構築する
kanzaki
0
670
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
400
Findyのプロデチームの 歩みとこれから
satty9556
0
260
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualization
eitanlees
148
16k
Thoughts on Productivity
jonyablonski
70
4.8k
What's in a price? How to price your products and services
michaelherold
246
12k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Balancing Empowerment & Direction
lara
3
620
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Faster Mobile Websites
deanohume
309
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Done Done
chrislema
185
16k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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使ってみてください!