Louis Buck
AC-logo.png

Abel & Cole Website

 
AC-logo_black.png
 

Website Design

 

I worked full-time at Abel & Cole for just over 2 years as a Digital Designer. One of the projects I lead design on was the complete re-design of their website, to make it responsive and refresh the design.

Abel & Cole were in need of transforming their website into being adaptable across all browsing platforms. Tablet and mobile browsers made up ~60-70% of all website visits. Before this project the website would not scale down to a smaller browser properly. Which lead to bad functionality and a very poor user experience.

The nature of the business is a subscription model. Customers subscribe to a weekly box of organic fruit + veg. Users also have the ability to add groceries, meat, pantry items and more, making up the rest of their weekly shop.

 
website_desktop.png
New homepage incl. illustrations and lettering

New homepage incl. illustrations and lettering

 

'Accessible from anywhere'

The main reason for visiting the website would be to edit, manage and update a recurring order. And because of that, it makes sense for customers to log in, edit and confirm quickly and easily. Whether that be on an iPad in their living room, or a mobile phone on the bus.

We wanted users to have a much better online experience. The ultimate aim was to be one of the leading and best designed grocery websites in the world of ecommerce. 

We redesigned everything and I lead the design direction for the full overhaul. The whole project took an unbelievable six months, which is incredibly short amount of time to relaunch a website that deals with 75,000+ orders a week. This taught me time management skills, self-discipline and being able to work on a variety of different projects with different deadlines.

 

ILLUSTRATION

I also drew a set of illustrations to go alongside the project of relaunching the main box products, which were then used throughout the site. And style is used throughout all the new marketing material.

 
 
illus.png
illus-2.png
what-kind.png
how-it.png
 
 

PLANNING, SKETCHING, UX

I filled two gigantic dot matrix pads and had tons of whiteboard sessions, working closely with the UX designer, to get the new UI just right and to fit Abel & Cole’s unique customer journey (which is like no other grocery competitor). I believed in trying every avenue possible, even though exhausting, before we settled on a design.

I wanted to ‘break the grid’ a bit with landing pages, everything doesn’t have to line up perfectly. The brand is known for it’s character, so we spent a lot of time trying to get the balance between great usability and personality perfected.

 
skteches.png
 

Improving the actual customer shopping journey was the main focus and took priority over everything. This meant putting a spotlight on every stage. From product page and the category grid, down to the checkout and managing deliveries.

We started by cleaning up the clutter of the product pages, making the web tools on the page used to edit the product much cleaner and more user friendly. The shopping grid needed to use white space in a much more sensible way, to give each product enough room without having to fight for space.

The hardest part of this was making sure these objectives stayed true at every display size, from mobile to desktop. It was a brilliant to problem to solve and we ended up with a brilliant solution that I am really proud of. 

 
The new designed product page

The new designed product page

 
 
Recipe Box chooser

Recipe Box chooser

Meat Box chooser

Meat Box chooser

 
 

With the Deliveries and Basket sections, the user can not only look over their order but they can also edit up to three details about each of their items. The quanitity, the next delivery date and the delivery frequency of the subscription.

We wanted to change this to make it easier to edit on a smaller touchscreen device.

 
My Deliveries section

My Deliveries section

 

I achieved and learnt a lot during my time as Digital Designer at Abel & Cole. I gained valuable teamwork experience, including managing my first team. I found a passion in product design and had the opportunity to research and learn as much as I could, I’m ever grateful to A&C for that.