The power of data-led ecommerce design

By Swanky · 11 min read

The power of data-led ecommerce design

If you invest hard-earned money on an ecommerce site, then you want to see a strong return on investment, a great conversion rate and an even better retention rate. You need your ecommerce design to not only look stunning but deliver an exceptional customer experience that will lead to greater sales. Mark Halliwell, Lead Designer at leading international Shopify Plus agency Swanky, has joined us to talk about the importance of having a data-led approach to your ecommerce design. Discover his advice on how to leverage your customer data to design exceptional ecommerce experiences for your Shopify Plus store.

8 steps to exceptional ecommerce design

1. Defining your ecommerce design strategy

As you set out to design your store, you need to consider what your commercial goals are and what data you want to collect, in order to define your design strategy. Without reliable commercial data, your design team will be flying blind. Effective ecommerce design needs to be guided by a deep understanding of your product/service, audiences, competitors and customer data. The three basic metrics all merchants generally measure are: return on investment (ROI), conversion rate and retention. However, a well-rounded data-led strategy goes beyond these and studies:

  • Audience demographics
  • Brand perception
  • Market positioning
  • Acquisition channels
  • Onsite buyer behaviour

There is a wealth of tools available to learn more about your customer behaviour, from analytics to heat mapping and surveys. You can discover more about gathering data on your customers in Swanky’s guide to the ecommerce discovery process.

One of the most important elements of data-led ecommerce design is testing. Without testing each element of your design and studying the impact it has on your key metrics, you could miss out on big opportunities within your ecommerce experience. We’ll talk more on testing later.

2. Understanding your audience

The who, what, where, when and why of your audience underpins the entire ecommerce design process and is also key to understanding your perceived brand value. Only by understanding how your customers interact with your brand and your products can you identify how to optimise the user experience (UX) and user interface (UI) of your site to influence buying behaviour.

  1. Who are your current audiences?

    Different audience demographics will engage differently with the visual styles and information presented to them. You’ll want to have a clear picture of who your audience is, to inform your style. Younger generations tend to respond better to a modern style, for example, whilst older audiences often prefer more traditional visual elements and page layouts.

    Age, gender, culture, and interests will all impact the way your customers interact with your site. When Swanky and Webtrends Optimize client Needle & Thread came to launch their new Shopify Plus site, Swanky’s design team wanted an elegant UI design that would resonate with the audience of this haute-couture fashion brand. Our designers modelled the experience on classy fashion editorials, blending elegant serif titles with subtle calls to action, gorgeous lifestyle imagery and highly browsable lookbooks.

    A large proportion of Needle & Threads' audience comes from the Middle East, so Swanky designed a separate storefront dedicated to this audience. This enabled them to personalise the customer experience for this region, since Arabic audiences read and consume content from right to left, rather than left to right. What platforms do these audiences engage with?

  2. What platforms do these audiences engage with?

    The platforms that your audience are used to engaging with will determine their expectations of what content they want from your store. TikTok, Instagram and YouTube Shorts offer fast-moving content, so users will be expecting content that is easy to consume rapidly, with a focus on people and video rather than traditionally branded graphics and advertising. In contrast, Facebook users would be more likely to expect clearer distinction between what is an ad and what is not.

  3. Is your current audience your ideal audience? What are the differences?

    It could be that your current site is not attracting a lucrative segment of the market at the moment. By having in mind your target customer, not just your current audience, you can shape your UX and UI design to attract more of your target audience.

3. Branding and market positioning

Your branding has the power to impact or limit the success of your ecommerce store. Increasing your perceived brand value will drive higher conversion rates and improve other key metrics.

  1. How do customers feel about your product/service?

    Is your brand currently viewed as purely functional, or are you able to connect with your customers on an emotional level? Your goal is to move your brand into a position where your customers perceive a higher value over any of your competitors and want to recommend you to others.

    The UI design of your store controls the visual perception of your brand by your customers. Begin with investigating how the visual elements and language used currently impact the ecommerce experience of your customers.

  2. Is there a gap in the market to position your product/service?

    Who are your competitors? Look at the design choices made by your competitors in terms of UX/UI, layout, colours etc. This will not only help you understand the market trends, but also enable you to distinguish your offering from those around you. I always ask, ‘Are there problems your competitors aren’t solving that you can?’.

4. Crafting the customer journey for conversion

Once you have a clear understanding of your brand strategy, it’s time to look at the UX of your ecommerce site—where great conversion rates really begin.

By defining the customer journey, you are tailoring the customer’s onsite experience to increase conversions and drive return-on-investment.

Knowing how your customers typically move through your store will give you a better idea of what information they will require at different stages of their journey, and at what point they might be ready to buy. For example, Swanky’s conversion rate optimisation (CRO) team found that the landing pages for one client were not offering the information about subscriptions that users expected when coming to these pages via paid ads. The team therefore experimented with the addition of relevant USPs to the landing page, increasing conversion from paid ads by 33%.

Use wireframes to set out the layout of information, understand its role in the customer journey and streamline unnecessary elements. You can then start to establish information hierarchy through visual sizing and colour, etc. Your goal is to reduce cognitive load and make the customer journey as seamless as possible. This generally results in greatly improved conversion rates and steep decreases in drop-off.

