Salonical | nobuwani

美容室DX/CRMアプリケーション UIデザイン

オブジェクト指向UIデザイン（OOUI）情報設計による

美容室向けのデジタルトランスフォーメーション(DX)顧客管理(CRM)アプリケーションを開発

プロジェクト概要

オブジェクト指向UIデザイン（OOUI）の設計思想に基づいて情報を抽出し、UIデザインに反映させるまでの制作プロセスをまとめました。美容室向けのデジタルトランスフォーメーション(DX)と顧客管理(CRM)アプリケーションを開発することを目的としています。

担当：UIUXデザイナー
　　　リサーチ調査、要件整理、情報設計（OOUI）、UIデザイン
プロジェクト内容：ポートフォリオ
2022年11月〜12月

このアプリケーションは、美容室スタッフをターゲットユーザーとしており、業務効率化や顧客満足度の向上といった課題を解決することを目指しています。このプロジェクトにより、美容室スタッフは業務の効率化を実現し、顧客満足度の向上に繋げ、さらに、競合他社との差別化を図り、ビジネス成長の促進が期待されます。

具体的な目標は以下の通りです:

スタッフが簡単にアクセスできる顧客情報の一元管理を実現。
予約管理機能によりスケジュール調整や確認を容易化。
マーケティング活動の管理と効果測定を支援し、集客力を向上。
効果的な顧客コミュニケーションを促し、リピート率や新規獲得を支援。
顧客情報の登録・管理や予約・マーケティング活動調整の心理的障壁を軽減。
美容室スタッフとオーナー双方の負担を軽減。

プロジェクトの背景

現在、美容室シークレットガーデンでは、顧客情報の整理や更新が紙ベースの手作業やベテラン美容師の記憶に頼って行われており、多くの時間と労力がかかっています。さらに、新人美容師にとって顧客情報へのアクセスが難しく、サービス品質にばらつきが生じています。

また、レジ機能や売上管理などのソフトは既に導入されていますが、それらとの連携が未だ不十分です。そこで、これらの業務を一元化し、美容室のスタッフが効率的に業務を行えるようにすることがプロジェクトの目的です。本プロジェクトを通じて、美容室シークレットガーデンは、スタッフの働きやすさ向上、顧客満足度の向上、そして競合他社との差別化を図ることを期待しています。

ペルソナ・ユーザーストーリー

具体的なユーザー像を把握し、ターゲットユーザーのニーズや期待を理解した上で、要件の整理・明確化を行うために、ペルソナとユーザーストーリーを作成し、それぞれのペルソナがどのようなタスクや目的を持ってアプリケーションを使用するかを検討しました。

要件定義

これまでの調査検討をふまえ、本プロジェクトでは、優先順位順に以下の機能要件を実現することを目指しました。

顧客情報管理: 顧客の基本情報、来店履歴、施術内容、アレルギーや好みなどの情報を一元的に管理することで、スタッフが顧客にパーソナライズされたサービスを提供しやすくなります。これにより、新人美容師でも情報へのアクセスが容易になり、サービス品質の向上が期待できます。
予約管理: 顧客からの予約を簡単に登録し、変更やキャンセルができるようにすることで、スタッフが予約状況をリアルタイムで把握し、効率的にスケジュール調整が行えます。また、顧客への予約確認やリマインダーの自動送信機能により、ドタキャンや遅刻の防止にもつながります。
マーケティング活動管理: 特定のセグメントの顧客に対して、メールやSMSでプロモーション情報を送信できる機能を提供し、効果的なマーケティング活動が行えるようになります。さらに、キャンペーン効果の分析機能により、将来のマーケティング戦略の改善に役立てることができます。
DM用ラベル印刷: 誕生月や来店周年などの特別なタイミングで、顧客にDMを送るためのラベルを簡単に印刷できる機能を提供します。これにより、スタッフが手間をかけずに、ターゲットに合ったコミュニケーションを実施できるようになります。
既存アプリケーションとの連携: 既に導入されているレジ機能や売上管理アプリケーションと連携し、顧客データや売上データを一元管理することができます。これにより、スタッフが複数のシステムを使い分ける手間が省かれ、業務効率が向上します。

デザインプロセス

