スマートフォン版ページ、リニューアルしました

はじめまして
UXデザイナーの柴田と申します。みなさんがぐるなびと聞いて思い浮かべるであろう、お店の情報を掲載しているページを担当しています。（私達は ”店舗ページ” と呼んでいます）
ユーザー体験の向上・ネット予約への送客をミッションに、日々の数値を計測しながら、施策検討、ユーザーテストの実施、開発メンバーとの調整や運用作業などなど…業務内容は多岐にわたります。

この記事では、スマートフォン版の店舗ページのデザインリニューアルについてお話します。
サイトのデザインリニューアルを検討している方のご参考になれば幸いです。

今までの課題

ユーザーから頂戴していたご意見や、リニューアル前のデザインでユーザーテストを実施した結果、下記の課題が上がっていました。

・写真が小さい
・文字が小さい
・情報量が多い
・1ページに使用している色数が多く、ゴチャゴチャした印象

また、表示項目が多く仕様も複雑で、社内で改修を検討する都度時間を要している状態でした。

これらの原因は以下と分析しています。

・2000年代初頭のスマートフォン版立ち上げ後、デザインベースを変えていない
・当時の小さめの端末サイズをベースに文字・写真サイズを策定していた
・ユーザーテストを実施していなかった
・ユーザーの声を反映しないまま、項目追加を繰り返していた
・デザインのガイドラインは存在していたが、各パーツの利用ルールが明確に決まっていなかった

長い間、弊社内でも課題は認識しておりましたが、大規模な改修となるためなかなか動き出せない状態でした。

リニューアルをしよう！

それから長い間、課題の棚上げ状態が続きましたが、2019年末に今まで進められなかった各コンテンツのリニューアルを進める機運が高まり、店舗ページもリニューアルの実施が決定しました。
多くのwebサイト同様、ぐるなびの店舗ページもスマートフォン版ユーザーが多数派のため、まず今回はスマートフォン版のみにスコープを絞ることに。

ぐるなびでの開発案件の進行はウォーターフォールが多いですが ※1
今回はデザイン作成後、詳細仕様を詰める形で進めることにしました。
（これが後に混乱を招くことに…後述します）

店舗ページで最もPVが高く、表示内容が多いのがトップページです。

そのため、まずトップページのデザインを作成し、その他のページはトップページのデザインテイストに合わせて作成する形で進行する方針としました。
過去のデザインでは表示内容が多く複雑な仕様となっていましたが、ユーザーファーストを念頭に表示項目を精査し、とりわけトップページについては項目を大幅に削っています。

仕様を検討する

今までは「こういった改修をします！」というような内容ありきでの進め方も多かったですが、今回は課題を抽出した上で、そこから内容を検討することを重視しました。

課題は、以下から抽出を行っています。

・ユーザーからのご意見・ご要望・アンケート結果（エンドユーザーの声）
・加盟店からのご意見・ご要望（クライアントの声）
・社内でのユーザーテストの結果
・社内関係者にて、エンドユーザー視点でのワークショップ実施など

課題を抽出後、それらに関する裏付けをすべく、定量的・定性的な面でデータ収集を実施。

■定量データ
・各ページが閲覧されている割合
・各リンクがタップされている割合
・直帰率・離脱率
・ヒートマップ分析
・ページの掲載項目ごとの登録数・内容など

■定性データ
・競合サイトの状況
・ユーザー・加盟店からの、ご意見・お問い合わせ内容の分析結果
・社内および外部企業によるユーザー調査結果など

これらをもとに、優先度の高い課題からそれらを解消するための仕様・デザインを検討していきました。
一例として、トップページやナビゲーション項目の表示順は、データから見えてきたユーザーの需要が高い順をベースに表示しています。

デザインを作る

デザインはいくつか案を出しながら「トップページはその他の下層ページのサマリ。下層ページへユーザーを誘導する」というコンセプトのもと、作成を進めました。
分析の結果、複数のページを閲覧しているユーザーの方がCV（ネット予約）に繋がっているという結果があったためです。
「ページの回遊率を上げることで、CVRを高める」ことを目標に上記のコンセプトを作成しました。

・デザイン手法とガイドライン

