GMOくまポン

院内業務をDX化 美容クリニックの経営支援プラットフォーム「キレイパスコネクト」

A.C.O.は、美容クリニックの経営支援プラットフォーム「キレイパスコネクト」のUI/UXデザインを担当しました。同プロダクトは、美容クリニックにおける予約・電子カルテ・会計などを一気通貫で管理できるだけでなく、そこで得られたさまざまなデータを分析し、経営に活かすCRM機能も搭載しています。

Relationship
Since 2021
Services
,
  • 課題Issue

    GMOくまポン株式会社(以下、GMOくまポン社)は、クーポン購入サイト「くまポン」、美容医療チケット購入サイト「キレイパス」、そして美容クリニックの経営支援プラットフォーム「キレイパスコネクト」の3つの自社開発サービスを展開している企業です。

    GMOくまポン社は、美容医療チケット購入サイト「キレイパス」のクライアントである美容クリニックから、「業務効率化ツールの横連携ができておらず、非効率」などのお悩みを聞いていました。これらの課題を解決するため「キレイパスコネクト」の開発が決まりますが、美容医療向けの業務効率化ツールとしては後発であったためリリースが急がれました。そこで、まずは短期間でUI/UXデザインを完結できるパートナーを求めていました。

  • 解決策Solution

    A.C.O.では、toBプロダクトデザイン経験のあるUIデザイナーをアサインしました。UIデザイナー2名と、GMOくまポン社のエンジニア、CSが参加し、毎週3回程度打ち合わせすることで密に連携。さらには、メンバーが同じ精度の情報を共有できるよう「Notion」でタスクや議事録の管理を進めました。

    要件定義とUIデザインのフェーズを分けず、アジャイルに進行。UIクラス図やNotionにまとめた要件定義書等を使って情報を整理しながらデザインを作成することで、ユーザーの課題を素早くプロダクトに落とし込みました。

    また、クリニックには医師、カウセラー、受付とさまざまな役割のスタッフがおり、ITリテラシーもまちまちです。そのため、「誰もが使いやすい」UIを目指しました。

  • 結果Result

    2021年10月にプロジェクトを開始し、翌11月にはリリース。GMOくまポン社からは「漠然とした要望を投げても、これだ!と思えるデザインに仕上げてもらった」との声をいただきました。

    「キレイパスコネクト」導入先クリニックからは、「使いやすい」「画面が見やすい」とUIを評価する声も聞かれています。実際に活用するスタッフの方々はデジタルネイティブ世代が多く、また人の出入りも多いという環境のなか、マニュアルやレクチャーが無くとも直感的に操作いただけています。

    リリース後も、約半年にわたり新規機能のUIデザインを支援。その後、2022年6月にデザイン制作をGMOくまポン社内に引き継ぎました。

要件定義とUIデザインを同時並行 密にイメージを擦り合わせアジャイルに進行

今回のプロジェクトには、GMOくまポン社のエンジニアとCS、そしてA.C.O.のUIデザイナー2名がメインメンバーとして携わりました。メンバー全員が同じ精度の情報をリアルタイムに共有できるよう、クラウド型情報共有ツール「Notion」でタスクチケットや議事録、要件定義書を管理。さらに、週に3回打ち合わせの時間を設け、密な連携をはかりました。

また、一般的には「要件定義書」をしっかりと作成した上でデザインに入るところ、今回はスピード重視ということもあり、荒削りな課題が出てきた段階で、その情報を整理しながらデザイン制作も進めました。

クライアントとディスカッションを重ねながら、toBプロダクトの経験を元にデザインを起こし、そこから細かな部分を擦り合わせるという方法をとることで、アジャイルに、そしてスピード感を持って進めることができました。

デバイスや環境を選ばない「視認性」「使いやすさ」を意識したデザイン

GMOくまポン社が提供している美容医療チケット購入サイト「キレイパス」は、ブランド開発をA.C.O.が担当。今回の「キレイパスコネクト」は、そこから派生したtoBプロダクトです。そのため、「キレイパス」のカラーをベースとし、「明るくモダン」なイメージを壊さず、かつ「視認性」「使いやすさ」を意識した新たなカラーを設定しました。

