DX Best Practices

Homepage

First impressions count.

Your homepage is often the largest entryway to your brand offering, and so has the potential to make or break the customer experience. As well as letting users begin navigating and exploring your products, it’s your biggest opportunity to create a lasting impression of who your brand is and what you stand for.

When done well, a homepage can be a revenue-generating machine, helping customers quickly and efficiently find your most important campaigns or messages within seconds. Done badly, however, and it can turn potential customers away in a heartbeat.

Here are 3 examples of some stunning home page designs - and why.

Above the fold

Insight
Encourage users to interact with the full page by utilising a cut-off design.

Solution
Place elements along the fold line, to give the appearance of more content. Users will naturally begin to scroll.

Above the fold

Insight
Optimising “Above the fold” with a clear, easy to navigate layout.

Solution
Ensure all necessary elements are present above the fold. Underlined links and icons help important sections to stand out. As users scroll, they’ll also be presented with all relevant links to products, help and support. (Also a win for SEO).

Signposting

Insight
Long homepages with redundant content, non-sticky navigation and CTAs that get lost amongst other banners and elements.

Solution
Tesla shows clear navigation and CTAs that remain constantly sticky, with full focus on the main products.

Navigation

No one likes getting lost.

Navigation constitutes the areas which help users move, or navigate from page to page in their customer journeys (also known as user flows). An optimized user experience should include easy site navigation tools, the ones that guide your visitors to what they’re looking for or where they need to arrive at. Help yourself by helping your user easily navigate through your website.

Check out these examples of our favourite navigation.

Booking funnel

Insight
No clear menu or signposting present on the homepage and beyond.

Solution
As KAYAK has show here, Always present clear menu items and search functionality, so users can always find their way and/or new gateways.

Supporting images

Insight
Mega menus overloaded with text links only.

Solution
Draw the users eyes to links using accompanying product images.

Clear signposting

Insight
No clear or relevant links on the homepage that guide users to valuable pages.

Solution
Products are clearly listed with different links. In this example, users can both ‘Get a quote’, ‘retrieve’ and ‘make a claim’. Users don’t need to rely on menu or footer to find these important pages/funnels.

Editorial

Shop the look

The editorial page is more than just a place to feature your latest collection - it’s a wonderful opportunity to encourage conversion and upsell, and help build trust in your brand without coming across as too “hard sell”.

You’ve already done the work to create these beautiful images, and you just need a few additional steps, such as adding clear links to the featured products, or providing styling tips to inspire and educate shoppers.

Let’s see how these brands are styling their editorial pages.

Blog "Shop The Look".

Insight
So often we see images of models wearing a particular brand of clothing, but no links to allow purchase

Solution
Utilise ‘Shop the look’ functionality, whereby users can have access to the items modelled.

Forms

No one enjoys filling in a form - make it painless.

Online forms are a crucial component for every business, serving as a catalyst for customer engagement and revenue generation. When properly executed, they facilitate seamless and swift interactions, allowing customers to effortlessly engage with your business and move forward in their customer journey.

On the other hand, poorly designed forms can lead to customer dissatisfaction, causing potential loss of customers and invaluable data within mere seconds.

Here are some examples of great forms.

Visual context

N26_logo

Insight
No context or overview to highlight how many steps are to be completed.

Solution
On the N26 site, before users begin to complete the form, they can see the overall steps that are required to obtain a bank account.

Staying focused

Insight
Long, convoluted checkout funnels with numerous steps and pages.

Solution
To avoid overwhelming users on a one-page checkout, consider collapsing and expanding each section as they go along, using clear CTAs within each section.

Layout

Insight
Unfriendly forms with impersonal questions, and no clear actions.

Solution
A clean, intuitive form that’s conversational rather than demanding. Nicely spaced out with clear prompts and radio buttons.

Product Listings Page

Make your product listing pages work harder.

Product listing pages (PLP) can have a huge impact on your customer journey. When done well, an optimized PLP can increase conversions by guiding visitors through the sales process as quickly and efficiently as possible. By allowing users to narrow down their search scope and explore relevant products, you’re also helping to build a positive online experience with your brand.

