CRM for clinic

UI Design
Design System
Spec Definition

Overview

Client

美容事業関連会社

Responsibility
  • ヒアリングや調査を元にした仕様検討、デザインへ落とし込み
  • 要件定義とUIドキュメンテーションの作成
  • UIデザイン、開発との連携
  • Team

    PO、エンジニア10名以上、デザイナー2〜3名

    Tools

    Figma, Confluence, Jira, Slack, Github

    Product Description

    美容系クリニックでの顧客管理、予約管理、顧客カウンセリング・診療内容を記録・管理するツールとして使用されている

    cover

    UI Improvements

    このプロジェクトでは新規機能追加やUI改善を担当しました。 ここでは実際の改善例の一部をもとに、どのようなプロセスで課題を特定しUI改善を行なったかをご紹介します。

    1. Hearing & Research

    まずはプロジェクト全体に対する理解を深めるため、参画段階で現行システムの画面遷移を視覚化し動線を明確にした画面遷移表を作成しました。 遷移表を作成することで大まかな機能や情報階層・フローを確認し、システムの概要を把握するよう努めました。

    また、主にPOからユーザーのペルソナや具体的な業務内容・現行システムで抱えてる悩みをヒアリングし、その内容を元にユーザーストーリーマップを作成しました。 その上でユーザーストーリーマップを元に各行動に関連する現行画面をまとめ、業務内容と関連画面の情報がマッチしているか、操作性はどうかを検証しました。

    2. Challenges & Solutions

    1の作業を行うことで、ユーザーが顧客対応をする際に参照したい情報が複数の画面に散在しているという点に気がつきました。顧客の情報が種類毎に複数のページに散在しているため、ユーザーは確認したい情報によって画面を変更する必要があり、情報の見落としや操作の煩わしさの一原因となっていると想定しました。 下記では、その課題に関して提案した改善案の例をいくつかご紹介します。

    課題1:顧客の特徴が隠れている

    例えば、「クレーマー」や「耳が遠い」など顧客の特徴に関する情報を登録する画面がありますが、これらの情報は接客の際に重要な情報であるにも関わらず顧客基本情報画面まで行かないと参照できない構造となっていました。
    そのため、接客するにあたり重要な情報は顧客管理画面にページヘッダー部分を設け、常に参照できるUIを提案しました。 常に参照できる場所に配置することで、顧客のページを開いた際にすぐに目につくだけでなく配下のページを行き来するときでも見落としすることなく接客できることを狙いました。

    Solution 1

    課題2:情報を探しにいかないと参照できない

    クリニックでは、個人情報の他にその顧客に関する予約情報や物販情報など様々なことを管理しています。ところが、その顧客の概要やこれまでの履歴をまとめて参照できる画面がなく、確認したい内容毎にそれぞれの画面に行く必要がありました。そのため、POからの要望もあり顧客に関する様々なアクティビティや履歴を参照できるダッシュボード画面を提案しました。

    Solution 2

    ダッシュボードにはウィジェットに各メニューへのリンクボタンを配置し、より詳細を確認したい場合に迷いなく操作できる導線を工夫しました。

    Request access to read more details

    Request Access