Lead UX/UI DesignerResponsive WebRetail / Beauty E-Commerce

ALL ABOUT YOU Platform

ALL ABOUT YOU CO., LTD. · 1 yr 4 mo · Mar 2021 – Jun 2022

ALL ABOUT YOU omnichannel skincare e-commerce and CRM platform

Design Process & Workflow

From Wireframe to Loyalty Flow

How the storefront was settled on wireframes first, then designed through product pages and checkout on desktop and mobile, the loyalty side of the platform, and an annotated handoff.

Step 01

Homepage Architecture — Wireframe to UI

Blocked out the homepage as greybox wireframes for desktop and mobile before any visual design, so the merchandising hierarchy — flash sale, new brands, best sellers, brand promotions, all categories — was settled first. The finished screens keep that exact skeleton, which is what let layout debates get resolved on the wireframe instead of on finished UI.

Step 02

Brand & Product Listing

Designed the brand landing and product listing pages across breakpoints. Desktop pairs the brand story banner with a dense product grid; on mobile the filter set moves into a full-screen sheet and the category tabs pin to the top while the grid scrolls beneath, so browsing a long catalogue on a phone never loses the filters.

Step 03

Product Detail Page

Resolved the desktop product page and its states: the buy box and gallery up top, then the brand's own ingredient and how-to-use storytelling, the full ingredient list, and a 4.2-star review section with filter chips and customer photos. The variants cover the review-with-photo layout and the active write-a-review state, so the page was signed off with its interactions shown rather than described.

Step 04

Product Detail Flow

Mapped the mobile product detail journey end to end: image gallery, share sheet, ingredient and how-to-use content, the ratings breakdown, the write-a-review modal, and the related-products rail that closes the loop back into browsing. Laying the branches out side by side exposed which review states needed their own screen rather than an inline expand.

Step 05

Desktop Checkout & Coupon Flow

Charted the desktop purchase path from cart through coupon selection, points redemption, payment and confirmation — including the pop-up branches for applying a code and for failed redemption. Drawing every dialogue as its own node made it clear where the flow doubled back and which confirmations could be merged.

Step 06

Mobile Checkout & Redemption Flow

The same journey rebuilt for mobile, where the coupon drawer, points balance and order summary compete for a much smaller viewport. Redemption was split into discrete steps — select reward, confirm points, success — rather than stacked into one screen, so the user always knows how many points a step will spend.

Step 07

Checkout Screen Set

The resolved checkout screens: a three-step progress header across shipping details, payment method and order summary, with the cart contents held in a persistent right-hand panel so the total never leaves view. Includes the card-entry modal and the completed-order receipt with tracking reference.

Step 08

Loyalty & CRM Flow

The membership side of the platform: main menu, points balance, reward redemption, my-coupons wallet, in-store barcode, member tier card and points history. The barcode screen is the hinge of the omnichannel promise — it is what makes an online balance spendable at a physical branch.

Step 09

Annotated Flow Handoff

The developer-facing version of the desktop flow, with Figma frame names kept visible on every node so engineering could trace any screen in the build back to its source frame. Annotations call out the promo-code path and which dialogues are shared between branches.

Executive Summary & Impact

Omnichannel Loyalty

Online and in-store

Points and coupons can be used at a branch through an in-store barcode, not only on the website.

Clear Redemption

Step-by-step rewards

Redemption split into select, confirm and success, so members always see how many points a step spends.

Structured Shopping

Browse to checkout

Merchandising, product detail and a three-step checkout planned on wireframes before visual design.

ALL ABOUT YOU is a skincare and beauty e-commerce platform with a membership programme shared between the website and physical branches. The design covers the shopping journey from homepage to checkout and the loyalty side of the product: points, rewards, coupons, member tiers and the in-store barcode that connects the two channels.

01 / Discovery & Context

Problem & Baseline

Members could collect points and coupons, but the website and the physical branches needed to feel like one programme. A balance earned online had to be usable in a shop, and redemption had to be clear about what it would cost before the member committed. On the shopping side, a large skincare catalogue needed to stay easy to browse on a phone, and checkout had to carry coupons and points without losing track of the total.

Two channels

The website and physical branches needed to share one membership, one points balance and one set of coupons.

Redemption cost

Members needed to know how many points a reward would spend before confirming it.

Long catalogue on mobile

Browsing many brands and products on a phone risked losing the filters and the category context.

Checkout with rewards

Coupons and points had to be applied during checkout without hiding the order total.

02 / Architecture & UX System

Key Design Decisions

01

In-Store Barcode for Online Rewards

Designed a barcode screen for coupons and member benefits, so a balance or coupon held online can be used at a physical branch. It is the screen that connects the two channels.

02

Redemption in Clear Steps

Split reward redemption into select reward, confirm points and success, rather than one stacked screen, so the member always knows how many points a step will spend.

03

One Hub for Membership

Brought the points balance, reward redemption, the coupon wallet, the member tier card and points history together under one membership menu.

04

Browsing Built for a Long Catalogue

On mobile the filter set moves into a full-screen sheet and the category tabs stay pinned while the product grid scrolls, so browsing a long catalogue never loses the filters.

05

Checkout That Keeps the Total in View

A three-step progress header covers shipping, payment and order summary, with the cart held in a persistent side panel, and the coupon and points branches, including a failed redemption, drawn as their own paths.

03 / Verification & Evidence

Outcomes

Area	Before	After	Outcome
Online & in-store rewards	Rewards earned online needed a way to be used in a shop	In-store barcode for coupons and member benefits	Better connected
Reward redemption	Point cost needed to be clear before confirming	Select, confirm and success as separate steps	Clearer
Membership	Points, rewards, coupons and tier needed one home	One membership menu with balance, redemption, coupon wallet, tier card and history	One place
Mobile browsing	A long catalogue had to stay browsable on a phone	Full-screen filter sheet and pinned category tabs	Easier to browse
Checkout	Coupons and points had to fit into checkout	Three-step checkout with a persistent cart panel	More structured

04 / Retrospective

What I Learned

→

An omnichannel promise is only as real as the screen that carries it into the shop. For this programme, that screen was the in-store barcode.

→

Showing the cost of a reward at each step, rather than on one dense screen, made redemption something members could check before committing.

→

Settling the merchandising hierarchy on wireframes first meant layout debates were resolved before visual design, not on finished UI.