WordPress & WooCommerce design and development

For long-term client and legendary Carnaby jewellery store The Great Frog

2018 update 
This is an overview of some of the UX, UI and visual design changes that I made for the current version of the website. There's also a preview of the homepage, below. The new look was launched in October 2018, alongside the new TGF Wedding collection. 

Further down is an overview of the previous version of the site, which I worked on in 2016.
There's an amazing team at The Great Frog that I absolutely love working with, even when we have tricky problems to overcome.
I've used analytics data to help guide our focus on this new version of the website, for instance consolidating the least popular pages into other areas of the site, or repurposing the information and photographs into the blog instead.  This means we have a more concise website which is hopefully a lot simpler to use.
For instance, still one of the most popular blog posts is the one announcing the opening of the LA store, so I thought it would be useful for visitors to have easy access to the store locations, so links to each store profile can be found in the top bar (the top bar is hidden on scroll and is considered a secondary navigation only).
Due to the design of the previous website, and the length of some product descriptions, occasionally product pages ended up looking rather messy and you'd have to scroll down a lot, especially on mobile, to get to the Add to cart button.
On top of this, for particular categories of product, like rings and earrings, we needed additional messages to appear on product pages, in addition to the product descriptions.
To overcome this issue, the product info is now positioned below the product image and Add to cart button. It's also tabbed so users can find the specific piece of information they need, this allowed me to write a function that displayed another tab on product pages which can display additional messages, for instance the ring sizing information.
Because The Great Frog has both a UK and US catalogue, the team wanted a way to present different information to customers depending on which part of the world they were in. Suggestions of creating a separate website for US customers seemed excessive so I looked into ways to make this as easy as possible without having to replicate any work which had already been done.
I discovered a well-resourced, well-written, premium extension which would allow us to display fixed USD prices, via geotargeting, to TGF's US customers inline with the US catalogue that's displayed in the NYC, NOLA and LA stores.

I was able to utilise this geotargeting capability for other things, for instance I wrote various functions to display different messaging to customers in the USA and those in the rest of the world, for example within the Gift Voucher product description above.
NEW Homepage design
Each large image has a subtle parallax effect when you scroll down, and the products in the bottom panel display at a different angle on hover.
2016 UPDATE overview
The TGF website was desperately in need of an update. Around 42% of visitors were using their phones to access the site, compared to 36% on tablet and only 22% on desktop, this was in spite of a website which was not responsive at all. My objective was to create a website which would make it easier for these mobile and tablet visitors to make a purchase.
My objective was to create a website which would make it easier for these mobile and tablet visitors to make a purchase.
During this period I also handled the migration of the web store from a previous e-commerce platform onto WooCommerce and the subsequent necessary SEO fixes, I also managed the integration of two new payment systems, the newsletter design and build, Google Analytics and event tracking implementation, the browser testing, and trained the TGF staff to use the new system.
The team already had a mockup they wanted to use, so my work primarily involved coding it up then developing areas which the mockup hadn't covered and making the necessary adjustments for mobile. 
The first page of the mockup suggested there be a newsletter sign-up form as the first thing the user sees once they land on the homepage. I felt very strongly that this would be really off-putting for visitors and be an added barrier to what we wanted them to really do – look at the catalogue of products and decide they want to buy something.
I explained this to the team and it was agreed that we would just have the sign-up form in the footer and I'd include an opt-in for customers at checkout.
Front-end what you see is a highly customised Storefront child theme. I figured it would be better to work off a framework which had already been thoroughly tested with WooCommerce than build my own from scratch and try to keep up with each update.
Back to Top