Promise Joseph | UI/UX Designer & No-code Developer

Case Study

Drop Serum

A self-initiated e-commerce concept for a clean skincare brand designed and built end to end in Framer.

View Website

Role

Framer Developer

Duration

1 month

Platform

Web & Mobile

Year

2025

OVERVIEW

Design and development as one process

Drop is a self-initiated concept project. No client brief, no constraints just a question: what does a modern, clean skincare brand look like when design and development are treated as one process?

The result is a fully functional serum e-commerce brand built entirely in Framer from brand identity and visual language through to product pages, checkout flow, and conversion strategy.

Drop is a self-initiated concept project. No client brief, no constraints just a question: what does a modern, clean skincare brand look like when design and development are treated as one process?

The result is a fully functional serum e-commerce brand built entirely in Framer from brand identity and visual language through to product pages, checkout flow, and conversion strategy.

THE PROBLEM

Beautiful or functional. Why not both?

Most skincare e-commerce sites fall into one of two traps beautiful but confusing, or functional but generic. Neither builds the trust that converts a first-time visitor.

The challenge: design a shopping experience that felt premium and editorial without sacrificing clarity or conversion. The two goals are usually treated as opposites. They don't have to be.

Most skincare e-commerce sites fall into one of two traps beautiful but confusing, or functional but generic. Neither builds the trust that converts a first-time visitor.

The challenge: design a shopping experience that felt premium and editorial without sacrificing clarity or conversion. The two goals are usually treated as opposites. They don't have to be.

THE AUDIT

Three principles that shaped the build

Simplicity as luxury

Clean ingredients, clean design, clean copy. Nothing on the page that doesn't earn its place. Luxury brands don't add they remove. Every section was ruthlessly edited until only what mattered remained.

Simplicity as luxury

Journey mapping over aesthetics

Every section was designed to move the user one step closer to buying. Hero → Best Sellers → Social Proof → Catalogue → Newsletter. Each section has a job. The sequence is deliberate, not decorative.

Journey mapping over aesthetics

Social proof as a design element

The before/after testimonial format was chosen deliberately. Skincare customers buy results, not ingredients. Transformation shown on the homepage removes the biggest barrier to purchase before the user has scrolled past the fold.

Social proof as a design element

Mobile-first by default

Over 70% of DTC skincare traffic comes from mobile. Every layout decision tap target size, scroll depth, image ratio was made for a phone first and expanded to desktop second. Desktop is the adaptation, not the other way around.

Mobile-first by default

DESIGN DECISIONS

Every decision had a reason.

Decision 01

Lead with brand tone, not product

The hero communicates the brand promise in one line before showing any product. 'Clean formulas. Honest results.' comes before any SKU, price, or add-to-cart button.

Why: Trust is built before a purchase decision, not during. A user who arrives skeptical and leaves impressed is more likely to buy than a user who sees product before brand.

Decision 02

Before/after testimonials above the fold

Transformation testimonials placed above the fold, not buried at the bottom of the page. The results section appears in the second viewport immediately after the brand statement.

Why: Skincare buyers need proof of results before they're willing to explore further. Moving this from the footer to second position increased implied engagement in every round of feedback.

Decision 03

Scannable catalogue over deep product pages

Each product card shows name, benefit line, and price. The catalogue is a decision surface not a detail dump. Full product information is a tap away, but the first impression is clean.

Why: Reduce clicks to decision, not increase them. E-commerce friction lives in the gap between 'I want to look' and 'I want to buy'. Closing that gap is a layout problem.

THE SOLUTION

Six pages built end to end

The Homepage leads with brand tone warm, confident, and clean. The hero communicates the brand promise in one line, moves immediately into best sellers, and uses before/after testimonials as the primary trust signal. The ingredient section reinforces the clean formulation story without overwhelming the visitor with information.

The Product Catalogue presents the full serum range in a structured, scannable layout. Each product has a clear name, benefit line, and price giving users everything they need to make a quick decision without clicking into individual product pages unnecessarily.

Individual Product Pages go deeper full ingredient stories, skin benefits, and usage guidance. Designed to convert the considered buyer who needs more information before committing.

Newsletter Capture was built around an incentive; 15% off the first order positioned at the bottom of the homepage to catch visitors who browsed but didn't buy. A second conversion opportunity without interrupting the main shopping flow.

The About Page gave the brand a human side, the story behind Drop, the philosophy of clean formulation, and the belief that skincare should be simple and intentional. Designed to build emotional connection with visitors who want to know who they're buying from before they commit.

The Journal extended the brand beyond product, a content space for skincare tips, rituals, and ingredient education. Designed to build brand authority and give users a reason to return even when they're not actively shopping.

Impact & Results

Pages

Live

Self Concept

Most concept projects stop at mockups. Drop didn't. Brand identity, product catalogue, social proof, newsletter capture, and a live shopping experience designed and built solo in one month. A fully functional site that shows what end-to-end product thinking looks like when design and development are treated as one process.

Let's Create Something Amazing

I'm currently available for freelance projects and full-time opportunities. Let's discuss how I can help bring your vision to life.

josephpromise004@gmail.com

LinkedIn Profile

Tiktok

Behance

Instagram