Rettyとオレンジの歩み

Rettyとオレンジの歩み 2023.8.8 デザイナー松園友里

自己紹介松園友里 2022年8月にジョイン。ネット予約チームでweb上の店舗トップや予約フォームの体験改善を行っている。仮説から施策立案、デザインまで関わり体験はもちろん、数値(CVR)も右肩に上げることに貢献。前Q、チームとしてMVPを受賞。

目次・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 店舗ページ予約ページ

ユーザー視点で押しやすさのコントラストを 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使ってみてください！

Rettyとオレンジの歩み

Rettyとオレンジの歩み

yuri

Other Decks in Design

Featured

Transcript