CuppaCo.com

While leading a small team of designers and developers, my involvement primarily focussed on the online identity of the CuppaCo brand, the customer facing website and overall user experience. CuppaCo, although built on the Magento eCommerce platform, was subject to continual development in order to add new features and refine existing functionality. Changes are based largely on customer feedback alongside the analytics data we gather, and strive to improve site conversion, checkout conversion, cart abandonment and other key metrics used to define site performance.
 
Homepage layout - http://www.cuppaco.com
Example category page for coffee pods and capsules - http://www.cuppaco.com/coffee/capsules
Example brand category page for Marley Coffee - http://www.cuppaco.com/brands/marley-coffee
Example product page with tabbed content, cross-sells, upsells and cart hover
Example of tabbed content on product page highlighting customer product reviews
Cart summary page highlighting customer savings, trust signals and payment options. Customers proceeding from Cart to Checkout increased 22% as a result of these changes.
Improved one page checkout enclosed and broken down into relevant steps. This new design allows users to check out as a guest and gives them the opportunity to create an account at the end. Checkout completion now sits around 75%.
Billing address details with postcode look-up facility. Note step one (Welcome) is now ticked off and Billing is highlighted.
Delivery address details uses a similar layout to Billing. Users are able to tick the 'Same as billing address' box to prevent entering their address details twice.
Delivery options will eventually provide services such as next day and nominated day delivery for an additional cost. Note the cart progress summary in the right hand column presents all of the information collected to far for easy review and editing. This prevents users from having to go back in their browser, effectively leaving the checkout process.
Accepted payment methods and debit / credit cards are displayed clearly. Note the emphasis throughout the checkout on the primary call to action button which is to 'Continue'.
Final opportunity for users to review the items they are about to purchase. Any last minute changes can be made via the summary in the column on the right (edit links) or by clicking on the checkout steps along the top.
The thank you page provides an opportunity to create an account for next time simply by entering a password. Again, emphasis is on the 'Register' button. The number of account holders have increased since this feature went live.
CuppaCo
Published:

CuppaCo

A selection of key page layouts from the CuppaCo.com website (2012 - 2014)

Published:

Creative Fields