Gary Rom Haircare -e Com

High quality haircare product - E-commerce redesign & Webflow-to-Shopify implementation

Service:
UX/UI Design, Webflow Development, Shopify Development
Industry:
Hair Care /E-commerce
Year:
2022
Role:
Designer, Developer

Project Overview

A premium e-commerce experience for the Gary Rom haircare range

Gary Rom needed a more modern and commercially effective online store for its professional haircare range. The existing store lacked the visual quality and shopping experience expected from a premium salon brand.

The project involved selecting and adapting a suitable Webflow template, redesigning it around the Gary Rom brand, building the experience in Webflow, and ultimately migrating the finished site to Shopify for e-commerce management.

Role & Scope

  • UX/UI Design
  • Visual Design
  • Webflow Development
  • E-commerce Design
  • Shopify Migration
  • Shopify Implementation
  • Client Communication

Objective

Create a premium, easy-to-navigate online store that better represented the Gary Rom brand while providing a practical foundation for selling and managing haircare products online.

Approach

Rather than designing and developing an e-commerce experience completely from scratch, I identified a suitable Webflow template that provided a strong structural foundation.

The template was then redesigned and adapted extensively to match the Gary Rom visual identity, product range and e-commerce requirements.

The completed experience was developed in Webflow before being migrated to Shopify, where the final e-commerce functionality and implementation were completed.

Design Direction

The visual direction focused on creating a clean, premium haircare experience that felt connected to the Gary Rom salon brand.

  • Minimal, editorial-inspired layouts
  • Strong product photography
  • Clear product hierarchy
  • Premium typography
  • Restrained colour palette
  • Clear calls to action
  • Simplified shopping experience

E-commerce Experience

The site was structured around making it easy for customers to discover products and move towards purchase.

Key features

  • Product-focused landing sections
  • Categorised product browsing
  • Individual product pages
  • Clear product information
  • Strong product imagery
  • Prominent purchase CTAs
  • Responsive e-commerce layouts
  • Shopify-based product management

Webflow → Shopify

One of the more interesting aspects of the project was the transition from design and development in Webflow to the final Shopify store.

1. Template selection
A suitable Webflow template was selected as the starting structural foundation.

2. Redesign
The template was extensively adapted to the Gary Rom brand, content and product requirements.

3. Webflow development
The redesigned experience was built and refined in Webflow.

4. Shopify migration
The completed site was migrated into Shopify using a migration/conversion tool.

5. Final implementation
The Shopify version was then refined and adjusted to work with the platform's native e-commerce functionality before launch.

Outcome

A completely refreshed e-commerce experience that gave Gary Rom a significantly stronger digital storefront for its haircare range, combining a premium branded experience with Shopify's practical e-commerce infrastructure.

Services Delivered

UX/UI Design · Visual Design · Webflow Development · E-commerce Design · Shopify Migration · Shopify Implementation

Tools

Figma · Webflow · Shopify · Udesly

Next Project