FANCI - WhatJackHasMade


Redesign and Development of Local Jewellery Website

FANCI (Previously The Ring Studio) is the South’s dedicated Engagement, Wedding and Eternity ring shop. Specialists in diamond jewellery and bespoke jewellery design, the business has grown in Southampton over the past decade.

As the business has grown and evolved the company began to design and manufacture more than just rings.

In house design and manufacture allows the company to supply a wide and varied selection of different pieces of jewellery as well as offering a re-modelling of existing jewellery and a full on-site repairs service.

The name FANCI is more representative of what the company has evolved into; a designer and manufacturer of bespoke, fine jewellery.

Redesign and Development of Local Jewellery Website
View The FANCI Website

Defining The Project

After email introductions, I met with FANCI in person, at their Southampton studio to discuss the requirements and specification they had put together for the website.

They felt as though their current site aesthetic didn’t fit the new brand direction that they were taking, lacked proper information architecture and had a dated look to it.

It was clear that FANCI offered a large range of products, most of which weren’t effectively communicated to their customers on their existing website.

Having a way to clearly define categories of products, as well as sub-categories, was a minimum requirement.

The Solution

Fortunately for myself, FANCI were self-motivated and passionate around content creation, and with a large following on Facebook, Twitter and Instagram. There was more than enough imagery to source in terms of assets for the front-end designs of the website.

Chris, Director of FANCI and his team provided text copy for the parent pages and descriptions for taxonomies such as product categories.

Having access to content allowed for accurate designs to be put together and helped illustrate what the final product would look like.

The final solution is a beautiful website that is clear and clean, an aesthetic that is fitting with the elegant products that FANCI offer.

Rich imagery and complimentary shades of blue are gently introduced throughout the website to keep a focus on gorgeous products whilst creating a consistent brand.

With the new website, customers and sales leads are able to explore all that the studio has to offer, with a clear organisation of products, and user-friendly navigation system, the FANCI team are ready to start advertising their new range of products online.

User Interface Designs

As with any of my projects, it is first important to define the problem we are solving and who we are solving the problem for.

Understanding the end user, their needs, and requirements will help create informed designs that focus on helping them complete their tasks, and creates a positive user experience with the brand.

To help create a user profile on who will be using the website, primary and secondary research was carried out, exploring the consistencies that were found amongst FANCI’s customers.

The research was conducted using Google Analytics and Hubspot marketing tools.

Once the target audience had been accurately assessed, I began creating designs in Adobe XD and Figma.

On completing the high-fidelity designs, I visited Chris in-person to gather feedback he and the team had on the designs before making any final changes ahead of development.

Front-end Development

After the page designs were approved by FANCI, I set about turning the high-fidelity mockups into live webpages.

I was able to carry through a pixel-perfect match in developing superb front-end interfaces that highlighted the attention to detail, working across all user’s devices and modern web browsers.

All pages were developed in a pattern library which helped document components for other developers to reference and use later in the project lifecycle.

The front-end development tech stack includes CSS/SCSS, HTML and JavaScript, taking advantage of all possible front-end capabilities, including –

  • Query Caching
  • Lazy-loading Content
  • Code Minification
  • Code Splitting based on Page Template

Combining these advantages results in a highly optimized website that will rank highly on Google and other search engines, as well as delivering a quick, responsive and easy to use website for all users.

All pages were coded using the latest semantics in HTML5 elements, with CSS minified and auto prefixed for all major web browsers, and any JavaScript processed using Babel to make use of the cleanest syntax available.

Back-end Development

No website application is complete without a strong back-end system.

With over five years of experience in WordPress development, it was a no-brainer to implement a WordPress backend system for the FANCI website.

In doing so, I have customised the editing experience to allow any of the FANCI team to create pages using a block-editor that has been built from the ground up.


With tight security and data encryption, the website stores and handles site content within a tightly locked database.

All pages are backed up periodically off-site to provide a rollback solution should the site encounter any issues.

With FANCI as a new client, I have set up automatic monitoring of the sites health status and will respond within hours should any issues arise.

WordPress CMS

It’s important for any team running a business to have complete control over their products and services. What their content says is a reflection of their message, values and influences the perception of them to their customers.

Using WordPress to manage content for their website, the FANCI team is able to update any part of their website’s text, imagery, colours as well as build and edit new pages without the need to contact a developer.

The WordPress system itself is again bespoke, and the editing experience is tailored specifically to the FANCI team, Using the new Gutenberg editor, managers of the site can add custom ‘blocks’ that I have created which allow for consistent designs with flexibility over the content rendered in the final application.

Site Optimisation and Support

Prior to launching the website to the general public, site optimisation checks were made to ensure all content was free of errors, the code was validated, and loading speeds were monitored to check that all measures had been put in place to deliver the best possible website.

As well as optimising the site for SEO (Search Engine Optimisation) and improved user experience, I have implemented error tracking software and Google Analytics to monitor and improve the site post-launch.

At any time, Chris and the FANCI team know that I am an email or phone call away should any issues arise and I hope we can collaborate again in the future to make beautiful digital products.

Continue Viewing My Case Studies 📚

Tell Me About Your Project

Get in Touch