モバイルオーダーサービスの管理画面の再設計
概要
- 株式会社ユビレジでのプロジェクト
- 飲食店で来店客が自分のスマホで注文できるようになるサービスの管理画面を再デザイン
- 既存の管理画面の使い勝手が悪く、サービス自体の正式リリースが延期されていた
期間
- 2020年1月-2020年4月
課題
既存の管理画面の操作性が悪く、さらにユーザーの業務において必要な機能が欠けていたため、リリースできないという判断をビジネスサイドからされていました。
この管理画面に求められる役割は、商品データを使用して来店客が注文するためのメニューを作れること、適切なタイミングでメニューを使用できるようにすることです。
ただし既存のシステムでは商品を登録すると来店者スマホ画面に即反映されてしまう、一つの商品を複数のページに掲載できないため複数の商品を登録しなければならないなど、ユーザーの業務に対して適切に仕様が考慮されていませんでした。
このため一部のテストユーザーの商品登録はCSが対応するなど社内への負荷が発生していました。
プロセス
下記のプロセスをデザイナーとして担当しました。
- ビジネスサイドへのヒアリング
- コンセプト決定と説明用資料作成
- 各種情報設計
- プロトタイプ作成
- エンジニアと共同で仕様策定
- 主にUI上の調整・スタイリング(React)
1.ビジネスサイドへのヒアリング
ユーザーがどのようなシーンで管理画面を使用するのか、ペルソナ、ユースケースの洗い出しをするために営業担当や飲食店マネジメント経験者にヒアリングを行いました。
2.コンセプト決定と説明用資料作成
コンセプト・大枠の情報設計に課題があったので、再整理を行いました。 データの構成は商品 / 商品カテゴリー / ページ / メニューブックと定義し、開発・CSそれぞれに理解をしてもらうために社内資料を作成しました。
| 初期ラフスケッチ | これをもとに作成されたユーザー用マニュアル |
|---|---|
 |
 |
3.情報設計
カラー設定やレシート設定、多言語対応などの細かな設定も分類を見直し、適切な場所に配置しました。
4.プロトタイプの作成と社内FBの反映
XDを用いてプロトタイプを作成し、開発・CSの中から5人ほどにメニュー登録の操作を行なってもらってFBを得ました。 寄せられたFBをもとに、細かな修正をしました。
5.仕様の策定
仕様に関してGitHub上のissueにまとめ、エンジニアと検討していきました。ユーザーの業務が断絶してしまうことがないように、ユーザーストーリーを確認しながらMVPのラインを決定していきました。
6.開発時
デザインツール上での詳細なデザインに時間をかけられなかったので、各機能はエンジニアに開発してもらいつつ、デザイナーもコード上でスタイル調整・文言調整を同時並行で進めました。（使用言語：React.js / SCSS）
