TFG London, the Parent company of Phase Eight, Hobbs and Whistles wanted to move all 3 brands onto a single group platform (Demandware). All 3 brands needed to use the same basic wireframe structure, whilst maintaining the flexibility to edit their own style guide as per the brand guidelines.
I was appointed as the lead designer on the project. The challenges were:
Improvements from old site to new included:
A vastly improved filter system that was sticky to the page for ease of access, but could also be hidden.
Imagery was resized to be as large as possible and could be comfortably switched between a 3 product and a 4 product view.
Flexible options for each brand to customise the load out of their product info sections: product name, product subheaders, product price, product reviews, colour swatches and 2 layers of stickers/badges.
A switch from pagination to a 'load more' format. Optional content slots for further branding/cross-selling.
A new 'Quick Add to Bag' function to allow customers to select a size and shop directly from the listing page (more on this later).
The original set up for filtering was extremely outdated and ineffective due to how clunky and awkward to use it was.
I switched the new filter system into a full screen takeover with easy to press buttons, an accordion system to make navigation cleaner, a floating 'apply' button pinned to the bottom of the screen and a list of 'applied filters' locked to the top to make removing filters quick and easy.
Improvements from old site to new included:
An improved format of displaying the product images - removing thumbnails and switching to 2 large images side by side - allowing the customer to see more of the product side by side.
Made the product description section sticky within the viewport to ensure the 'add to basket' CTA is always accessible whilst viewing the product images.
An accordion structure that focuses the customer on key information whilst making it simple to find additional information.
Plenty of brand customisation options through additional content spots.
Bolstered the cross-selling opportunities towards the footer of the page.
We wanted to give customers a more streamlined option for shopping should they wish to bypass the product description page entirely.
I prototyped a simple system of a button that appears on hover (static overlay on mobile) that once clicked would bring up size options. From here they can select a size and add the product direct to basket.
When mixed with the power of a load more button on the product listing page, this can be an incredibly powerful feature for mobile shoppers.
Improvements from old site to new included:
Improved overall load speed of the checkout process and cleaned up the journey for a cleaner user journey.
Introduced clearer sign posting throughout the journey.
Added Rich auto complete functionality to the postcode/address finder.
Used a number of visual techniques to psychologically give the customers increased confidence in our security with their details i.e. padlock icons, shaded boxes and lines.
Worked with a multi-step journey rather than a one-page system to not overwhelm the customer.
Collapsable payment options with a streamlined stored credit/debit card system.
Increased transactions by 30%, improved site speed by 46%, increased AOV by 8%, improved session duration by 7.5% and reduced bounce rates by 26%.
