ホトカミのトップ画面アップデート~進行中~

みなさんこんにちは、デザイナーのルイです。7月からホトカミのウェブ版のトップ画面を改造しています。

トップページは2年前からずっと変わっていないです。デザインツールのAdobe XDを開いたら...このような状況に苦笑いしました...(他のデザインは別のツール)

改造の経緯と目的

トップページを変更していない二年間、ホトカミも少しずつ発展してきました。初期と比べて投稿数、寺社情報、が充実しました。今後は検索機能をもっと充実させ、ユーザーさんに欲しい情報を素早く提供する方向性になります。
また、機能が増加しても、公開速度を重視して、情報整理と体験を深く考えていない場合もあります。2年の改修やアップデートが重ねて画面デザインの負債になっています。
・文言がわかりにくい、統一されていないものが複数存在
・画面がごちゃごちゃ
・ユーザーの需要ではなく運営管理の目線で情報を整理している
・たくさんの機能が操作しにくい場所、目立たない(逆もあり)

改造の流れ

データ分析の村上くんが発案して改造を発足しました。

大まかな流れ:
①問題発見→②現状機能を洗い出し、情報分類→③データに基づいて情報優先度を並び替え→ ④フレーム→⑤デザイン→⑥実装

私は④から⑥を担当しています。
新規デザインでもない、ボリュームは1つの画面のみ。また、最終的にどう見せるかイメージを持ってもらいたいので、フレームワークを再度引き直すはあまり効果ないかと思って直接仮のイメージを作りました。

デザインの視点と作業

デザインを決めるのはデザイナーだけではないです。たくさんの視点が必要になります。

他の仲間はデータ分析、情報構造などの視点を持っていることに対して、私は以下の視点を持っています：

・ベースはトップから遷移が多い(需要が多い)という優先順位
・データは現在のデザインに影響されているか
・情報のグルーピングがわかりやすいか
・使用シーンはどうなっているか
・神社とお寺の情報が欲しいときはどう考えるか
・場所と関連する他サービスのデザイン

こうして、データを見ながらデータ分析を吸収して議論に参加します。あいまいな部分に関しては追加データをお願いしたり、可能性ごとにデザインパターンを検討する。例えば寺社を探すデザインは複数操作パタンを作ってみる。左はボタンをポップアップ、右はタブで全ての検索手段を羅列する。比べてみてどちらがわかりやすいか検討しています。(デザインは仮です)

もちろん現状のデータから得る発見がたくさんあります。世の中「データで語ろう」とのこともあります。現状で取れていない、思いつかないデータもあるので、見えていることは一部だと思います。また、ユーザーさんが求めていることがまだ明確になっていない可能性も。データを吸収しつつ、ユーザーさんの求めるものを想像して、アイデアを膨らませます。正直、100% すべてをデータに頼っていない(頼りたくない)です。

他のサービスを参考にしつつ、あらゆる体験の可能性を試してデザインを展開、そのデザインになる理由気づきや思考も随時メモしています。(ごちゃごちゃ)
このように、ホトカミに適するデザインも少しずつ近づきます。

ある程度イメージができたら、今Adobe XDの共有機能でデザインを製作して関係者に共有します。会議に入る前にコメントしていただきまして、すぐ対応してから再度議論に入ります。

ここで、古いデザインも残しておくことです。元のデザインが良かった場合もあります。また、比べながら話すと説明しやすいです。

反省点

自分は大きな改造といっても、こまめに共有するのとすばやく方向性確認、調整することが大事かと思います。
今回は少し時間がかかりすぎたかと思います。データを網羅するのは前提として、スピードが大事。

1. 最初の段階では完璧を求めることなくまず早めに方向性の確認を出したほうが良い
2. フレームワークで情報優先度の配置を確認してもらったらよかった
3. こまめに共有、少しずつ前提条件を把握してもらって、進むために細かく資料を作らなくて良い
4. 仲間に何かを自分も考えて方向性を示すのも大事

すでに新人ではないですが、毎回うまくできなく反省...

トップのアップデートは続いています。リリースをお楽しみにしてください！