Naturally, the smoother you can make their browsing process, the more likely your visitors are to convert—and then return in the future.

Check out these great PLPs.

Product Card Cross sell

Insight
Users that spend a long time scrolling on the PLP actually convert less. How can we direct them to content they are interested in?

Solution
As Dr Marten’s has done, provide cross sell product cards within the product listing page that redirect users to a) sales and promotions on the site b) similar items or items they may be looking for instead.

Compare

Currys_Logo

Insight
For purchases that require extensive research and review of the specifications prior to buying, avoid overloading the shopping cart and the opening of multiple tabs.

Solution
A simple compare function that allows users to add up to 4 products. Each product specification will be placed into a comparable table, allowing the user to cross-reference USPs.

Available sizes

Insight
When browsing the PLP, there is no exposure on which sizes are available.

Solution
As a user browses the listings, on hover displays the available sizes per item. Additionally, users can also add the item to their wishlist.

Product Details Page

It’s all in the details.

Product Detail Pages (PDP) contain crucial information and specifications about your products, which can help instill confidence in your customers and encourage them to make a purchase.

When done well, an optimized PDP can help increase conversions and help minimize the need for returns or refunds. The more information you can provide on your PDP during your customer's research phase, the more likely you are to convince customers to shop with you—and then return in the future.

Check out how these brands have nailed their PDPs.

Size & Colours exposure

Insight
When browsing a product on a PDP, a user wishes to see it in different colours, so must scroll down to click, then scroll back up to view. As well as this, they also want to know if this product has their size or not.

Solution
Full utilisation of ‘above the fold’ - all key elements are present, allowing users to switch between different colours, as well as have full transparency of sizes available.

Relevant Cross-sells

Insight
Not providing relevant cross-sells in the user journey. Mainly keeping it simple with ‘You may also like’ and/or ‘Recently viewed’. Not adding enough inspiration or guidance on the PDP.

Solution
As a user is browsing a particular item, make sure to include ‘Similar items’. Items that are similar in style and keep the user curious. Combine with ‘save to favourites’ / ‘add to wishlist’, for optimal browsing experience.

In-page navigation

Bose_logo

Insight
For purchases that require extensive research, looking at specs, reviews and FAQs, these pages are typically very long. This can cause user fatigue and lead to exits.

Solution
Implement an in-page (sub) navigation, that allows users to to jump between these different sections via anchor links.

Checkout

Time to seal the deal.

This is it. You’ve impressed users with your home page, successful helped navigate them to a product listing page, and then got them to click into a product display page. It was so well done, they’ve added the item to cart and are now ready to check out.

At this point, it’s conversion or bust. Ensuring that checkout is seamless is the crucial last step. The checkout flow should give your user confidence to keep moving through each step. It’s crucial to create a flow that’s relevant, informative, and most importantly, easy to navigate.

Check out (no pun intended) what these brands are doing to bring the journey across the finish line.

Clear checkout gateways

Insight
‘Continue to checkout’ - a single CTA that takes users to a next step, where they can then choose to either register or login. New users must then fill out a long form before eventually purchasing. This is too long.

Solution
Give users options early on. On the cart page. They can save time quickly by opting for Guest, Member or Paypal. Once checkout is complete, guests then have the option to ‘create an account’ and become a ‘Member’.

Review

Insight
Users may want to review or edit items during the checkout process but bringing them out of the flow & back to the PDP decreases conversion.

Solution
Like Dune, keep users in the checkout flow by utilizing a modal or pop out to review or edit the items and allow them to update directly and return to checkout.

Out of stock items

Insight
Users are able to see how many of each product are left, to encourage users to purchase quickly before the stock runs out.

Solution
Provides more context to users that may influence their decision-making when it comes to leaving items in their cart for later purchase.

Auto suggestion address

Insight
When attempting to complete a form in the checkout, users lose interest or grow impatient with multiple form fields. Specifically the address section.

Solution
Improve efficiency when completing forms, by auto completing addresses by following this Taskrabbit example. A user can start typing their address or add post code, to then have the full address fill relevant fields.

DX Best Practices

Learn More