Gassan Diamonds

A new shopping experience for a classic brand

Design Lead
Research & Concept
For Mobile & Desktop

The luxurious GASSAN brand represents high-end watches, jewellery, diamonds and has 14 physical stores across the globe. GASSAN has excelled in their craftsmanship, quality and reliability for more than 75 years as a family owned business.

To improve on their online experience, and to strengthen their brand in the market, GASSAN partnered with Reversed Digital (my employer) to deliver a new high performance shopping experience.

Being design lead on this project I directed the design process, planning, research, visual direction, UX/UI and I created deliverables for the dev sprints. Together with my colleagues and the GASSAN team we worked towards the envisioned outcome: bringing GASSAN's qualities into the digital age.

Homepage on desktop and mobile.

Redesigning the GASSAN online experience meant a lot of things. From updating their online branding and information architecture to reimagining the interactions and layouts to use screen real-estate to its fullest on all devices. Lot's of choices had to be made.

We kicked-off the project with a thorough 3 week discovery phase to to learn as much as we could. We mapped the current state, goals, impediments and opportunities. We facilitated multiple workshops, performed competitive- and trend analyses, interviewed clients and did multiple service safari's.

Mapping opportunities with the GASSAN team.
Interviewing GASSAN store personnel.

At the end of the discovery phase we delivered a discovery report which covered our most important learnings so we could move forward confidently to the ideation phase — which resulted in three concepts. These concepts were tested, reviewed, cherrypicked and merged into a final concept for GASSAN's new online shopping experience.

The concept utilises three new typefaces. We decided upon the refined yet classical Louize Display typeface for headings. For the accompanying body-copy we looked for a typeface with high legibility and neutral character. We ended up choosing Graphik for its sophisticated quirkiness and neutral, yet business esque character.

For active elements, like buttons and links, we opted for Artegra Sans, a wide typeface best used in all-caps, to encapsulate a luxurious edge.

Mobile product detail page with size drawer.

One of the design principles we followed was 'focus on high-end product experience'. We wanted to create an environment where the high-end products could shine at their best.

We partnered with a renowned photography studio to create new high-res product photography. Layouts were created with high-product focus; wide, spacious layouts and (the ability for) large imagery to bring out the details — even on mobile.

Speaking about mobile: 70% of GASSAN's traffic originated from mobile devices. We focussed heavily on smaller screen sizes during our design sprints, experimenting along the way with various patterns and interactions. Of course desktop devices weren't ignored. We designed for up to four breakpoints; 1600px being the widest.

Adding products to the quick-cart.

Books have been written about how to optimise cart and checkout interfaces. In GASSAN's cart, and through the rest of the website, decisions had to be made between esthetics and possible conversion optimisers.

On the one hand we didn't want to taint the interface with too many persuasive- or conversion optimising elements you'd commonly see in webshops. On the other hand we didn't want to obstruct conversion.

So, apart from applying and lending some best practices, we sticked to keeping it simple, informative and instructive to create a sense of familiarity and trust.

Desktop and mobile shopping cart.

On mobile devices carts and checkouts are a challenge. You have to cram a lot of information onto a small screen. We wanted to keep things simple and clear and opted for a modified approach of the Shopify checkout. This resulted in a super simple 3-step flow: information, payment and confirmation.

First step of the checkout: personal information.

We paid close attention to secondary flows, heuristics, and interface hierarchy. After a couple of user-tests and iteration we settled on a simple, frictionless checkout with a low threshold in terms of understandability.

Payment step in checkout and the 'my account' environment.

We also created an entire 'my account' environment for the GASSAN webshop. Customers can access information about their orders, wishlists, personal data, documents and addresses.

Apart from the regular e-commerce flow we also redesigned the existing tours section. The existing tours pages and flows were lacking in terms of discoverability and understandability. Information was sometimes cramped and hard to find. Room enough to improve.

Tour overview- and detail designs.

The new tour-flow allows the user to be inspired through video-content and and spacious imagery. The most important information is directly at the top. Also, tours now have a timeline with tour highlights which makes it easier to explore and learn about different tours.

We also simplified the on-page booking process. The old flow required the user to go through multiple screens to end up in a strange third-party checkout. We simplified the booking process so that the booking configuration can be done on the page of the tour, in one step.

As for the tour-checkout we leveraged the newly designed e-commerce checkout (albeit slightly altered). By doing so we could drop the third-party checkout of keep users on the GASSAN premise.

There is a lot more to tell about this project. But I'll have to wrap up somewhere. In the end the whole project was a worthwhile experience, where I learned a lot in terms of process and collaboration. Especially since we had limited in-person face-to-face time with the GASSAN team and had to do a lot remotely due to distance being a limiting factor.

On a personal note I found it quite interesting to dive into the world of jewellery, a world I wasn't familiar with at all (to say the least).

Anyway, thanks for reading.