Case Study · eCommerce / Shopify

Designing a High-Conversion eCommerce Experience

UX/UI design for a fast-growing activewear brand on Shopify — improving conversion, usability, and visual consistency across the storefront.

Worked hands-on with the brand's existing Shopify store to redesign key pages, establish a lightweight design system, and optimise the experience for mobile-first users.

Shopify UX/UI Design eCommerce Mobile-First Design System
View Work See Outcome ↓
Design

Core Shopping Experience

01 STAX Homepage — hero and entry point
Homepage

Brand-first hero with a direct path to shop

Full-bleed hero, featured collection strip, and a single focused CTA.

02 STAX Product Page — add to cart and pricing
Product Page

Price, size, and add-to-cart above the fold

Key purchase actions surface first — no scrolling to decide.

03 STAX Collection Page — product grid and filtering
Collection Page

Denser grid, faster browsing

Tighter product cards with visible price and quick-add on hover.

Industry Activewear / Fashion
Platform Shopify
Scope UX/UI Redesign
Focus Conversion & Mobile
Context

A Growing Brand, Outgrowing Its Store

The client was a fast-growing activewear brand with a strong product line and a loyal customer base — but their Shopify store wasn't keeping pace. The experience felt generic, the mobile version was frustrating to navigate, and key conversion moments lacked the clarity needed to turn interest into purchases.

My role was to identify the biggest UX gaps, redesign the core pages, and bring visual consistency across the storefront — all within the constraints of Shopify's theme system.

Mobile App Experience

Extending the shopping experience to mobile

As the brand scaled, we expanded the experience beyond Shopify by designing a mobile app focused on speed, simplicity, and mobile-first interactions.

STAX — brand visual
STAX App — Home / Discovery
Home / Discovery
STAX App — Product Detail
Product Detail
STAX App — Collection / Browse
Collection / Browse
The Problem

What Wasn't Working

Several friction points were consistently getting in the way of conversion — across desktop and mobile alike.

01

No clear value proposition

The hero section didn't communicate the brand's identity or guide users toward a clear next action.

02

Product pages were hard to scan

Size selectors, pricing, and CTAs competed for attention without a clear visual hierarchy.

03

Mobile experience was broken

Navigation, product image galleries, and the cart drawer all had usability issues on smaller screens.

04

Inconsistent visual design

Typography, buttons, and spacing varied across pages — making the store feel unfinished and untrustworthy.

My Role

What I Owned

I led the full UX and UI redesign across the core pages — from identifying the problems through to delivering polished, implementation-ready designs.

This included UX auditing, hierarchy improvements, visual design, and building a lightweight component system for consistency going forward.

UX Audit

Reviewed the full store experience and identified the highest-impact problems across desktop and mobile.

Page Redesigns

Designed new layouts for the homepage, product pages, and collection pages from scratch.

Design System

Created a consistent set of components, type scales, and spacing rules across the Shopify theme.

Mobile-First

Designed all pages with mobile as the primary canvas, scaling up to desktop rather than down.

Key Improvements

What Changed and Why

01

Homepage Redesign

Redesigned the hero to lead with a clear brand statement and a single strong CTA. Added a featured collection strip and social proof section above the fold.

02

Product Page UX

Restructured the product layout to prioritise the add-to-cart action. Improved image gallery, size selector clarity, and product description formatting.

03

Mobile Optimisation

Fixed navigation usability on mobile, improved the cart drawer experience, and ensured gallery and sizing interactions worked cleanly on touch devices.

04

Design System Consistency

Standardised typography, button hierarchy, colour usage, and spacing — creating a visual language that felt intentional and trustworthy across every page.

Outcome

What Was Delivered

  • Redesigned homepage, product page, and collection page from scratch
  • Mobile experience significantly improved across all key flows
  • Consistent visual language established across the full storefront
  • Lightweight design system created for ongoing theme development

Designing for eCommerce taught me to treat every screen as a conversion moment. Real users don't read — they scan, tap, and decide in seconds. Every design decision had to earn its place by either reducing friction or building trust.

→

Let's build something worth using.

Available for senior design roles, long-term product partnerships, and freelance engagements.

View All Work → Let's Work Together