When designing a new Shopify Plus store for baby products retailer PishPoshBaby, Swanky’s design team did a full audience analysis, mapped existing user journeys, and reviewed competitor websites to establish benchmark features and expectations. It turned out that most users came to the site via a mobile device and had done a lot of product research prior to arriving on site. Therefore, as well as a mobile-first design, an advanced search feature was important to help them quickly navigate to the product they wanted. PishPoshBaby also pride themselves on their in-store customer service, so the team chose to leverage video content and educational information across the site to help advise customers on which product would best suit their needs.

Following the launch of the site, conversion rates improved by 68% and average order value (AOV) has increased by 41%. What's more, AOV doubled among mobile users, and conversion rate increased by 70% on mobile devices.

5. Data-led product page design

Your product pages are the moment where you have the chance to convert your customer to make a purchase. You want to ensure your product pages answer customers’ need for information on the product, without overwhelming them.

Consider that whilst users may have navigated from the homepage or collection pages, there will be a large number who land specifically on product pages. These users will lack the information provided in other areas of your site. Techniques such as adding accordions for additional information or emphasising USPs higher up the page can play key part in encouraging your customer to click the add to cart button.

  1. How would/do audiences interact with your product or service?

    Consider how your users interact with your product. Let’s say you know that your customers need to understand sizing before purchasing your t-shirt. You might therefore want to include a size-guide above the fold so they can easily locate this information.

  2. What are the key selling points?

    Including your USPs on your product page will help to increase customer confidence before purchase. Dog food brand Forthglade helps their customers achieve a primary goal - feeding their dogs. However, in reality, they do so much more. They provide a natural, nutritious meal that will allow their customers’ dogs to be as healthy as they can be. And they offer education and information to pet owners to help them care for their pets. Emphasising all these additional benefits helps to elevate their brand from purely functional to one that will change the lives of their customers’ pets.

  3. Choice of imagery

    You want to showcase your products with high-quality product imagery. Balance aspirational lifestyle photography, which allows the customer to visualise themselves with the product, alongside high-quality product photography that is crisp, clear, and consistently styled to communicate credibility and trustworthiness. Swanky talks in more detail about product photography in our guide to best practice for an online jewellery store.

6. Device specific design/channels

As customers increasingly move to mobile devices for their shopping, you would be wise to take a mobile-first approach to your store design, especially if your audience is a younger demographic.

Whilst Shopify Plus designs are always responsive, having mobile users in mind when plotting your customer journey will ensure the visual and functional experience works perfectly. You’ll want to consider which content you choose to include above the fold, and to reduce the amount of scrolling needed. We tend to reduce information for mobile users, compact the design as much as possible and include functions like accordions, to provide additional information if needed.

Conversely, for your desktop users, you’ll be able to include plenty of information, which can reassure more hesitant buyers. It is also important to understand user intent. For example, users may be browsing products on mobile devices, but be planning to make a purchase on desktop later. This would shape your approach to device specific design. On a collection page, for example, you might want to show a greater range of products on mobile to allow easier browsing.

7. Creating an emotional connection

Design can be used to create an emotional bond between the brand and consumer, to boost brand loyalty.

The style, colours, and visual elements of your site set the tone for your customers’ experience of your brand. You can use iconography, imagery, video and language to help the customer connect with your brand story on a deeper level. GIFs and videos are particularly powerful as they convey a lot more information in a short amount of time than text or image—but file size and page speed should be considered too.

Personalisation

As far as possible, you should aim to personalise your on-site experience using the customer data that you have. Product recommendations, promotions, and even imagery can be tailored to your customers as you learn more about them.

Swanky client Wilkinson Sword have two different brands, targeting both male and female audiences, so Swanky helped them to personalise their on-site customer experience according to gender. The colour scheme and imagery on each version of the site reflect the target audience in order to appeal to the customer on a more individual basis.

Calls to action (CTAs)

You’ll also need to balance the use of visual elements alongside clear CTAs that encourage the user to make a purchase. The language that you use throughout your site and particularly in your CTAs can make the difference between a conversion or not. Should your CTA say, “Buy Now” or “Add to Cart”?

8. Continue to improve your site through CRO

The work of data-led design is not finished when your new ecommerce site has launched. In fact, it has only just begun.

No matter how confident you are in your customer journey, the only way to truly be sure that your design is performing to its highest potential is to continue to analyse your customer data. Once your new site is live, you can observe how customers interact with the site and gather data on which specific areas of your ecommerce site could be optimised.

CRO is the process of implementing ongoing improvements to your store that will improve your conversion rates or other key metrics. One of the best ways to gain valuable feedback on your site performance is through testing. Swanky’s CRO team carry out A/B testing with tools such as A/B testing, to test a new variant of a particular page, by serving half of visitors with the original version, and half with the variant. This approach allows you to measure the results of every change you make to your site and will also open up new ideas for future improvements.

This is the true difference between a great, and a truly exceptional ecommerce experience for customers. An ecommerce site that improves and adapts over time to meet the needs of returning and new customers alike will start to outperform those who stay static.

This means focusing on providing a great experience first-time around, but also allowing room for your customers to highlight the opportunities via data, which you can use to improve the experience and further increase return on investment.

Optimise your store with data-led ecommerce design

Are you looking to optimise your ecommerce design? The design team at Swanky have many years’ experiences designing exceptional ecommerce experiences that are tailor-made to our clients’ audiences. We partner with Webtrends Optimize to optimise our ecommerce design through A/B testing and personalisation.