Checkout Vision

Motivation

Over the years, we have tested the complete shop journeys and thus also the checkout in holistic UX tests. We collected many insights through UX tests, quantitative insights, and evaluations from heat maps and recordings. We have often used these findings directly to create further developments. Nevertheless, the impression remained that we viewed the checkout in a fragmented manner.

With the approach of a UX vision, we want to counter all identified pain points, further develop the visual style and develop a state-of-the-art checkout using a more holistic approach.

My Role

As a UX designer, I know the technical dependencies of the checkout. I have evaluated the current status of the checkout with the product owners and developers and presented the need and potential for further development in the form of a UX Vision.

I also gathered the research results, summarized them, and brought them into a new, expanded UX concept together with other findings. We developed the new User Interface with a UI designer and validated it in an unmoderated UX test.

Goals

︎ Enhance the ‘Brand Experience’
Voice and Tone, Visual Style and Brand Perception

︎ Enhance the ‘Ease of Use’
Streamline flows und interactions

︎ Conversion Rate Optimization
Mobile optimization, nudging 

Benchmark

We already knew a lot about pain points present in our checkout through our enormous amounts of insights. Our aim was not just to create a slightly better checkout but, above all, a perfect and up-to-date one.
For this, we looked for inspiration from the best checkouts currently available. To find out which are objectively the best, we use the '︎︎︎ Baymard E-Commerce Checkout Usability Report,' published in 2021. Based on this evaluation, we were able to identify some checkouts that were good for us as a benchmark.

︎︎︎ Apple

• Very transparent and has a lot of information about the process
• Easy to understand
• Split desktop layout
• Native UI-Elements

︎︎︎ Wallmart

• No separate basket site or view
• Straight forward checkout flow
• An apparent visual style
• Well organized timeslot view

︎︎︎ Wayfair

• Quite a lean checkout
• A lot of detail towards the safety of payment and delivery
• Nudging

Overall we looked into ten sites to observe what might be an state-of-the-art Checkout. We have also broadened our outlook to include national competitors from the e-groceries sector.

Contextual Writing

The online food delivery processes are sometimes difficult to explain due to the complex business model. That's why our checkout needed to be more transparent and easier to understand.

That's why we paid particular attention to labeling our titles and interactive elements in a helpful way. The most important thing here is that we show users relevant information at the right moment.

Wording pairs from left to right

Headline: What's your billing
CTA: [icon] Save billing address

Headline: When do you want your groceries to be at your house?
CTA: [icon] Continue to payment method

Headline: How do you want to pay?
CTA: [icon] Go to order completion

Headline: Are you ready to complete your shopping?
CTA: [icon] Order now

Nudging

As User Experience Department, we were discussing Nudging quite a lot. Often we see sites like ‘booking.com’ as a negative example of how not to use Nudging because it feels like being fooled into something someone doesn't want.

But I concluded that Nudging could be helpful as long as we don't trick our users into something with made-up data. Therefore we decided to start testing some nudges in our checkout journey and concluded that they could be beneficial for our users and the business.

Timeslot – Redesign

As a example of our redesign of the checkout process the timeslot view is the most crucial and interesting. The new design follows simple principles:

1. We show a free timeslot when a user comes to the page.
   
2. The selection of delivery dates follows the choice of a single day.
   
3. We highlight the selected delivery date in a clear and easy-to-understand way.
   
   

These three simple principles were not considered in the previous design or only applied for the Desktop breakpoint. We validated the design in a UX test, and the users handled and explained it intuitively. Most test persons understood the design and described it as particularly suitable without being asked.

Timeslot – AB-Testing

With our vision, we create broader access to the necessity of the continuous further development of the checkout.
In the implementation, however, we act in small iterative steps. Therefore, it is necessary to validate our design adjustments in a quantitative test as well.

In our AB test, we want to test the basic assumption of a changed mobile layout compared to the previous design. Our goal in this test is to increase the conversion rate on mobile devices.

Conclusion

What I learned

The "Visions" approach and the holistic view unleashed a lot of desire and strength based on good and validated data. It was only through this large and complex work that we could significantly improve the quality of the checkout process.

We archive the most relevant progress with this methodology and that I would try to always use in a corporate environment.