ポイント管理システム
既に運用されているポイントシステムのリプレースプロジェクトにおいて、デザインチームリーダーおよびコーダーを担当しました。
本システムは、スマートフォンアプリ・店舗設置端末アプリ・店舗スタッフ用アプリ・管理サイトの4つのアプリケーションで構成され、複数店舗のポイントを一元管理するサービスです。
1000を超える店舗で運用されており、滞りなくシステムを移行することが求められる重要なプロジェクトでした。
そのため、大きなデザインの刷新は行わず現行デザインのまま、部分的にUIを改善しました。
タスクとしては、デザインよりもコーディングの比重が高いプロジェクトとなりました。
想定以上のボリュームを調整し、全体への影響を最小限に抑える
開発チームからの依頼をもとに詳細な見積もりを行ったところ、当初想定されていたデザイン工数の約3倍の工数が必要であることが分かりました。
そこで対応内容の認識に相違がないか、本当に今必要なタスクかをプロジェクトリーダーと見直し、当初の2倍程度に調整しました。
各デザイナーの稼働予定を踏まえて現実的な完了時期を割り出し、プロジェクトリーダーと連携を図ることで全体への影響を最小限に抑えることができました。
デザインチームの状況を把握する資料を作成
プロジェクト自体はRedmineで管理しており、デザイナーのタスクのチケットも含まれていましたが、より状況の詳細を把握できるものが必要と判断し、別途資料を作成しました。
各メンバーの進捗率、予定工数、消化工数を整理し、遅れの要因が作業スピードによるものか、稼働率によるものかを明確にしました。そのうえで、遅れをどのように解消するかを各メンバーと相談しながら対策を立てました。
資料はGoogleスプレッドシートで作成し、プロジェクトメンバーがいつでも確認できる状態にすることで、不安や認識のズレを減らすことを意識しました。
レイアウトが似た画面をまとめて同じメンバーに割り当て
開発チームでは機能ごとに担当者を割り当てているところ、デザインチームではレイアウト構造が似ている画面ごとに担当者を割り当てました。 これにより、作業効率とUIの一貫性の両立を図っています。 また、コーダーごとに同じUIを個別に実装する重複作業を防ぐため、複数画面で使用されるUIを洗い出し、汎用コンポーネントとして定義しました。
レビュー体制の調整
当初は私がレビュアーとして稼働予定だったところ、多くをコーディング作業にあてる必要が出てきたため、レビュアーを1人追加アサインすることで対応しました。
それでもレビューがボトルネックになるリスクがあったため、シニアコーダーもレビューをする体制に変え、負荷の分散を行いました。
ボタンの変更・追加を容易に
既存UIでは、文字を含むボタン画像が多く使われていました。 そのため文言の変更や新しいボタンが必要になると、画像を作成する必要がありました。
そこで背景パターンとアイコンの種類を洗い出し、アイコンと背景画像を別々の素材へ出力し直しました。
アイコンはベクターデータ化し、SVGや様々なサイズが出力できる状態にしました。
またボタンのスタイルもパターンを洗い出し、CSSで再定義しました。
これにより同じデザインのボタンであれば、エンジニアが追加・変更の対応が可能になりました。
不透明な状況下で一人一人が自走するチーム
本プロジェクトにおける最大の挑戦は、既存システムの正確な仕様把握とモックアップ作成の並行でした。 エンジニアによる最新ドキュメントの整備を待たずに作業を進める必要がありましたが、現行の仕様書は無いに等しい状況でした。
そこでデザインチームでも実機の確認を行い仕様を解明していきました。主にレビュアーが中心となって実機確認をし、期間の前半にコーディング作業を圧迫しないように工夫しました。
またRedmineのチケットを随時追跡し、最新の設計書の更新状況を各デザイナーが能動的にキャッチアップする体制で挑み、設計書の完成とほぼ同時に設計書と齟齬のないモックアップを完成させました。
こうした仕様解明と、役割分担の最適化・コンポーネント化による効率化が功を奏し、最終的にはデザインチームとしての責務を完遂することができました。
今後は連携体制も改善していく
この経験を通じて、デザイナーとエンジニアがもっと連携していく必要性を感じました。 今後は、仕様の不確実性を早期に解消できるよう、デザイナー側からエンジニアへの働きかけや情報共有の仕組みづくりをより積極的に図っていきたいと考えています。
デザインチームの対応内容
- モック作成（コーディング）
- 店舗設置端末アプリ
- 店舗スタッフ用アプリ
- スマートフォンアプリ（一部）
- UI改善の提案
- 画像リソース作成
- システムロゴ作成