運送会社が荷物を倉庫に集め、荷物を特定の住所に運ぶためのシステムのデザインを行いました。
制作したもの
1. ドライバー用のモバイルアプリ
2. 管理者用のWebアプリ
3.不在票
制作のチーム構成
自分の基本的な役割は、デザイナーとして企画された機能とロジックに対してシステムを扱うユーザーの体験を考慮した、操作性の構造と画面の設計です。現在もシステムの改修を行っています。以下のチームとは別にクライアント様へ要望のヒアリングを行い、デザインに起こして開発側と共有を行い実装までのフォローをしています。
製作プロセス
- 調査
- ラフスケッチ
- 画面遷移図
- ワイヤーフレーム
- ビジュアルデザイン
- 実装後のフォロー・機能追加
リデザインが必要
当時、開発中だったシステムの構成は改善の余地がある画面設計になっていたため、優れたユーザー体験にするためにリデザインのご依頼をいただきました。
調査
当時、システムを使って実際に配送は行われていましたので、そのアプリケーションを実際に操作して荷物を特定の住所へ配送する業務を自身で行い、業務フローの理解と操作性の問題点の調査を行いました。
気づき：基本的に荷物を「配達する」などの業務を実行するには「配達」→「荷物をスキャンする」と言うフローになっていました。つまり、タスクのボタンをタップすることでモードが始まると言うもので、問題点は自身が実行するタスクを考えてボタンをタップしなければならないのと、すべての選択肢を表示しなければならないため、表示領域が増えていく可能性があるということです。
方針：オブジェクト指向UIデザインの思想をもちいて、「オブジェクトの選択」→「アクションの種類を選択」のようなプロセスになるように設計を行いました。具体的には「荷物をスキャン」→「配達をする」とったプロセスです。
ラフスケッチ
リサーチや方針を基に、全体の画面の構成をラフに描きチームで共有して方向性を確認しました。
画面遷移図（ラフスケッチ）
スケッチを描くだけではなく、描いたスケッチの画像を「Overflow」というシステム全体の画面遷移のフローを確認するアプリケーションを用いて構造を開発側と確認をしました。
ワイヤーフレーム
チームで一定の合意が取れたら、AdobeXD（現在はFigmaへ移行）を用いてワイヤフレームを作成しました。スケッチよりも詳細なデザインを作成し、文字サイズや画像サイズなど無理なく実現ができるかを確認します。
画面遷移図（ワイヤーフレーム）
スケッチと同様に、「Overflow」を用いて画面遷移を確認します。条件分岐を可視化してシステムの生合成を確認しました。これにより、想定していない機能が出現しないようにし、開発の出戻りを防ぎます。
ビジュアルデザイン
最後に、ビジュアルデザインを実施し、カラーパターンとデザインシステムを作成していきます。
