マンネリしないランチ探しサイト

ランチを楽しみたいけど忙しいサラリーマン向けの、ランチ選びを楽しくするお店探しWEBサイト。

ペルソナづくり

ユーザーテスト

コンセプト開発

プロトタイピング

ユーザビリティテスト

UIデザイン

スタイルガイド

エンパシーマップ

初期ペルソナ仮説策定

初期コンセプトはすでに存在したため、コンセプト検証用のユーザーテストに取り掛かる準備を開始。

最初の準備として、チームメンバー5名でワークショップを行い、初期ペルソナを策定しました。

参考:『リボンモデルを使った両面ペルソナの作り方』

実際に制作したペルソナシート

ユーザーテスト準備

インタビュイーに利用シーンを想起してもらいやすくするため、競合サイトのスクリーンショットを活用。

資料のほかに、初期ペルソナ仮説から作成したインタビュースクリプトを用意してテストに臨みました。

参考:『ユーザーテストとユーザビリティテストの違い』

実際に制作したテスト用資料

ユーザーテスト

実際のユーザーテスト時には、デザイラビリティスタディ手法の一つであるプロダクトリアクションカードを応用的に使用。

前半でインタビューを行い、後半でワークを行いました。実施人数は計11人。

参考:『ユーザーテストとユーザビリティテストの違い』

ユーザーテストの様子

アイディエーション

ユーザーテストで発掘した課題・インサイトをもとに、コンセプトに沿ったソリューションのアイデア出しを行い、ペルソナ別に機能を割り付けました。

またこの時、プロトタイプを2種類作ることを決定。

アイディエーションのワークショップ中の一幕

UI Flows作成

クライアント企業のデザイナーさんと共同して、プロトタイピングの最初の過程としてUI Flowsを作成しました。

参考:『実践UI Flows』

UI Flowsを作り終えた後

プロトタイピング

アイディエーション時に2つのコンセプトが出たので、プロトタイプを2つ作成。

所要時間は2日ずつ。

作成したプロトタイプの画面の一部

ユーザビリティテスト

作成したプロトタイプを使って、ユーザビリティテストを実施。ユーザビリティ向上と並行して、徐々にUIの精度も上げていきました。

実施人数は計7人。

ユーザビリティテストの様子

デザイン方針決定

ユーザーテスト時に行ったプロダクトリアクションカードを集計して、デザインの方向性を決定。

今回は、「親しみやすい」「楽しい」「シンプル」「期待感」といったニュアンスを選択しました。

集計されたスタディ結果

UIデザイン

クライアント企業のデザイナーと協同してUIデザインを作成。

デザインはAdobe XDとSKetchで作成し、遷移や挙動はMarvelで作成しました。

デザインしたUI

デザインアセット作成

その後のフロント開発を補助するため、簡易なスタイルガイドとUI指示書を作成。

その他、使用アイコンやグラフィックを切り出し可能な形で納品。

納品時にお渡ししたUI指示書とスタイルガイド・アセット

ペルソナ情報を整理

継続的なUXデザインを補助する材料として、リサーチで得られた情報をペルソナ仮説の対照表とエンパシーマップにまとめて納品しました。

作成した仮説対照表とエンパシーマップ

次のポートフォリオを見る

arrow_forward

ホームへ戻る