Redesign of Shopify and migration to Drupal E-Commerce with SEO organic techniques, proof of concept

1 year 9 months ago

Belltrees Forge

About – incomplete project – 7 weeks duration

Belltrees Forge is one of the last hand wrought iron foundries in Scotland. Manufacturing a range of products from candle holders to beds.
A proof of concept designed with Drupal Commerce, working model.

Product research and analysis

Understand the business model and recognise customer pain points both regular and traders.
For example, no stock is held, and all products are made on order/payment, so there is a lead time on final delivery fluctuating between 3 – 4 weeks seasonally dependant.
The company relies heavily on google ads on a nearly all their products and desires better placement in search engines.
The business finds it hard to update content themselves, simple change of slider images or creating new information is difficult.

The insights from customer and trade account feedback and complaints revealed obvious issues such as: -

  • Late deliveries – what does lead time mean
  • Traders not knowing their user journey during registration
  • Traders not knowing their benefits
  • Sizing of products – unable to fit beds in rooms for example
  • broken links
  • unable to know the appropriate variations on products


Heuristic User Analysis

The current site does not portray a typical shopping experience, for example no products being offered to buy / order at a single click on landing on the homepage, expecting new customers to navigate to product collections, search then buy. Other user experience issues include: -

  • Not enough exposure of products on homepage
  • Small font, bad typography – colours are weak – it’s a creative business and should reflect this throughout the brand
  • Not using top-fold slider / carousel to promote products correctly
  • Top-fold slider text is unreadable due to lack of characters sizes, colour
  • Weak display of “lead time” messaging, small and unnoticeable
  • Weak display of trade benefits
  • Weak notice on free delivery
  • “lead time”- new customers expected to know what this means
  • Wasted real-estate from top-fold down, too much text, regions can be utilised with a much better user engagement in promotion of products
  • Weak content / product strategy
  • No organic SEO, applying best practices like clean URLs’ with keywords to products
  • Incorrect SEO techniques – using wrong vocabulary to promote products for example not using primarily candle holders as a term but candlesticks which is a subset of candle holders
  • Video with no user controls


  • Product Modelling – Business analysis – Proof of Concept
  • Research and citations
  • Heuristic UX Design, - IA information architecture – affinity mapping – vocabulary/product exploration (niche marketing) - sitemap
  • Organic search engine optimisation techniques
  • Mobile prototyping AxureRP
  • Viability, Costing - MVP
  • Product categories
  • Graphic design – Hero Slider product promotions, Trade account Banner – Gift Cards – rework of logo, clean and scalable
  • Typography - opensource – Google Fonts Nunito, Sans-serif, character sizes, letter spacing, line heights, weights
  • Colour scheme
  • Copywriting
  • Infographics - Iconography – Lead time, Delivery Discount
  • PWA Progressive Web App Graphics
  • Product attributes
  • Tackling sizing and measurements with augmented reality AR
  • Price Lists
  • UI Design, UI brand, Handheld – Desktop
  • UI Engineering - Bootstrap UI
  • Migration Strategy – Production strategy
  • Drupal CMS PaaS E-Commerce configuration
  • Documentation – business user guide how to
  • UI Engineering - bootstrap UI framework
  • TWIG, HTML, SASS/CSS, jQuery

Existing site

Belltrees homepage
UI issues - consistency
Broken link from homepage

Brand Guide

Belltrees homepage

SWOT analysis

Belltrees homepage

Customer journey – product focused user – insights and pain points

UI issues - consistency

Shopping cart – the problem and the fix

UI issues - consistency

Brainstorming – Information Architecture – Hierarchy – Taxonomy – Sitemap – niches found

Belltrees homepage
UI issues - consistency
UI issues - consistency

First Concept, prototyping – homepage – navigation – mobile first

UI issues - consistency
UI issues - consistency
UI issues - consistency

First Concept, prototyping – Sign In / Trade Account Registration – mobile first

UI issues - consistency

Testing the UX on XCode Simulator – AxureRP carousel, sticky header, slide-out mobile navigation – dynamic form (trade account registration))

Belltrees homepage
UI issues - consistency
UI issues - consistency

Hi-Fidelity final designs – homepage iPad and iPhone models

UI issues - consistency
UI issues - consistency

UI development hand-off coded specs built with Bootstrap 5 HTML, SASS/CSS, jQuery – Owl carousel, Slider

UI issues - consistency

UI specs – Typography; letter spacing, line-heights, font-weight, Headers and body text, colours / developers can easily inspect the code or use the code directly with the new theme

UI issues - consistency
UI issues - consistency
UI issues - consistency
UI issues - consistency

Collection pages and collection page coded with Drupal Commerce

UI issues - consistency
UI issues - consistency

New UI components

UI issues - consistency

Drupal administration commerce pages

Belltrees homepage
UI issues - consistency