Applying Data-Driven Design to Marketing 3: Design with Data

Danny thumbnail

In the final instalment in my Data-Driven Design series, I’m looking at how you can use data to better inform your design process. What’s more, I’ll show how you can improve your user experience and interface (UX & UI) design processes through rigorously testing your design variants.

Article by , Posted 6 months ago

Last time, I showed how important it is to know how to handle your data so you can make the most of it, with a focus on the transformative role Google Tag Manager can play in helping you manage how you collect data. But over the blog series, I’ve shown:

  • How big data is harnessed by the largest companies to tailor their products and platforms, but how the key to success could be different: it could be to use small data instead.
  • Why it’s important to first understand your data and what you want to gleam from it. In doing so, you can then coordinate and implement a data strategy and track your users’ journeys to improve your platform’s UX.

Defining and tracking user journeys can help you identify the key areas that require a UX overhaul to improve your conversion rate.

But in this, the last article in our current series, I’m going to look at how you can use data gathered from A/B testing to develop your UX design processes even further.

BEAUTY VS ACCESSIBILITY: DESIGN WITH DATA

For a lot of people, aesthetics is the most important feature of a design. But what good is a pretty platform if your users can’t interact with it?

Alternatively, what good is a highly accessible platform if it doesn’t look inviting? 

The trick to creating an informative and accessible platform that still looks great is all about balance. Finding that balance is where data comes in. It allows you to easily build user-friendly platforms from the ground up, rather than trying to force an aesthetically pleasing platform to become user friendly after the fact.

A great low-level example of a company trying to achieve this kind of balance comes from Songkick, a company that allows users to track their favourite artists and buy fairly priced tickets.

The question they were hoping to answer was how long their artist name labels should be in desktop and mobile app screens where space is at a high premium and every pixel counts. If a band’s name is too long on a particular breakpoint, the design can look sloppy and unattended.

To inform how they displayed artist names, they looked at:

  • The string lengths the UI must support; what the shortest and longest artist names were
  • The name distribution frequency; whether name lengths were equally spread or clustered around a specific range

To do this, they used a simple SQL SELECT query, which allows you to quickly fetch data from a database and display it in a results table.

Finding the name length 'sweet spot'

The majority of artist names on Songkick feature less than 30 characters, so this is where the 'sweet spot' is. Image credit: Songkick.

They discovered that 99% of their 25,000 most popular artists have a name of less than 30 characters. 

With this information to hand, Songkick identified where the design would be most stressed, or where the design might struggle to display a name without distorting the layout. They also noted where the edge cases regarding name length should fall. Eventually, they settled on a design that allowed them to employ margins that allowed artist names of more than three characters to fit within just two lines.

The artist with the longest name on Songkick stands at a staggering 61 characters. But because Songkick used data to inform their design processes, the name The World Is a Beautiful Place & I Am No Longer Afraid to Die (a misnomer, surely?) fits easily onto just two lines on desktop. On mobile, the design is stressed even more by particularly long names - as in the example below - but Songkick settled on a design that employed ellipses to bring unwieldy elements under control. 

The mobile design under stress

The length of some artist's names would stress the design - Songkick had to find a way around this. Image credit: Songkick.

This is a proactive approach to design that pays off massively in the long run, but improvements can always be made. Songkick, like any innovative digital company, never stops trying to improve their user experience and interface. As Churchill rightly pointed out, ‘To improve is to change, so to be perfect is to have changed often.’

A/B TESTING: DESIGN WITH DATA

While you can collect and use data to inform your design from the outset, before any aesthetic decision is made, you can also use data to improve your design once it’s live. One of the most useful tools we have to help accomplish this is A/B testing.

An A/B test is a simple test that pits two targeted variations of a design against each other to see which one performs better. You can test almost any design element, including the size of a search bar, the position of a button – you name it. The victor is determined by how quickly and easily a user completes an action. You can learn more about A/B testing and a host of other UX terms in our app, UX Companion.

For our purpose here though, we need only point out that to conduct a successful A/B test, you need:

  • A clear purpose
  • A specific audience
  • A comprehensive data strategy 

But how do you choose which elements to test using the A/B method?

That’s where qualitative research is useful. More often than not, actually engaging with and interviewing your users can provide unique insights about what issues your platform faces.

For instance, when we conducted qualitative research on behalf of BOC – the UK’s largest B2B industrial gas supplier – we discovered that users were complaining about how difficult it was to find products. Likewise, the customer service team reported that many customers phoned the company because the website was too difficult to navigate.

In our A/B test, we extended the length of the search bar and asked our test subjects to interact with the website. They were shown either the original design as a control or the variant. Afterwards, we recommended that BOC extend their search bar.

The outcome? We achieved a 4.2% increase in conversions for BOC. Overall, while we’ve worked with this client they have seen a monumental increase in revenue of 105.4%.

FINAL THOUGHTS

As you can see, there simply isn’t room to ignore data in the modern world. Its potential to provide revolutionary insights and transform the way you engage with users is too massive.

In this series, we’ve shown just how crucial data is when designing platforms. We’ve looked at how the big players like Netflix and Tesla have used data to drive their services forward, and discussed how you can plot your data strategy to gather useful data most effectively using Google Tag Manager.

But we’ve also shown that data is only half the story. That’s because, as Susan Etlinger said, ‘data doesn’t create the meaning – we do.’ Qualitative research is therefore just as essential as quantitative. It shows us why people behave the way they do, rather than just showing us patterns; qualitative data gives us perspective.

The main things to take home are:

  • A process of sourcing, sorting, analysing and generating insights is helpful
  • Data is often biased or overwhelming; focus on behaviour and small data instead
  • The best teams use creative, qualitative and quantitative data approaches
  • At Cyber-Duck, we pair our analysts with creatives to garner different data perspectives

Just, one last thing before we go: be careful how you will store and process data. New European data protection laws (known as GDPR) will come into force in May 2018, and if you suffer a data breach past this date you could face hefty fines of 4% of turnover.

Let's work together

Our interdisciplinary team can work as an extension of yours - we would love to hear your ideas.

Discuss a project