TOMMY GUN’S ORIGINAL BARBERSHOP, Responsive E-commerce Website Template – UX/UI Design

Tommy Gun’s Original Barbershop is the place to go for haircuts, shaves and more. Their mission is to ensure that guests who visit end up walking away feeling and looking their best.

The request was to redesign a flexible, modular and customizable e-commerce website template for them based on a Shopify theme. The goal was to communicate their products and services and to design a user-centric website that's intuitive, easy to use and supportive of their marketing goals of increasing engagement, bookings and purchases.

The website template consisted of placeholder content and images. Once the template was approved and delivered to the client, they customized it according to their business needs and populated it with real content and images. Because of the template's flexible and modular nature, the order of the sections could be rearranged. There were also some components with multiple variations as options.

The website template optimizes discoverability, findability, product browsing, task completion and purchasing. It also supports the business goals by incorporating important features, such as promotions, unique products and a Look Guide.

Designed while working at Diff Agency

The scope of my involvement in this project included:

  • Client Discovery Workshop

  • Review of e-commerce usability test findings from Baymard Institute

  • Marketing Strategy

  • Component Library

  • Wireframes

  • Visual Designs

  • Design QA

In the Discovery Workshop, our team met with the client stakeholders to gather information about the business, products, target audience and goals. Based on that information as well as usability test findings from Baymard Institute, I conceptualized the Marketing Strategy and the UX Design.

I created wireframes to convey the structure, functionality and interactions. Below are some annotations on the Homepage and Product Detail Page (PDP) conveying the rationale behind the Marketing Strategy and UX Design.

 
 

In the UI Design phase, visual design mock-ups were created. Brand elements such as colour, scale, custom photography and visual treatments were used to create high visual impact.