Using UX to create a better checkout experience

John Campbell 👨‍💻
7 min readSep 8, 2017

This week I took part in one of Googles first UX design sprints. The workshop centred around the idea of improving checkout experiences for online shoppers. Before the workshop had started we’d discussed some vital points:

What did this mean exactly for our business, our website, and overall user experience ?

Talking to various people from our business and going from data, we had gathered some insights that allowed us to understand our users so we were able to focus on the right areas to address improving our own checkout process. I was there to see things from the designers point of view analysing the impact UX design can have in influencing change in customer behaviours.

As we began the day we had signed in, collected our name badges and waited to be brought up to the room we would be conducting our design sprint in. Googles London office offered up a beautiful space, in terms of a creative working environment. Google is well known for its imaginative, forward thinking approach when it comes to the design of its work space environments and it definitely exceeded my expectations upon entering.

Many of the meeting rooms had references to pop culture, The room that we had been working in was named Ziggy Stardust and there was another one called Major Tom. This had been as a sort of tribute to David Bowie who had died during the building of the office.

It was time to get started. The day began with some introductions from the members of google conducting the design sprint introducing the concept and explaining how the process works. So what is a design sprint ?

A design sprint is a five-phase framework that helps answer critical business questions through rapid prototyping and user testing. Sprints let your team reach clearly defined goals and deliverables and gain key learning, quickly. The process helps spark innovation, encourage user-centred thinking, align your team under a shared vision, and get you to product launch faster.

In short a design sprint allows us to make data driven decisions by structuring challenges and having the end in mind.

Design Sprint Framework

By using a design sprint it means that the product doesn’t have to go through all the stages to learn about the opportunities and gather feedback.

We started with a series of lightning talks that highlighted some interesting facts. Research had shown that anxiety levels for a poor mobile experience were the same as watching a horror movie alone. When I’d actually thought about this bit of research I’d related to a poor mobile experience I had trying to order tickets for a gig through a poor form which led to me chucking my phone at the couch and giving up completely.

There’s no excuses for poor mobile experiences.

Especially when the biggest majority of online consumers are now shopping through mobile.

A few more lightning talks were delivered throughout the day which helped highlight the impact important design decisions have in providing the best user experience to customers. Many of these choices were about adding value for the user, reducing the amount of taps to final checkout, and making use of information the user might already have stored on their browser.

In terms of checkout design we want to make it fast and painless. 68% of users will leave if a process is too lengthy. By reducing distractions and making the checkout process more intuitive this can lead to a greater conversion rate. By considering each element of the design through the customers point of view we can make things as fluid as possible to provide a great mobile experience. 92% of customers will drop a purchase if they can’t remember their login, so having guest checkouts and other data entry options such as signing in through social media accounts can help ensure a improved checkout flow. We then moved on to gather all of our ideas for improvement of our own checkout process and framed these insights in to HMW’s (How might we questions).

The importance of A/B testing was highlighted after this first exercise in the design sprint. A/B testing involves comparing two versions of a web page to see which one performs better. You compare two web pages by showing the two variants to a similar target audience at the same time. The one that gives a better conversion rate wins.

A/B testing is an extremely important method of research that we already conduct as a business but attending the sprint underpinned how critical it is. Some of the most successful online services successfully use A/B testing to help improve their product over time and increase revenue by providing users with increased value. Booking.com run around 1000 A/B Tests every day. If only 10 of these provide significant results then the returns would be rewarding in terms of conversion.

One of the UX designers at Gucci had also helped underpin this idea. They had noticed that Japanese customers had continuously being scrolling up and down the checkout looking for a progress bar to continue to the next stage where stereo typically in western culture we are accustomed to scrolling to the bottom of a form to complete it. They commented on the fact that what usually works in Japan will work everywhere and upon conducting more tests after the progress bar was changed they noticed that there was a higher completion in their checkout conversion. This goes to show how the progress bar is a key element when it comes to checkout completion. An easy example to compare this effect to would be a coffee loyalty card. By starting with a few stamps already marked it gives the customer more motivation to complete the process. A simple but effective design consideration.

Our Design Schprint

After completing out HMW’s we began to affinity map these suggestions into categories. We had been challenged to create a basic prototype in 45 minutes to enhance our checkout procedure for customers taking on board what we had learned throughout the day. After categorising our questions we voted on a few areas to focus on for the day.

We had two areas of focus in identifying our design opportunities to make a difference. We sought out to promote engagement by reducing distractions and the amount of form fields. After deciding on these focus areas we began to build a basic prototype with our end goals clearly in mind.

After creating our mini prototype we finished off the day by networking with the people at google and talk to other businesses about how the day had went. It was interesting to see the pain points other companies had picked up and addressed through their prototype checkout design solutions. This is the first time Google has run a workshop like this and as a designer I would have to say I have taken on some valuable learning through the process.

Usually a design sprint is held over 5 days, However this day long session helped us focus on the ideals behind choosing a focus area for development. It also showed us how to conduct our own design sprint and how this can greatly aid our online development. There were many take away points from the day spent at Google. By far the most important was that good user experiences sell themselves. Beautiful and intuitive user experiences are at the heart of any successful service.

I greatly enjoyed my time at Google and I’ve returned to work feeling more equipped to contribute towards our own checkout development given what I’ve learned. The insights we took on can help move our business further forward in providing our customers a more efficient and enjoyable experience when it comes to the checkout completion. The details are not the details. They make the design.

The small things make up the bigger picture so every detail is crucial.

--

--

John Campbell 👨‍💻

🏴󠁧󠁢󠁳󠁣󠁴󠁿. UI Designer 📍🇳🇱. Lover of exploring, creating, communicating and learning at every opportunity. ☕️