本プロジェクトでは、オブジェクト指向UIデザイン(OOUI)とUXデザインの原則に基づいてデザインプロセスを進めました。

オブジェクトの抽出:
まず、アプリケーションの機能要件に基づき、ユーザーストーリーやタスクを考慮して、システム内の主要オブジェクトと関連アクションを特定します。

ここではタスクから単に単語を抽出するだけでなく、ユーザーの目的やタスク実行方法を理解することも重視しました。関連モデルレイヤーからオブジェクトを抽出し、アプリケーションの基本構造やデータフローを把握することにより、画面構成や機能配置についての情報設計をおこないました。
ビューとナビゲーションの検討:
モデルレイヤーのオブジェクトをもとに、ユーザーとオブジェクト間のインタラクションを明確化しました。さらに、各ビューと画面間のナビゲーション構造を設計し、ユーザーがアプリケーションを直感的に操作できるインターフェースを目指しました。
ワイヤーフレームの作成:
インタラクションやビュー、ナビゲーション構造を考慮して、各画面のレイアウトやUIコンポーネント（ウィジェット）の配置を示すワイヤーフレームを作成しました。
レイアウトパターンの適用:
ワイヤーフレームをもとに、プレゼンテーション層（見た目やスタイル）を設計しました。この段階では、レイアウトパターンやデザインシステムを適用し、アプリケーションの一貫性や視認性を向上させました。
プロトタイプの作成:
ワイヤーフレームとプレゼンテーション層をもとに、実際に操作可能なプロトタイプを作成しました。これにより、アプリケーションの操作感やユーザビリティを事前に評価することができました。
ユーザビリティテストとフィードバックに基づく改善:
ターゲットユーザーである美容室スタッフを対象に、プロトタイプを使ったユーザビリティテストを実施しました。このテストを通じて、ユーザーが直面する問題や操作の難しさを特定し、アプリケーションの使いやすさを向上させるための改善点を見つけ出しました。
改善アクションとデザインの最適化: ユーザビリティテストで得られたフィードバックをもとに、UIデザインやUXを改善しました。この際、オブジェクト指向UIデザインの原則に従い、コンシステンシー（一貫性）やメタファー（類似性）を重視し、ユーザーが直感的に操作できるインターフェースを目指しました。また、アフォーダンス（操作性の示唆）やフィードバック（操作結果の返信）などのOOUIの概念を考慮して改善を行いました。

名詞を抽出しオブジェクトを特定

デザインシステム

Figmaを用いて、オブジェクト指向UIデザイン（OOUI）原則に基づき、再利用可能なUIコンポーネントを作成し、プロジェクト全体のデザイン一貫性と効率性の向上に努めました。また、直感的なインターフェース実現のため、メタファーやアフォーダンスを考慮しました。（以下抜粋）

反省点と学び

コミュニケーションの重要性: プロジェクトの初期段階で、より密なコミュニケーションを行うことで、要件の誤解や開発遅延を防ぐことができたと考えられます。今後は、定期的なミーティングや情報共有を通じて、チーム内のコミュニケーションを強化したいと考えています。
ユーザビリティテストの活用: 本プロジェクトで実施したユーザビリティテストは、アプリケーションの使いやすさを向上させるために非常に有益でした。今後は、さらに多くのユーザー層を対象にテストを実施し、多様なニーズに対応できるデザインを追求していきたいと考えています。
アクセシビリティの向上: 本プロジェクトではアクセシビリティについて十分に考慮できていなかったと感じています。今後は、色覚障害者や視力の低いユーザーなど、多様なユーザーが利用できるUIデザインに取り組みたいと考えています。
デザインシステムの整備: 今回のプロジェクトでは、デザインシステムの整備が十分でなかったことが反省点です。デザインシステムを整備することで、一貫性のあるUIデザインを実現し、効率的な開発が可能になると考えています。今後はデザインシステムの整備にも力を入れていきたいと思います。
技術とデザインの連携: 今回のプロジェクトでは、技術チームとデザイナーの連携が十分でなかったと感じています。デザインと技術の連携を強化することで、より効果的なソリューションを提供できるので、今後はよりコラボレーションを重視し、アプリケーション開発を進めていきたいと思います。

これらの反省点と学びを踏まえ、今後のデザイン活動に取り組む際に改善や向上を目指していきたいと考えています