Designing your website’s customer journey

Graphic showing the onpage customer journey; from product page to basket to checkout to payment information

Everyone is on a journey these days. The use of the word “journey” has journeyed into the realm of overuse. You may be a reality tv contestant on a journey to your 15 minutes of fame or, like me, describe the fluctuations in your waist size as a “fitness journey”. The term “customer journey” may too be on the precipice of overuse in marketing circles but, ultimately, applying best practice to your website’s customer journey may send you on the way to being much more successful online.

So what is a customer journey and why is it important to web design?

Every consumer is different and there are many varying motivations and routes they can take when purchasing your product. To put it simply, a customer journey details the stages a consumer makes on the path to purchasing your product (or donating to your charity or reading more of your articles).

Customer A might first hear about your product from a Facebook Ad while drunk. They click-through, purchase and 3 days later a parcel arrives that they have no recollection of buying.

Customer B may have first heard about your product through a Facebook Ad too. She then proceeds to read a dozen reviews, half a dozen case studies, watch 4 YouTube tutorials and ask a series of questions to your customer service team. She then buys a week later.

These customer journeys are not the same but the outcomes are.

In fact, no two customer journeys are the same: so how do we map a typical customer journey and make it as frictionless as possible?

Here are three brief case studies from prominent brands: one for e-commerce, one for booking and one for content.

Screenshot of Specsavers 'Book An Eye Test' user journey

Case study 2: Get your eyes seen at Specsavers

If you’re not selling directly on your website, then chances are you’re taking appointments. Specsavers, of course, does both but we were particularly impressed by their customer journey for booking an eye test.

Booking an eye test is prominent on the website and reflects one of the two main tasks carried out by visitors to the website: book an appointment or buy glasses.

The user can then search by location, by either typing the location or by letting Specsavers know your browser’s location, and are given a list of their closest shops.

A simple card view of possible appointment types, sorted by popularity, is presented to the user who then picks their time from a list of available appointments.

The user can only pick from appointments that are available. The user is not able to enter a time and check for appointments close to that time. The appointment availability check was done in advance of the user selecting anything. By only offering what is available, potential friction is reduced. This is similar to when e-commerce sites deprioritize and visually indicate items that are out of stock – giving the visitor less opportunity to get upset.

The user must then provide their contact details and confirm the appointment. While the number of details that Specsavers requires leans on the excessive side, there is good reason for this.

  1. Specsavers can check the user’s eligibility for a free eye test.
  2. By taking the user’s contact details the user is less likely to abandon the appointment if the threat of an angry phone call looms.

At this point, Specsavers are creating the sort of friction which benefits their business.

Once the appointment is confirmed the user is then prompted to add the event to their calendar. If reminded of an event by their phone, the user is more likely to attend. This also saves the user any time required to manually update an appointment.

This is a particularly good customer journey because at no point was any distracting information presented to the user.

Animated GIF showing easy sliding feature of the Outline article navigation

Case study 3: Read More on The Outline

The Outline is a design-driven culture publication started in late-2016. Unlike the majority of content websites, the Outline focuses less on a New York Times or Guardian style grid-driven homepage and more on mobile first, immersive and highly swipeable content. 

The Outline is a website who expects its users to interact with it as if it was Snapchat. While swiping on the web is still uncommon the user is prompted that they can swipe on first visit, while dot navigation indicates swipability to returning visitors.

In the .gif above we see how easy it is to swipe between articles on the Outline. Is the current article not interesting to you? Try another! This ties heavily into the notion, originating with the ethical designer Tristan Harris, that your smartphone is “the slot machine in your pocket”. Unlike the randomness of social media, The Outline is a publication with an ethos and a perspective: if you share that ethos swipe here and there’s a good chance you’ll find something you like.

Every few swipes on the Outline brings the user to an advert. Not just any old advert though: an advert that is native to the website and is formatted like an article. While the advertising is clearly marked as such, the aesthetic of the ad page is more likely to compel people who like the design choices of The Outline to pay attention to it.