キレイパスコネクトはクリニック業務を一気通貫で管理するツールのため、必要な機能は多岐にわたります。そのため、最初にフルカラーパレットを用意。文字のコントラスト比を高めるために、各色4段階の濃淡を設定しました。キレイパスコネクトで使用する色は、すべてこのパレット上から選択することをルール化することで、制作段階での迷いが無くなり、クライアントとの認識合わせにも役立ちました。

また、例えばモニターが古く発色の悪いPCや、操作する部屋が暗いなど、最適とは言えない環境で使用されることも想定。どんな環境でも、ある程度の視認性が確保できるデザインを目指しました。

情報を図解して整理し、機能のヌケモレやダブりを排除 「必要な機能」を厳選

今回は、OOUI(オブジェクト指向UI)の原則に則った情報設計を意識しました。機能を検討する場合、例えば「『予約できる』ようにしたい」など「動詞」から入ることが多くあります。しかし、具体的に「何を」操作したいのか、例えば「診察」「施術メニュー」など名詞の部分を整理できていない状態でスタートしてしまうと、機能のヌケモレやダブりが発生しがちです。そのため、画面のデザイン制作に入る前に「UIクラス図」「UIフロー図」などの作成に時間をかけました。そうすることで、例えば「これとこれは同じものを操作しようとしているから同じ画面にまとめよう」といった意思決定が容易になりました。

機能の検討段階では、実際に美容クリニックで働く医師も会議に参加。いま目の前にある機能が「本当にユーザーが求めているものなのか」ということを意識して、ディスカッションを重ねました。

ITリテラシーを問わず「誰もが使いやすいUI」を意識 直感的な操作性が実現

クリニックには、医師、カウンセラー、受付などさまざまな職種があり、ITリテラシーにもばらつきがあるため、その誰もが使いやすいUIを前提にデザインを進めました。

まず、普段使い慣れているスマートフォンアプリのように、直感的な操作性を重視。押しやすいボタンのデザイン、読みやすい文字の大きさ、そして伝わりやすいマイクロコピーにこだわりました。

また、ユーザーが極力スクロールせずに知りたい情報に辿り着けるよう、ファーストビューには本当に必要な情報だけを厳選して表示。シンプルな画面づくりに徹しました。業務アプリは1つの画面に対する情報密度が高くなりがちですが、その上で分かりやすいものにするため、例えばフォントサイズや余白などのディテールを1px単位で細かく調整。無駄なスペースを無くした上で、背景色の切り替えや罫線などを使って視認性を高めました。さらに、タグの色分けやアイコンなども効果的に活用し、感覚的に操作できるUIを目指しました。

多忙な業務のなかでツールを利用される方がアプリ内で迷子にならないよう、指定された操作が完了するまで他の画面に移らない状態にする「モーダル表示」。そして、一覧画面と、その詳細画面が同時に見られる「左右2分割表示」も採用。極力、画面遷移を減らしました。結果、「誰もが使いやすい」UIを実現することに成功しました。

テストクリニックへの導入やヒアリングで、現場が本当に求めているツールへ

今回のプロダクトでは「クリニック側」「患者側」双方の画面を制作しました。また、クリニックの現地調査で、カウンセラーの方々が業務ツールを利用される際、iPadを縦持ちしているケースが多いことが判明。一般的な業務アプリは、PCのみ対応であるものが多いなか、今回はデスクトップPCの大画面からiPadの縦持ちまで、さまざまな環境での使用を想定し、デザインを進めました。

また、当初クリニックが抱えていた課題「業務効率化ツールの横連携ができない」を解消するため、予約管理、電子カルテ、会計など必要な機能をすべて統合。他にも、美容クリニックならではの「コース契約」の消化数、支払い状況の管理。また、膨大な種類の施術メニュー、さらには施術料金の一部をいただく「内金」等の複雑なステータス処理など…丁寧なヒアリングやテスト導入を経て、現場のニーズに対応した機能を搭載することができました。

似ているお悩みはありませんか?

お問い合わせ

View all

関連事例

  • Get the latest insights

    UXやデザインのトピックからグローバルレポートまで、最新の情報をお届けします

    月1–2回ぐらいで届けます。いつでもキャンセルできます。Privacy Policyをご覧ください

  • Connect

    お悩みのことがあれば、お気軽にご相談ください。

    Contact