Gary Rom Man - Signature Barbershop

Gary Rom Man — Signature Barber is a premium barbershop brand within the Gary Rom Hairdressing franchise, with 11 branches across South Africa at the time of the project.

Service:
Brand experience, UX/UI Design, Webflow Development
Industry:
Barbershop
Year:
2022
Role:
Designer, Developer

Project Overview

Premium digital experience for a growing barbershop franchise

The existing website didn't reflect the brand's distinctive, premium barbershop experience or its rapidly growing franchise network. The project involved a complete redesign and redevelopment focused on improving the user experience, strengthening the visual identity and creating a clearer path to finding a branch and booking an appointment.

Role & Scope

  • UX/UI Design
  • Web Design & Development
  • UX Research
  • Information Architecture
  • Wireframing & Prototyping
  • CMS Architecture
  • Copywriting
  • Booking System Integration
  • Client & Project Management
  • Web Hosting

Objectives

  • Create a digital experience that reflected the premium Gary Rom Man brand
  • Establish a distinctive and masculine visual identity
  • Improve navigation and content hierarchy
  • Make it easy to find a nearby barbershop
  • Create a clear path to online appointment booking
  • Build a scalable structure for the growing franchise

Research & Discovery

I analysed the existing website alongside the client's business goals and the wider premium barbering market.

Industry research and competitor inspiration helped establish a stronger visual and UX direction for the new experience.

Key findings

  • Weak visual hierarchy and unclear user flows
  • Inconsistent and poorly defined calls to action
  • Dense paragraphs and lists that were difficult to scan
  • Limited supporting imagery
  • Visual design that didn't communicate the brand's premium, personalised character

The research informed the new sitemap, user flows and visual direction.

Information Architecture

The existing structure was simplified and expanded to create clearer journeys around the primary customer goals.

The new structure prioritised:

Discover → Explore Services → Find a Branch → Book

A dedicated Franchising section was also introduced, while CMS collections provided a scalable structure for branch and recurring content.

UX & Wireframing

Initial sketches were used to explore layouts, user flows and content hierarchy before developing more detailed wireframes.

The wireframes focused particularly on the journey from discovering the brand to:

finding a nearby branch → viewing relevant information → booking an appointment.

Visual Design

Timeless. Premium. Distinctive.

The visual direction was inspired by the physical interiors of the Gary Rom Man barbershops — brown leather, copper details, dark mirrors, black basins and earthy tones.

The goal was to create a digital experience that felt refined, masculine and contemporary, without falling into an overly stereotypical aesthetic.

Typography

EB Garamond
Used for headings and display typography to introduce a classic, premium character.

Lato
Used for body copy and supporting UI to maintain readability and balance.

Colour

The palette drew from the barbershop interiors:

  • Deep brown / leather tones
  • Copper-inspired accents
  • Black
  • Earthy neutrals

Final Design

Timeless & Trendy

The final experience combined a premium visual identity with a straightforward customer journey.

The website was designed to make the key actions immediately understandable while allowing the brand's photography, typography and colour palette to establish the atmosphere.

Key Features

Homepage

  • Strong hero introducing the Gary Rom Man experience
  • Clear CTA to find a nearby barbershop
  • Service overview
  • Brand storytelling
  • Branch discovery
  • Strong visual hierarchy
  • Clear route into appointment booking

Branches

A dedicated branch experience allows customers to find a convenient location and access relevant information before booking.

Services

Services were structured into clear, digestible sections rather than long lists, making the offering easier to browse.

Booking

The booking system was integrated into the website to create a direct path from discovering a branch or service to making an appointment.

CMS

Reusable CMS collections were introduced to make branch and recurring content easier to manage as the franchise expanded.

Development

The approved designs were translated into a responsive Webflow website with reusable components, CMS collections and third-party booking integration.

The implementation focused on maintaining the visual character of the design while ensuring the experience remained practical across desktop and mobile.

Outcome

The redesigned website gave Gary Rom Man a more distinctive, premium and structured digital presence, better aligned with its physical barbershop experience and growing franchise.

The new experience created clearer journeys around the two most important customer actions:

discovering the brand and booking a barbershop appointment.

Services Delivered

UX/UI Design · Information Architecture · Wireframing · Web Design · Web Development · CMS · Booking Integration · Copywriting

Tools

Figma · Webflow · CMS · Shopify

Back to Projects