要求定義やUXから一緒に考える
デジタルプロダクト・UIデザイン会社

現場ポケット のメインビジュアル ※画面は開発当時の提案デザインです

現場ポケット

プロジェクト概要

対象サービス
塗装・建設・リフォーム業界の現場の効率化を促進するアプリ 現場ポケットのUIデザイン
クライアント
株式会社アステックペイント 様
担当範囲
  • 初期立ち上げ時のPC/スマホ版のUIデザイン (miro, Figma)
  • 開発前のHTMLコーディング(React)
  • ワイヤーフレーム作成含むUI提案
  • UIデザイン
  • UIデザインガイドライン作成
  • 公開以降、新機能追加時などでデザインアドバイザーとして参加中
プロジェクト期間
2018年〜現在
ツール・技術
  • Miro
  • Sketch
  • Figma
受賞歴
Good Design Award 2022年度受賞

プロジェクトの目的

当時稼働していた現場の職人さん向けアプリを刷新し

  • 連絡を円滑にするチャット機能
  • 報告書や施主様に報告するための写真共有機能
  • 報告書作成機能
  • 日報作成機能

など様々な機能を1つに集約した、アプリ開発のタイミングでお声がけいただきました。
アナログで行うと手間のかかる作業を、デジタル化で効率よくする画期的なサービスを 現場の職人さんが日々快適に使えるUIが求められました。

当社のソリューション

  • 現地調査及びワークショップ形式による顧客解像度の向上
  • 開発前にワイヤーフレームで早く可視化して操作性を検討
  • 利用者目線でのUI提案及び画面デザイン作成
  • デザインアドバイザー(新機能の壁打ちや課題整理など)

デザインする上で心がけたこと

各機能に対して必要に応じ、複数のUI案をワイヤーフレームで提案し、プロジェクトメンバーとともに検討を重ねた上で開発工程へ進みました。

一見必要と思われた機能でも、ワイヤーフレームで画面遷移を具体化すると違和感が生じる場合があり、不要な機能の見極めにも役立てることができました。

課題整理(miro)
利用者視点のフローやワイヤフレーム検討(miro)
スマホ版画面デザイン(Figma)
PC版画面デザインの一部(Figma)
新機能検討 画面デザイン(Figma)
トーク画面デザイン案(Figma)
※画面は開発当時の提案デザインです
トーク画面デザイン案2(Figma)
※画面は開発当時の提案デザインです
新機能の追加検討:全体の利用フロー整理(miro + ワークショップ)
新機能の追加検討:シーン別の利用フロー整理(miro)

成果

ユーザビリティ向上 / 利用者数増

担当者コメント)
UIに関する様々な課題に対して、いつも期待を上回る提案をいただけるので安心感があります。

ユーザビリティ向上)
利用者の中にはスマホの操作に不慣れな方も多いのですが、操作方法での問い合わせはほとんどありません。UIがシンプルでわかりすい設計になっていることが大きいと思います。

ビジネス促進)
競合のプロダクトも増える中で、お陰様で利用者数は日々純増しております。

(クライアント様から頂いた声より抜粋)

クライアントの声

高頻度でのMTGを実施させて頂き、様々なお願いにも柔軟に対応頂けるのでとても助かっています。企画フェーズ、上流から関わって頂けることもあり、UI設計におけるコミュニケーションも円滑に行えています。
MiroやFigmaでのプロトタイプの精度も高いので開発前の検証も実施しやすいです。CGFMさんのUI設計は毎回こちらの期待値を越えたものなので、非常に信頼感があります。

株式会社アステックペイント 担当者様