When I joined Argos the company was going through a digital transformation phase to improve design and development across the all their digital products. 

I worked with new head of UX and head of product to help implement best practices across the design and development teams, creating design libraries and interaction patterns to improve consistency across the organisation.

 
 
1.png

Checkout
vision

This project looked at different options to guide the design of a future checkout system that:

  • Addressed some of the issues with architecture that split reservation and delivery into two separate systems.

  • Looked at ways to deal with current two separate payment systems for delivery and collection.

  • Helped users understand delivery, collection and payment options.

  • Explored options such as single-page, multi-page and guest checkout.

Platform: Website, Mobile & Desktop

Deliverables: Research, Sketches, Prototypes, Stakeholder workshop and recommendations to business.

 

 
 

understanding
e/m commerce

Conducted extensive research into best practices for m/e-commerce sites to optimize checkout, browsing and searching experiences.

Industry analysis and extensive research, including usability study by Baymard institute. 

 1- Some of the industry examples gathered during research phase 2- Research into m/e-commerce by Baymard institute   

1- Some of the industry examples gathered during research phase
2- Research into m/e-commerce by Baymard institute
 

 

Complex architecture

Part of the complexity of Argos checkout lies on legacy issues that split the checkout experience that handles delivery and reservation of products in two completely separate systems.

This problem is particularly painful for users with more than one item in their baskets;  if they products don't qualify for same delivery/reservation checkout, users will technically need to checkout twice as they won't be able to pay for all items given that there are two separate systems. 

 

multi steps vs single page checkout

Exploring multi-steps vs single page checkout, taking into account some of the constrains with existing payment systems. 

After many iteration the sketches were narrowed down to two major groups. One explored a traditional multi-step checkout were I focused on offering clarity of information, and the other was a single-page checkout  which focused on speed. 

 Pain points in existing Argos checkout - Argos Digital Office- Victoria, London

Pain points in existing Argos checkout - Argos Digital Office- Victoria, London

 Multi-step checkout flow

Multi-step checkout flow

 Confirmation message 

Confirmation message 

 Single page checkout option

Single page checkout option

 Single page checkout option

Single page checkout option

The result

A set of two design recommendations that let users:  

  • Let users know they were entering checkout by increasing prominence of checkout security logos that reinforced sense of security and focused on funnelling users through to payment. 

  • Reduced to 4 steps, Delivery/collection, payment, optional login, order placement. 
  • Recommendation to use iFrames or payment modules for delivery and collection so users didn’t have to go through two separate checkout journeys.
  • Localisation was possible at checkout point. Users could change collection within checkout if one of their items wasn't located in the Argos store they originally selected.
  • Move Argos credit card promotion to payment tab. 
checkout-1.png
 Single-page checkout: this approach let users choose a delivery and collection for different items in the same page. 

Single-page checkout: this approach let users choose a delivery and collection for different items in the same page. 

wires-payment-vision.png
 
2.png

Paying with Gift cards & Voucher

For Christmas 2015 Argos wanted to let gift card & voucher’s holders pay for their products online. Up to that point, the only way users could redeem these vouchers was at a local store.

Platform: Website, Mobile & Desktop
Time: 4 weeks
Deliverables: Prototype, Test brief, Error handling documentation. Leased with developers and deliver project in time. 
Presentation to newly appointed CTO as an example of how Argos could start delivering website improvements and new features going forwards. 

 
errror-handling.png

Consistent messaging 

I formalised all copy and messaging for this feature as a way to start helping Argos document things in a more efficient manner. At that point Argos didn't have a system for recording designs and capturing things like copy. We used Confluence and collected all potential copy, error messages needed for this new gift card payment feature. 

 

 

This project had to be designed, tested and delivered within 4 weeks as code freeze for Christmas season was approaching

desktop-mockup.png

Quick wins

Payments is an area at Argos that has serious code dependencies from years of legacy work. We couldn't modify the designs (believe me I tried) for fear of risking a potential crash before xmas season. So instead I created a module within the existing payment system that lets users pay with Gift Cards and vouchers online. 

 

 

Release 

The result was a straightforward new payment section in checkout that is now live and available in Argos website (mobile & desktop).

The design also shows the different types of vouchers and cards accepted by the site, while letting users continue paying with existing payment methods. 

You can pay with a gift card at Argos.co.uk to see it for yourself. 

wires-gift-payment.png