So, if you want users to read more or to read more adverts then the solution is simple: immerse them in the contentmake finding new content super easy and make your adverts just as attractive as your feature stories. Perhaps this is not that simple after all.

Some best practices

53% of visits are abandoned if a mobile site takes longer than 3 seconds to load

Fast Page-Loading Times

This one is easy to overlook. The design of your website is paramount and everyone has a good connection these days anyway? Well, not according to Google. As many as 53% of users will leave a website if it doesn’t load in 3 seconds on mobile! We live in the age of the app, where content is often delivered when the customer isn’t paying attention so it seems instantaneous when they are paying attention. This means that the good old web suffers from the shortened attention span of the average mobile user. By delivering your website even more quickly to your user (and by saving them on their data bills too) you can guarantee a better chance of turning your website visitors into paying customers.

Think of this from the user’s perspective. I want to buy your product now and my phone signal is iffy at best. Can I do it? Will you let me?


Clear Calls-to-Action

Button design has been on a journey but the old wisdom still remains true: the more obvious a button is, the more likely it is to be clicked!

I’m a big believer that the first call-to-action on your website should reflect the ultimate goal of the user journey. Got a service? Sign Up. An App? Download App. Generating leads? Get in Touch.

When there is additional complexity, for example in e-commerce, then emphasis on seasonal goods or sale items may take priority on the homepage. If someone wants something from a category or a particular item type then chances are that at some point they’ve used search. For most websites, that will involve Google Search. For Amazon and Ebay, search often occurs natively on the platform.

Top Tip: Clear URL structures and categorization are super helpful to users not just on-page but when they are finding your website through search engines too.


Checkout Design

I want to buy your product but I have 5 minutes until I have to leave the house. Your website design and pagespeed will absolutely have an influence on whether I can do this but your checkout design creates potentially the biggest piece of friction in the process.

The team at Spiralyze have written a fantastic (28-part) series on checkout best practices that I recommend you read but I will highlight a few important points here.


Reduce Distractions

Once someone is at the checkout stage, allow them to focus on the process. Keeping your site’s standard navigation in place might just cause someone to stop paying for your product and have them read a blog instead. Having a coupon code section that is very visible will cause your customer to leave your page and research if they can find a coupon code elsewhere!


No Unnecessary Form Fields

Is your client a Mr.? A Mrs? A Sir? A Dr? A Viscountess? A Captain? Does any of this matter? While inclusive design is a big trend – the overarching theme of not asking unnecessary questions is important for optimising the customer journey. Every time you ask a question you are creating a point of friction that might just stop the buying process.

Mailchimp pre-send animation

Constantly reassure the customer

Money back guarantees. Easy returns. Emphasise the security of the till. These are all ways to reassure the customer just as they’re about to hit the “confirm purchase” button. Understand that regardless of testimonials or reviews, someone who is a brand new customer to your website will feel some degree of anxiety about confirming a purchase. Do your best to mitigate this.

On the other hand, Mailchimp (the email marketing service) has a phenomenal way of creating anxiety around a conversion point. By animating a sweaty, shaky finger over a big red button Mailchimp emphasises that there is no way to stop their mailer after this point and you better be sure that what you’re sending is correct.

Screenshot of Casper delivery options. Highlighting transparent pricing and process.

Transparent Delivery Prices & Process

Deliveries are an enormous source of anxiety for users. Be explicit when listing your delivery options. Being stung late in the checkout process by a heavy delivery fee or an ambiguous shipping window can put customers off for good. Driver tracking, like on Amazon Prime Now or via DPD, helps reassure customers that they know exactly where their product is. Conversely, online junk bazaar famously ships its low cost and dubious quality items in 24-30 days, deliberately de-emphasising the importance of the product (if you need something urgently, you won’t get it from Wish).


The principles of creating a good user journey are, at their heart, simple:

Like this article?