Gently Radiant Skin

Web Design UI/UX Web Design UX Audit E-Commerce Conversion Optimization Shopify

May, 2025

Gently Radiant Skin

Role/Services

Web Design UI/UX UX Audit E-Commerce

Client

Gently Radiant Skin, Designed at Klever Cookie

Category & Year

Project Overview

Gently Radiant Skin is a Shopify-based skincare e-commerce brand experiencing low purchase conversion rates. Users were abandoning the purchase flow before completing checkout a symptom of deeper usability issues including unclear visual hierarchy, inconsistent UI patterns, and an information architecture that created unnecessary friction in the buying journey.

Working at Klever Cookie, I led the full UX audit and redesign of the shopping experience within Shopify’s native constraints. The diagnostic framework was Nielsen’s usability heuristics, validated through user testing sessions focused on checkout and product discovery.

Problem

The site was experiencing high cart abandonment. An audit of the existing experience revealed three compounding issues: users couldn’t easily assess product value on the listing page, the product detail page buried the primary CTA, and shipping costs only appeared at the final checkout step a known drop-off trigger in e-commerce. The core problem wasn’t aesthetic. It was a flow that didn’t support the user’s mental model of online shopping.

Approach & process

The redesign was scoped within Shopify’s structural constraints — all solutions had to work within its native component system while still achieving meaningful UX improvements. I applied Nielsen’s usability heuristics as the diagnostic framework to identify and prioritize friction points:

Visibility of system status

The cart provided no visual confirmation when a product was added. Redesigned the add-to-cart interaction to include immediate visual feedback and a persistent cart counter visible at all times.
Error prevention

Shipping costs appeared only at the final checkout step — the most common abandonment trigger in e-commerce. Redesigned the flow to surface estimated shipping costs earlier, eliminating the surprise that causes users to exit.
Consistency and standards

Visual inconsistencies across the product listing, detail, and checkout pages broke the user’s sense of continuity. Applied a unified visual language across all touchpoints using a defined component set.
Match between system and real world

The information architecture didn’t reflect how shoppers naturally navigate a skincare purchase. Restructured category hierarchies and the product detail layout to match the buyer’s decision-making sequence: discover > evaluate > commit.

Validation & iteration

Conducted usability testing sessions with 3–5 online shoppers familiar with Shopify-based stores. Testing focused on three tasks: finding a specific product, reviewing product details, and completing a simulated purchase. Key finding: users consistently paused at the shipping cost reveal during checkout. This validated the error prevention issue identified in the audit and confirmed that surfacing estimated costs earlier was the highest-priority fix. Two additional design iterations were made before final delivery based on testing feedback.

Outcome

The redesign addressed the primary drop-off points identified in the audit: surfacing shipping costs earlier, strengthening add-to-cart feedback, simplifying the path from product discovery to checkout, and establishing visual consistency across all purchase touchpoints. The solution is fully scalable within Shopify’s architecture and positions the brand to run A/B tests on key conversion touchpoints CTA placement, shipping cost display timing, and checkout step count to continue optimizing performance with data.

Reflection

Let's Build Something

Extraordinary Get In Touch!