01

好きなときに、好きなだけ利用できる女性専用のセルフボディメイクスタジオ「PORT」

株式会社Flat様

女性専用のセルフボディーメイクスタジオ「PORT」のUX/UI改修と開発

株式会社Flatの新規事業となる女性専用のセルフボディーメイクスタジオ「PORT」のUIデザイン・フロントエンド・バックエンド開発を担当させていただきました。サービスの利用に応じて支払い金額が変化するタイムチャージ制(時間制料金)を採用。会員登録から入館・退館まで完全非接触での利用をユーザーに提供しています。会員QRで入退館から決済まで一括管理し、館内での物品購入も可能。コロナ禍における、完全非接触の運営システムを実現しました。

SOLUTIONS
FLOW

  1. Step
    01

    UXデザイン

    既存ユーザーの年齢層、サービスの利用フローを考慮した上で、今回の機能追加に伴い、発生する新規画面の洗い出しと各画面に必要な機能を定義しました。完全非接触の顧客体験を実現することにフォーカスして情報設計を行いました。

    Output

    • QAシート
    • 機能リスト
  2. Step
    02

    UIデザイン

    機能リストと機能要件定義により抽出された画面を元に、新たな画面遷移を定義しワイヤーフレームを作成しました。ワイヤーフレーム作成後、早い段階で開発者へ受け渡しを行うことでUIデザイン制作と並行し、開発までの期間を短縮化できるプロセス設計を行いました。 グランドデザインでは、PORT施設の世界観をApp内でも表現するため施設内のキーカラー(水色)をメインにデザインしました。QR部分は視認性を担保するために白を使用し、入退館時にQRをかざす際にノイズにならないデザインを意識しています。

    Output

    • ワイヤーフレーム
    • グランドデザイン
    • GUI
  3. Step
    03

    フロントエンド、バックエンド開発

    本開発では機能追加が多かったためフェーズを分けて段階的に機能追加を行い、Web APPとして実装しました。プロジェクト初期段階からプロジェクトメンバー(UX/UIデザイナー、開発者)と要件定義を実施し、認識の統一を図ることで限られた開発期間の中でも、開発者へのスムーズなデザインのインプット、実店舗での入念な検証を実施し、3ヶ月と短期間の中でも高品質のアウトプットを実現しました。

    Output

    • ソースコード