株式会社スラッシュ

CASE 21 — 化粧品の公式アプリのフルリニューアル

6つの段階の流れの箱と、変えないもの・作り直すものの表、売上への近さと変える量の散布図

21 — APP RENEWAL / UI・UX / 化粧品 / 2022–2024

化粧品の公式アプリのフルリニューアル

売上の多くを占めるアプリを、使い心地を崩さずに作り直す

01 — 変えないもの・作り直すもの：アプリの中の流れのうち、買う・続ける操作は変えず、見せ方と探し方を作り直すと決めた範囲と、売上への近さと変える量の関係（模式図・数値は架空）

タグUI・UXデザインWeb・アプリCX・体験設計オムニチャネル化粧品

化粧品の会社の公式アプリのフルリニューアルを、制作会社のチームとして担当した。売上の多くをアプリが占めるため、買う・続けるための操作は変えないことを条件に、UI・UXの観点から画面と機能の構造を設計し直した。要件定義から、画面の設計とデザインなどフロントの制作全般を受け持ち、アプリの開発会社と連携して公開まで進めた。あわせて、販売の施策や店舗とつなぐ取り組みに合わせた画面の制作を、年間を通して担当した。

業種
化粧品
時期
2022–2024
業務領域
顧客体験・ロイヤルティ・UI・UXデザイン・Web

WHAT WE DOこの領域でできること

  1. 01売上を支えるアプリの、使い心地を崩さないリニューアルの設計
  2. 02UI・UXの観点からの画面と機能の構造設計
  3. 03要件定義と、画面の一覧・遷移図・仕様書
  4. 04フロントの制作全般（画面の設計・デザイン・部品）
  5. 05アプリの開発会社との仕様のすり合わせと、公開までの進行
  6. 06販売の施策や、店舗と共通の会員証に合わせた画面の制作

PROCESS担当したこと

  1. 01

    いまの使われ方と売上につながる流れを洗い出し、変えない所と作り直す所を決める

  2. 02

    要件定義と、画面の構造・遷移の設計。主要な画面からデザインし、ひな形と部品にする

  3. 03

    アプリの開発会社と文書で仕様をそろえ、表示を確かめて公開。施策に合わせた画面の制作も続ける

MATERIALS実物の画面と資料

左に5つのタブから枝分かれする画面の木構造、右に3台のスマートフォンの画面の模式
02 — 5つのタブと、ひな形で増やす画面下のタブの数と並びは変えずに、ひとつずつ設計する主要な画面と、ひな形から展開する画面に分けた構成と、主要な画面の模式（模式図）
3段の役割の表と受け渡しの矢印、中央のアプリと4つの仕組みをつなぐ図、5つの文書の一覧
03 — 要件から画面へ、開発会社とつなぐ事業の担当・制作チーム・アプリの開発会社の役割と受け渡しの文書、アプリと裏側でつながる仕組み（模式図）
3段の工程表、施策の画面を回す4つの箱、アプリと店舗を3本の矢印でつないだ図
04 — 日々の施策の画面と、フルリニューアル年間を通した施策の画面づくりと機能の改修、フルリニューアルの工程を並べた約3年の流れと、店舗とつなぐ会員証の考え方（模式図・数値は架空）

TEAMこの案件の体制

  • LEAD統括・戦略
  • PLANNER企画・プランナー
  • DIRECTOR制作ディレクター
  • DESIGNデザイナー（Web・UI）
  • SYSTEMシステムディレクター

約20名の専門家の中から、この案件では5つの役割で組みました。体制について

制作会社のチームの一員として参画し、アプリの開発は開発会社が担当しました。社名・ブランド名・アプリ名は伏せています。図は構成と考え方を示す模式図で、実際の画面ではありません。数値は架空です。

画像はイメージです。実際のお客様の名前やデータなどは、すべて削除・加工を施しています。

この領域について相談する ↗実績の一覧へ
次の事例 22AI DIAGNOSIS UIAI診断の画面設計（アプリと店頭）

MORE関係する事例