前回までの流れ
初回の打ち合わせの様子はこちら
(まだ旧ブログから移行できてなくてすいません…)
このブログを読んで下さっている方からのご依頼で、業務改善のお手伝いをしています。
作りたいことをおさらいすると、このような感じになります。
・配達員ごとにID・パスワードを発行してログインさせる
・ログインや閲覧・編集できる時間帯は、9時~19時の間のみとし、時間外にはログイン出来ないようにする
・顧客名で検索して、その顧客情報を閲覧・編集できるようにする
・テキスト入力と、画像の登録を可能とする
・まずは、上記仕様で動くシステムのプロトタイプを作成する
プロトタイプを作成する
このシステムのキモは、配達員の方がいかにスムーズにストレスなく情報を取得できたり書き込んだり出来るかだと考えられるので、それも考慮しながら、上記の要望に合う作りを考えていきます。
今回は事務所の管理用(ログインできるユーザを管理したりする)はPCでの作業が想定されますが、それ以外の配達員が情報を閲覧したり編集したりは、すべてスマホでの作業になるので、レイアウトは基本的にスマホのみを意識しました。
テスト用のサーバーを用意して、そこにプログラムを作成したものをアップロードしていきます。今回はWebシステムなので、URLを先方に伝えると、いつでもスマホで使えるようになります。
極力シンプルに、ごちゃごちゃさせないことを意識して、プロトタイプを作っていきました。
出来上がったプロトタイプ
ログイン画面です。ユーザによって、すべての操作が可能な管理者ユーザ、顧客情報を閲覧・更新できるユーザ、顧客情報を閲覧のみできるユーザとに分けることができます。管理者以外は、決められた時間外のログインは出来ないようにしました。

検索画面。顧客名の漢字やひらがなで検索できる他、最初のひらがな1文字で検索できる五十音のボタンも作りました。

顧客情報が表示される画面。テキストと画像を保存するので表示のさせ方を悩んだのですが、テキストの表示部分と画像の表示部分を上下で分けて、画像が複数ある場合は左右にスワイプさせることで画像がスライド表示するようにしました。

編集画面です。画像は、カメラロールなどからアップロードしたり、その場で撮影して登録したりできます。一度登録した画像を、ここから削除することもできます。

プロトタイプを持っていった結果
言葉でやり取りをしただけなので、相手のイメージと近いものになっているか?(大きな違いにならないようにやりとりはしていますが)少しドキドキしながら依頼元にプロトタイプを持って行きました。
「おお!シンプルで使いやすいですね!」
他のスタッフさん何人かに見せて回ってくれましたが、概ねイメージ通りだったようです。これで一安心。
なぜかと言うと、ここから先は、お互いこのプロトタイプを見ながら話が出来るので、イメージのずれは出にくいからです。
「このボタンが小さいから、ちょっと大きくしてくれるかな?」
「こことここの間にリンクを追加して、ここに飛ぶように出来るかな?」
などのやり取りをしながら、細かい調整をしていけば良いわけです。
今回プロトタイプを見ていただいて、何点か追加のご要望をいただきました。
・グループかタグを紐づかせるようにして、そのグループやタグで検索できるようにして欲しい
・住所の一部(生野区など)でも、検索できると便利
・何かボタンかリンクをクリックすると、客先の住所でgoogleマップが表示されるように出来たらいいな
いずれもすぐ出来る内容でしたので、これらを修正したものを再度お持ちする約束をして、この日の打ち合わせは終了となりました。
いかがだったでしょうか?
お客様にどんどん情報を蓄積しながら使っていただいて、
「便利になったよ!」
「あれからミスとか無駄な動きがなくなったよ!」
と言っていただけるのがゴールとなりますので、引き続き改良を重ねていきたいと思います。