Ode to Beauty

A skincare store in Pakistan that sells Western brands. Paid social sent people to a site that looked like a marketplace and did not convert. Six weeks to make it look and work like a brand.

Role
Lead Designer
Team
3 designers, 1 PM
Duration
6 weeks, 2024
Status
Shipped

01/The problem

Ads worked. The site did not.

Ode to Beauty spent on Instagram ads, and the ads sent people to the site. Then the people left. The homepage looked like any marketplace: a grid of products, weak hierarchy, no sense of who the store was for. Someone arriving from a polished ad landed somewhere that felt cheaper than the ad.

The store's real strength was buried. It sorts products by skin type and concern, which is how skincare shoppers actually think. You could not find that from the homepage.

Before. The old homepage.
Before. Further down the same page.

02/The approach

Six weeks means no long discovery.

We had heatmaps and drop-off data from Hotjar and Google Analytics, so we started there. Where people clicked, where they stopped, how long they stayed. I ran a heuristic pass on the existing site and compared it against four stores people in this market already trusted: Soko Glam, Highfy, Vegas.pk and Blume.

Then we tested. Five moderated sessions on the old site, with two tasks: find a product for your skin type, and buy it. That gave us a baseline to test the redesign against, and it surfaced four problems the analytics alone could not explain.

I led the team of three. I owned the research and the business alignment. One designer ran the campaign pages and testing, the other the visual system and components.

The heuristic pass on the old site.
Four stores this market already trusts.

03/The fixes

Four things people got wrong, and what we did.

Nobody found the skin-type filters. They lived inside a menu. We gave them a section on the homepage, so shopping by concern is the first thing you see.

Out-of-stock items looked in stock. You learned the truth when you pressed Add to Cart. They now sit at the bottom of the list with a clear label.

Icons meant the wrong thing. The AM and PM routine icons read as a dark mode toggle. Every icon got a text label.

Ingredient lists scared people off. Dense paragraphs became tags and short groups, so the detail is there for the people who want it and out of the way for the people who do not.

After. Skin type on the homepage, one clear action per block.

04/The system

Bold brand, familiar patterns.

The one rule for the visual work: keep the brand's boldness, but put every interaction where a shopper expects it. Type, colour tokens and components went into a small design system so the three of us shipped one site, not three.

The product card shows the whole approach in one place. Image, one line on what it does for you, price, one button. Smaller changes carried weight too. "Add to bag" became "Add to cart", and free shipping moved next to the price.

Before
After
Type, tokens and components.

05/Outcome

Everyone finished the task. Live numbers are still owed.

We ran the same two tasks with five new participants on the redesigned prototype. On the old site, 27% completed the task. On the new one, all five did, in about two minutes instead of four. The usability score came back in the high 80s. One participant said the site now felt like a real brand.

Those are prototype numbers from five people. They say the design removed the things that stopped shoppers. They do not say what it did to revenue. The live A/B test against the old site was planned for the next phase, and I do not have its result, so I will not claim one.

Before.
After.