Global Cart & Checkout experience for HP

by Jonatan Mato

Background
As part of the evolution and global alignment of the HP Store, we have proactively launched numerous redesign projects for the different experiences in the purchase journey. Cart & checkout are very task-oriented pages where trust is key. This trust needs to come not only from brand equity, but also from clarity and the absence of unnecessary friction from start to finish.

UX Lead
Communication with stakeholders, planning and coordination of research and design work and UX/UI design.

Process

The project lasted 6 months from kick-off to deployment, starting with the definition of the design challenge and finalising with the delivery of a documented interface, which would be implemented into the store as an AB test. This was, naturally, an iterative process accomplished by a team of two designers, a researcher, and me as their lead designer.

Phase 1 - Discovery

We started the project by understanding the cart & checkout we had at the time from different angles by gathering as much information as possible, looking for requirements, pain-points and opportunities.

Heuristic analysis
Analysis of the experience based on our team's expertise.
Task-oriented sessions with users
Sessions lead by our researcher with a low level of participation where users were asked to fulfill different tasks while sharing their thought process.
Interviews with stakeholders
Sessions with different business units with insights about the experience.
Quantitative analysis of metrics
Analysis of key primary and secondary metrics which summarise the performance of cart & checkout, including potential issues and improvements.

Phase 2 - Define

With a large amount of information around the challenge to be tackled, we had to digest it and define the goals and requirements for the project.

Definition of KPIs
What are the measurable goals of the project, and how we are going to measure if it has succeeded.
Global use case map
All use cases across the stores around the globe need to be documented as part of the design brief.
Benchmarking
Looking into how others approach similar problems tends to help detect potential opportunities.

Phase 3 - Develop

We had a clear idea of the strategy to follow, so in this step we materialized the concept and made it a reality.

Flows & wireframes
The backbone of the interface helps us to sum up the main characteristics of our proposal.
Concept validation
The concept needs to be validated against user and business goals and technical feasibility.
Prototype
With the concept validated, we need to get it to its final stage
Final validation
The final prototype needs to get the final validation from stakeholders before it is delivered.

Phase 4 - Delivery

Once the designs had the sign-off, it was time for them to implement it. Our role at this stage is making sure the development team have what they need in order to build a product we can sign off.

Documentation and delivery
Designers know what they have created, but whenever the designs are shared with other teams, it is crucial to make sure we provide the necessary supporting material.
Support
It is not uncommon for developers to need additional clarification in order to understand the designs.
QA and sign-off
When the development team is ready, we need to validate what has been developed and make sure it is correct. It is important for this to succeed to have a clear and agile communication process.

Results and follow-up

The result was a modernized purchase experience with an updated look & feel and some usability improvements. Among them we will find detailed information about products for selection validation, collapsible e-voucher section, process indicator and cross-sale capabilities.

Old design

New design

The new cart & checkout was deployed as an AB test and, after a 4 weeks, we reviewed the results based on the success metrics defined during the discovery page. Based on them, it was decided to progressively deploy the new experience as a replacement for the old one, starting with the Asia and LATAM regions.

Moreover, based on those readings, we detected some opportunities for improvement which were translation to an action plan, including some qualitative tests and minor AB tests.