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

My contribution covered the wireframe stage: mapping solutions to 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 purchase touchpoints. The wireframes were handed off to another designer to carry into high-fidelity design and, eventually, development within Shopify's native component system. I'm not able to confirm whether the redesign was ultimately implemented, as my involvement ended at handoff.

Reflection

Working within Shopify's native component system shaped every wireframe decision, solutions had to be achievable without custom app development, which meant prioritizing ruthlessly rather than solving every friction point at once. Handing off at the wireframe stage meant I didn't see the project through to high-fidelity design or measurement, which is a gap I'd want to close in a role where I stay closer to a project's full lifecycle. The user testing sessions still gave strong directional confidence in the prioritization, even without downstream data to confirm it.

Let's Build Something

Extraordinary Get In Touch!