Using Data to Inform Design
Oli Gardner dishes on reframing marketers' conception of data driven web page design.
If you've never had the opportunity to see Oli Gardner speak, find him in a city near you and do so. Not only does the co-founder of Unbounce deliver the most entertaining improv performance under pressure (his session was plagued with A/V issues), but he does so without compromising his unique perspective on page design and UX, and the role marketers play in the design space.
During his session at Unbounce's Call to Action (CTA) conference in Vancouver, Gardner dropped a number of hilarious hot takes — including quoting Colin Wright's famous “Art is like masturbation, design is like sex,” and bemoaning the broken promise of cinemagraphs and the their reality as GIF memes. But perhaps his most salient point came early in the session when Gardner reenacted an inner dialogue with himself, where he battled his analytical sensibilities over the practicality of one of his designs.
His left brain was obsessed with data and what others were doing in the market; so much so that his right brain (and his actually microphoned voice) screamed out, “F*** data! It really really should be data-informed design, not totally data-driven.”
It's a weird thing to say as a marketer to an audience of marketers, for sure. This industry has more data at its fingertips than ever before in history, but if all of the privacy concerns and data protection laws bubbling out of courtrooms around the world are any indication, businesses are at or near the point of having too much data. To Gardner's point, marketers may be becoming over reliant on this abundance of data in some regard, particularly when it comes to web design.
Gardner's major beef seemed to be with trends. Marketers obsess over getting the perfect landing pages by A/B testing various assets, forms, and images to see what is working, as should be the case. But when the assets and images are primarily being considered because they are trendy, that's when marketers can run into problems. Gardner cited the prevalence of fullscreen hero images and the the overuse of stock photos of laptops as examples of this.
In each case, marketers are running tests on assets that may not be the right choice from the outset. Fullscreen hero images on webpages, for instance, can unintentionally conceal the nature of a company's product, or event the product itself. Gardner underscored this point with an example of a bike bag company in Vancouver.
The company was using a fullscreen image of a man in a business suit on a bike. There was almost no text on the screen. Through a small survey of users, Gardner found that people weren't sure what the company did, or what its actual product were. After making a slight change to the site's CSS in Google's Developer mode, Gardner was able to scale the image down enough so that the site's navigation was more clear. A small change, but it generated the outcome Gardner was after, in that the people in his survey pool knew now that the company was in the business of selling bike bags.
Gardner drove the point further with an example of a company using a fullscreen image with text overlain. Sure, users could see what the company did more easily, but the text was black on blue, with an odd black, bezeled drop shadow. Gardner asked colleagues at his office to read the text, and found that it was taking about 5.5 seconds to get through the brief copy for this small sample. So, he again went into the site's CSS and placed the text around a simple white background. He also used a tool called readable.io to further optimize the copy, driving that time-to-read down to just over four seconds.
Overall, the session encouraged marketers to develop a culture of design optimization. Use tools like readable.io or Hotjar (for recording user behavior) to determine where and how to apply optimizations. Use the data from these efforts to evolve a design.
Unbounce covered DMN's expenses to attend the Call to Action conference.