今回のリニューアルに先行しぐるなびトップのリニューアルがリリースされていますが、 ※2
今回はその際に作成したデザインルールをアップデートしたものをベースに、店舗ページのデザインとガイドラインを作成した形です。

ぐるなびでは現在デザインシステムを構築を進めており、今回はアトミックデザインをベースにデザインを作成しました。
これにより、今まで不明瞭だったそれぞれの色・パーツの利用用途を明確に定義でき、トップページ以外の各種ページのデザイン作成もスムーズに進めることができました。

同様に今後、ぐるなびの検索やスマートフォン向けアプリなど、他のコンテンツともデザイン統一を前提としているため、各パーツのデザインは店舗ページ以外での利用にも耐えうる形を意識し、ガイドラインを定義しています。

※リニューアル時に作成した実際のガイドラインの一部

デザイン作成はAdobe XDを利用しています。
この案件では他のUIデザイナーに最新のデザインデータやガイドラインを随時共有する必要があったため、XDのクラウドドキュメントを使用し、リアルタイムの共有を心がけました。
これにより作業効率が上がり、デザイナー同士で認識を合わせやすかったのがよかったです。

・ユーザーテストの実施

作成したデザインでユーザーテストを実施していたのが3月頃だったのですが、
ちょうどコロナ禍でユーザーとの対面での実施が難しくなり、UIscopeを使ったリモートでのテストに切り替えて実施もしました。

全体的な印象や文字の可読性、スワイプ操作の認知、追加した項目の操作に迷わないか、
などの視点でユーザーテストを実施した結果、大きな課題は無かったためデザインをFix。

ちなみに、同時期から改修リリース前に原則ユーザーテストを実施する方針となりました。
今までは無秩序に項目追加をしていたところを、テストを実施しユーザー意見を取り入れることで利便性を担保しています。

※1：アジャイル開発を導入しているチームもあります
※2：ぐるなびトップのリニューアルについてはこちらの記事を参照

いざ実装

システム面の裏側については、ぐるなびエンジニアブログをご覧ください。
※近日公開予定

リニューアル後に起きたこと・反省点

大量の試験項目と少なくないバグを無事消化し、 9/7（月）に新デザインがリリースされました。

新デザインでは表示項目を精査し大きく内容を削った箇所もありましたが、マイナスの影響はほぼなく、ユーザーファースト観点での精査には成功したと言えそうです。

また、今回はデザインの統一を重視し、イレギュラーな強調や色使いはなるべくしないように設計しています。
その結果として、旧デザインで目立たせていた項目のCTRが下がっている状態です。
訴求が弱まったので当然ではあるのですが、デザイン統一と項目を目立たせるバランスを取ることが難しいことを痛感しています。

大きなプロジェクトでしたので反省点も多いですが、その1つとして
今回、デザイン作成後に仕様の詳細を詰めた結果、イレギュラーな表示など後からデザインパターンが足りなくなる場面が多々発生し、手戻りが多く現場に混乱を招きました。
デザインが必要なパターンの洗い出しと、UXデザイナー・UIデザイナーの目線合わせが重要であることを痛感しています。

今後の展望

今回のリニューアルで、店舗ページ内のデザインテイストは統一されましたが、ぐるなびの検索やスマートフォン向けアプリなどとのデザイン統一はまだこれからの状態です。
今後は店舗ページのデザインガイドラインを元に、ぐるなびとしてサイト全体を統一できるデザインガイドラインの策定を目指しています。

また、PC版のページは今回対応できず、古いデザインのままの状態です。
こちらも今後のリニューアルを目指し、引き続き検討を進めていく予定です。

・Special Thanks
ぐるなびUIデザイナー　田宮さん、木村さん

お知らせ

ぐるなびでは仲間を募集しています
ぐるなびでは一緒に働いていただけるUXデザイナー・UIデザイナーの方を募集しています！
ミッドタウン日比谷のオフィスも先日リニューアルし、キレイなオフィスも自慢です。

なお、ぐるなびは全社的に基本は在宅での勤務となりました。
食に興味がある方、通勤に不便を感じている方、ぜひ覗いてみてください！
https://corporate-gnavi.hito-link.jp/entry/front/entry/list.asuka