Ifeoluwa Emmanuel
Commerce & Operations

ZaronCosmetics

Zaron Cosmetics is an established African beauty brand creating inclusive makeup for melanin-rich skin. I designed a connected digital ecosystem that serves customers shopping for beauty products and internal teams managing orders, inventory, performance, and consultant operations.

Zaron Cosmetics banner
My RoleProduct Designer
DurationEnd-to-end product redesign
DisciplinesProduct Design, E-commerce, Design Systems
Year2025

Overview

/Challenge

The existing digital experience was built on a generic third-party e-commerce CMS that was never designed for Zaron's scale, brand, or operational complexity. Customers couldn't confidently find or choose products. Internal teams worked around the system rather than with it. The platform had outgrown itself.

/Solution

I mapped the complete ecosystem, defined focused user flows, and designed a scalable storefront, four-step checkout, back-office dashboard, and dedicated consultant web app. The system balances Zaron's premium brand expression with speed, clarity, and operational control.

Research

The work began by understanding the complete ecosystem, the people using it, and the moments where unclear structure created unnecessary friction.

01

Mapped the complete journey from product discovery through fulfilment

02

Identified friction across shade selection, checkout, inventory, and order management

03

Separated customer, operations, and consultant needs into distinct product experiences

04

Built reusable components to keep the expanding ecosystem consistent

Who this had to work for

Different lives.
Different stakes.

A useful product must understand what each person is trying to protect, avoid, and accomplish.

01 / Loyal Zaron Customer

Adaeze O.

A working professional in Lagos who shops for makeup online 2–3 times a month. She knows what she likes but often buys from competitors because the Zaron site made it hard to find her shade or complete a purchase without friction.

FrictionShade discovery on the old site was guesswork. No swatches,, vague product names, and a checkout that felt like it was testing her patience.
Success looks likeBrowse confidently, find the right shade for her complexion, and complete a purchase in under five minutes.
02 / Zaron Operations Manager

Emeka T.

Manages daily order fulfilment and coordinates between the warehouse and the consultant network. He was spending hours each day exporting spreadsheets from the old CMS to understand what was happening across the business.

FrictionNo single view of inventory, orders, and consultant activity; every decision required pulling data from three different places.
Success looks likeHandle daily operations from one workspace without manual workarounds.

Process

The design process translated those findings into a clear, scalable system. Each stage reduced complexity while preserving the personality and purpose of the product.

01

Rethink

Analysed the full ecosystem and translated fragmented customer and operational workflows into clear experience goals.

02

Structure

Defined the information architecture and core flows, prioritising mobile use, speed, and clear states.

03

Redesign

Created high-fidelity storefront and dashboard experiences with a reusable visual system.

04

Grow

Designed the system to support more products, roles, consultants, and operational insight over time.

Product judgment

The decisions
behind the screens.

01

Build four separate product surfaces, not one

The old CMS tried to serve customers, staff, and consultants through the same interface. The result served no one well. Separating into a storefront, checkout flow, back-office dashboard, and consultant web app let each surface be designed for its specific job, with the right information density, navigation, and permissions for that user.

02

Four-step checkout with visible progress over a single long form

Cart abandonment on the previous platform was high partly because checkout felt endless and opaque. Breaking it into four named steps (Bag, Address, Payment, Confirm) gives shoppers a sense of control and makes it easy to backtrack without losing progress.

03

Design system before final screens

With four surfaces to ship, inconsistency at scale was the biggest risk. Establishing colour tokens, typography, button states, and form components early meant each surface felt native to Zaron, and the engineering team had a single reference rather than interpreting designs screen by screen.

Design Language

Design System

Colour Palette

Primary

#0B0709

Near Black

Gray

#E7E6E6

Neutral Gray

Accent

#C09271

Warm Camel

Iconography

Bag
Minus
Plus
Close
Eye
Store
Upload
Chat
Chevron
Send
Search
Arrow
Delivery
Check
Users

Typography — Montserrat

Beauty Without Compromise

Light / 300

Beauty Without Compromise

Regular / 400

Beauty Without Compromise

Semibold / 600

Beauty Without Compromise

Bold / 700

UI Components

Buttons
Primary
Secondary
Disabled
Input Fields
Default
Typing |
Error
Error
Something went wrong.
Filled
Filled

Shopper-First Storefront

A premium, intuitive storefront with clearer categories, confident product discovery, and layouts designed for quick scanning.

Zaron Cosmetics storefront home and product discovery
Zaron Cosmetics storefront recommendations and collections

Checkout in Four Steps

A focused checkout flow that makes progress visible, reduces cognitive load, and removes distractions from conversion.

Zaron Cosmetics Checkout in Four Steps

Back-Office Dashboard

Orders, inventory, users, and insights are centralised into a clear operational workspace built for everyday speed.

Zaron Cosmetics Back-Office Dashboard

Dedicated Consultant App

A distinct web app gives independent business consultants trusted visibility into performance, commissions, and activities.

Zaron Cosmetics Dedicated Consultant App
What I would carry forward

The work changed how I design.

01

Operational tools deserve the same design rigour as consumer products. The dashboard and consultant app weren't afterthoughts; they were half the project. Teams that use poorly designed internal tools lose time every day.

02

Redesigning an existing product means managing expectations on both sides. Stakeholders had mental models built around the old CMS. Every structural change needed a clear rationale, not just a better-looking screen.

03

A design system is a team deliverable, not a designer artefact. The most useful thing I built wasn't a single screen, it was the component library that let the engineering team build confidently without checking in on every edge case.

Outcome

What changed
because of the work.

01

One scalable ecosystem for customers, operations teams, and consultants

02

Simpler product discovery and a clearer four-step checkout

03

Reusable design foundations supporting future growth

View More Work...

Wash: Care On Demand
On-Demand Laundry & Garment Care

Wash: Care On Demand

VPD Money
Personal Banking & Fintech

VPD Money