G-Shock

New site for the unbreakable watch

Website
Ecommerce

Role
Lead designer

Team
SOON_

Year
2017

Introduction

Built from a mission by creator Mr Kikuo Ibe to create the unbreakable watch. G-Shock creates technologically advanced watches built to last forever through a constant pursuit of toughness.

My challenge was to redesign the UK site. Making sure it was easy to navigate between collections and products. Increasing user engagement by including editorial storytelling. Increase conversion rate by adding direct sale when needed and a full checkout experience. Lastly, create a modular design system to help keep consistency throughout the site for future updates.

UX /  System architecture

The first step was to understand the data structure around their watch collections. I wanted to expose the collections that identified the product. A number of sitemaps and wireframes were completed to find the easiest and most sensible way to navigate around the site.

Product lister

There was no way to view all the watches on the current site, instead you had to navigate through each collection one by one to find what you wanted. I introduced a simple ‘all watches’ page which allows you to quickly browse through the many different designs on offer, allowing you to simplify your search using the on page filter. Most watches are very similar to one another so with the help of the client we pulled out 3 key features per watch on the lister cards to distinguish one another.

User-focused, mobile first

As with most sites mobile first seems to be a common theme. With 65% of traffic on mobile, I understood from the outset that the design focus was optimised for mobile. Scaling up to an equally robust desktop view that layers on functionality for a richer experience.

Editorial

A fundamental of the new site was to increase user engagement. Some of the ways this was achieved was by blending editorial and retail content together. Mixing brand content into the sales flow allowed us to ease consumers through the process of being inspired first and then effortlessly making a purchase.

Fully e-commerce

Before there was no way of purchasing a product online. This was one of the key things to add to the new website to increase conversion rate. From adding a product to basket, right through to payment, delivery and purchase. The checkout process was based primarily on Magento 2’s platform.

Tough. Resistant. Reliable

G-Shock is the ultimate tough watch with an inspired design that combines durability and elegance. I let this be my guiding light for the site design. A simple interface, bold typography, strong images evocative of the chunky, aggressive styling of the G-Shock product.

The build

Working closely with the developers over at Vaimo. I created an easy-to-update modular design system to allow the team to build pages exactly how they wanted. I used tools such as Zeplin to ensure a smooth an efficient handover.

Results

3
Fold increase in sales YOY

11%
Increase in conversion rate

100%
Project cost recovered in 6 months

Next project

SoftBank