Preview of the 2018 update 
This is an overview of some of the UX, UI and general design changes that I've made for the new version of the website. There's also a preview of the new homepage, below. It will be launching in June along with the new TGF Wedding collection. 

Further down is an overview of the current 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 to visitors to link to the store locations from the top bar (the top bar is hidden on scroll).
There are numerous tweaks and changes which I'll elaborate on once the new look has launched, but there are a few highlights below.
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.
During the development of the previous version of the site we enabled the official WooCommerce wishlists extension so that customers could save their favourite products and we could keep track of what was popular. I had to do a lot of work to make the customer interface responsive enough to be acceptable, but I still wasn't happy with the result.
In the new update I've used a different extension which instead saves the products as a cookie and has a much cleaner and simpler UI on both the product page and wishlist pages. 
Wishlist Event Tracking
A downside to the official wishlist extension was there was no way of viewing popular products without having to manually look at each user's wishlists that had been stored in the back-end as posts.
So in the new update I'll be borrowing something which I've already implemented on another website – adding Google Analytics event tracking to the Add to wishlist link. By this method we can easily see the popular wishlist products in GA, in addition to a host of other data on wishlist users.
NEW Homepage design
There are still a few tweaks needed, but this is the general layout. Each large image has a subtle parallax effect when you scroll down, and the products in the second panel display at a different angle on rollover. The subject for each panel may change before it goes live – I need to discuss with the team beforehand, and I'm also hoping we'll have new photography soon too.
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