Why We Should Champion Content-led Web Design and Optimization

Dr. Fio Dossetto
by Dr. Fio Dossetto

Did you hear about the museum curator who commissioned a set of hand-crafted frames for a Van Gogh exhibition, then cut the paintings so they would fit inside them? 

I bet you haven’t - because that would never happen. No curator in their right mind would think to pick a frame before having a clear sense of the painting it will surround.

Intuitively, the same principle should apply to designing or re-designing a website, landing page, or app: knowing what is going to be there should really come before deciding how to display it. But we all know that things do not quite work like that. In reality, most of us have seen our fair share of beautiful, pixel-perfect wireframes filled with blocks of Lorem Ipsum and image placeholders. Some of us, myself included, might even be guilty of designing a few of them.


Design should not come before content

Carving an exquisite rectangular frame before knowing if the painting is on a round canvas is a waste of time, talent, and expertise. Getting a designer to design or re-design a website before a content strategist has identified actual content needs is just as wasteful.

In the vast majority of cases, the designer will have to improvise with boxes and placeholders without getting a chance to produce a truly effective design; the content strategist will be forced to cram content into inadequate spaces, or waffle to fit large gaps.

Either way, the end result will be a mediocre final product, two very dissatisfied parties, and a lot of wasted time.

This happens all the time. And I think there is a better way of thinking about content and design.


How content-led design works

“Content-led design” is not a new concept, but it is still a very underused solution. Here is how it works:

1. The first step of a design or re-design process should not be about design. Instead, it should be about identifying and mapping areas of content that need to be presented on the page/website/interface. Who is the content for? What purpose does it serve? How much information is required? What is the best format for it?

2. The second step should be collaborative, and bring the content strategist and the designer together to think about information hierarchy, structure, and prioritisation. Working with actual content (for example, copy) instead of random placeholders is strongly advised: finalised copy will both help convey style, tone of voice, personality, etc. and dictate how much space is actually required. It’s a win-win situation.

3. The third step should be where the designer (finally!) starts designing. And because steps 1 and 2 have already happened, the design will be stronger overall and truly complement and support the content, giving users a frictionless and seamless experience.

Content-led design lets the artwork dictate the selection of the frame – not the other way around. Isn’t it time we gave it a try?


And it does not end there!    

Content-led design is an excellent way forward, but it cannot be used in isolation: learning how real users interact with and consume content after a website has gone live is just as important, especially for those of us in the business of optimizing digital experiences.

This is where analytics features such as Decibel Insight's Heatmaps or Visitor Session Replays can make the difference, helping determine the most valuable content on a page, visualize user interactions, and uncover potential pain and friction points.

Combining such analysis with a content-first approach is a surefire way to provide better customer experiences. It's certainly more constructive than prioritizing looking pretty over all else.

----------

Do you agree with Fio's argument that content should always come before design? Let us know in the comments below - ojoin the conversation on Twitter with the hashtag #DecibelSoapbox.

Alternatively, if you'd like to explore conversion optimization further, then be sure to check out Decibel Insight's comprehensive free guide.

Turn your website into a conversion machine

Conversion Optimization Digital Experience Website Performance

Dr. Fio Dossetto
Written by Dr. Fio Dossetto

Dr. Fio Dossetto is an optimization strategist at CRO agency PRWD.