When I joined Argos the company was going through a digital transformation phase to improve design and development across 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.

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.

1- Some of the industry examples gathered during research phase 2- Research into m/e-commerce by Baymard institute — Understanding E&M Commerce Patterns

Conducted extensive research into best practices for m/e-commerce sites to optimise checkout, browsing and searching experiences using Baymard’s Institute and industry guidelines.

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

The result

Secured checkout

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.

Multi-checkout

Recommendation to allow users checkout a delivery and a collection at the same time by using iframes.

Flexibility

Allow customers to change collection within checkout if one of their items wasn't located in the Argos store they originally selected.

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

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.

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

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.

The impact

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

A truly Agile and multidisciplinary team effort (product manager, tech, analysts, research and design). Presented to newly appointed CTO as an example of how Argos could start delivering website improvements and new features going forwards.

+£200k

Sales for that season that includes gift cards or vouchers.

4 weeks

Rapid design, testing and development