Skip to content

Responsive user experience design for The Diamond Store

I helped Deep London design a responsive user experience for The Diamond Store website.

Homepage design for The Diamond Store website

Overview

The Diamond Store offers a huge collection of diamond jewellery and is one of the UKs largest online jewellers.

The legacy website was heavily focused around SEO to the detriment of users wanting to get to product detail pages with the minimal number of steps. There was an over-emphasis on category landing pages, which although would improve the ranking of the site in search engines, extended the user’s journey to purchase an actual product.

Solution

Deep London asked me to help them redevelop the user experience. This encompassed a streamlined user experience with a responsive element to allow the content to be accessible across a number of breakpoints.

Based on insights gained from the site analytics I developed a framework in which to redesign the new site experience and develop streamlined user journeys.

Three typical user journeys were developed and then fed into the development of a responsive HTML prototype.

The prototype was delivered to the client along with page design and helped them visualise how the functionality and content could potentially work across different breakpoints.

User persona and customer journey
Development of key users journeys enabled the client to see how users could move through the site in the most effective way.
Homepage carousel prototype
HTML Prototype: Desktop view of the homepage illustrating how a full-width hero carousel might work.
Multi-device view of product listing screen
HTML Prototype: Desktop view of the product listing page.
Product details screen from the HTML prototype
HTML Prototype: Desktop view of a product details page.
Compare products screen from the HTML prototype
HTML Prototype: Desktop view of a compare products page.
Responsive shopping basket screen from the HTML prototype
HTML Prototype: Desktop view of the add to basket page.
Responsive checkout screen from the HTML prototype
HTML Prototype: Desktop view of the checkout page.
Product listing page design for The Diamond Store
Live website: Product listing page.
Product details page design for The Diamond Store
Live website: Product details page with basket preview visible.
Shopping basket page design for The Diamond Store
Live website: Shopping basket page.

Share This Project

If you enjoyed this project, then let others know about it by sharing it.