Until now, we’ve shared a lot of tips on how to put together great content for your website, blogs and social platforms. The one part that all of us tend to conveniently skip is the design around the content.
Here’s some food for thought: Content is UX.
The purpose of good content is to deliver a smooth experience to the user. For this, it is not only the quality of the content that matters but the way you present it too. If you use the wrong colours and font, it may drive the user away despite you offering some valuable insights via your text content. Quality content packaged well then becomes important for your overall user experience.
Here’s the problem: Content strategists and UX designers work in separate worlds.
UX designers and content strategists are given briefs separately. As a result, UX designers tend to deliver some great designs that are filled with Lorem Ipsum Dolor. Content writers now work hard to ‘fit’ the content into the design. Enter multi-lingual content websites and you have a just ordered the best headache available in the shop.
Another scenario emerges if you use a content management system like WordPress which comes with many ‘themes’ that will promise to make your life easy. When you start reviewing themes, you visualize to fit your content into the available design and then select one that offers the best fit. This is a problem if you are doing content writing to fit rather than solve a user problem or meet a website goal.
So how do we rectify this?
In some ways, the problem lies in the inherent way we have been working with content and design as two separate units. This method may have worked in the past but the user today needs a more cohesive experience. To do this, the design and content team need to come together right in the beginning to chart out the user experience.
In this blog, we will take you through the points that we generally use as a team when designing important pages of a client website. We will also share an example case study below that shows how design and content can work together to get a great UX that solves a user problem.
Don’t design with Lorem Ipsum Dolor
Did you know that Lorem Ipsum – the dummy text used in the printing and typesetting industry has been used for five centuries! That’s right! It was invented in the 1500s by an unknown printer. Contrary to popular belief, this isn’t random text. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. Imagine that we continue to design with that text as a base!
Lorem Ipsum is used to plug gaps quickly to get you a feel of the design. It forces you to work backward on plugging content into the design space available. It also diverts you from your content goals – on making design and content work together to solve a user problem or even improve the user experience.
Most content marketers do a lot of re-writes until they get to perfection and then plug it into the design, only to realize that they now need to edit it to fit the available space. This mindset of adding content to the site only when it is ‘final’ is a problem area.
What if you could add your first draft to the site? Designing with a reference to the actual content will give give UX designers a holistic understanding of the context of their design. They’ll be able to make room for targeted CTAs and estimate the length of content which the design needs to embody.
Obviously, this need not be perfect. A professional content strategist will work on improving it later.
Use existing content as a first draft
Getting your hands on the first prototype of new content can be time-consuming or a bit tedious. Instead, you can take real content from the existing website and use it in the design. While you can factor in the re-writes, it’ll allow you to understand the context around the design better.
Putting real content in placeholders will allow the content team to ideate better on how to improve the content to make it more relevant.
Use competitor content
If you neither have an existing website or time for proto content then you can steal a little content from your competitors to be used as dummy content.
This method has a pro and con. The pro is that you’ll get to directly improvise on your competitors content, automatically making it better. The con is that you’ll have to ensure you change all the content fully and accurately to avoid copyright and plagiarism claims.
Let’s take an example of why real proto content will work better than lorem ipsum during the draft design and content phase of a website. This example by GatherContent demonstrates the point effectively.
During the design phase, the designer uses the Lorem Ipsum format to design a sample box depicting a note on the upcoming event. When the same box is filled with real content, you’ll notice that the event title is much longer. The design will have to factor titles of different lengths with a max count defined realistically. Similarly, the time, date and venue format changes dramatically in the actual version. If you pre-design this keeping actual/proto content, it’ll save a design iteration in the future.
Design with content insights
Though it almost sounds like a broken record now, we are still quite hung up on defining our goals before anything else and then making sure everyone including the designer and content strategist is working towards achieving the same goal.
For any re-design work, we do a thorough content audit to first understand the reasons behind the process. What is it that the client really wants to achieve with the new design and how content and design can work together to deliver this goal.
Let’s take a travel website example. The current site design was making it difficult for users to understand the variable package pricing options. The client had the same package available in pocket-friendly or luxury rates depending on the type of hotel accommodation the user selects.
As a team, our goal was to ensure that the user clearly understood these options before making a booking on the site. This would also prevent several emails coming to the reservations page inquiring about pricing options.
Here’s how we went about doing it
The 10 min wireframe challenge
Each member of the team was designed to come up with a rough wireframe design (both designers and content strategists) that would effectively solve the problem. No laptops or distractions. Just 10 mins on picking the design that they thought worked best.
Here’s what we had
Image Source: http://tfa.stanford.edu/sp2011/ex_wireframes.html
We saw a bunch of ideas coming up from this exercise:
- Add the info about the package variation to the main text on the tour package page. This would make it unmissable
- Add it to the booking box. This will want them to experiment with package variations while booking
- Add it to the overview: This was the first text they are likely to read.
- Add it in a tabular format: This will present all the information in one go without having to scroll and read long text
- Add graphical info in an image. This will allow us to play with design and use visual communication instead of just text
- Add boxed info: This will bring down the length of the text, keeping it short while mixing it with design
Next, each of us got 2 minutes to present our idea on why we thought it was the best solution in terms of design and content and a min for questions and critiques. At the end of each session, we took a vote. This is what our sheet now looked like.
The voting revealed that adding the user content to the main text and also incorporating it into the booking scheme was a good choice. Maybe one or both of these could be done. We also decided that once the site was set, we would try out an A/B testing between option 1 and 6 to see how real-world users reacted to the content.
After this, we got into a complete refinement of how idea 1 and 2 can be combined to give a seamless user experience. The user would read the text, understand the package type and choose to book accordingly.
We got down to answering more questions like which other pages would need this info, how this will be incorporated into the booking panel with additional coding and where the inquiry form will be placed in case the user needed further assistance.
These questions led us further to see if we needed a chatbot on the page to pop up after the user spent 5 minutes there or the details we’ll need to add to the FAQ section with examples on making it easy for the user to understand.
The first draft
Once we were all in agreement about where and how the content would be placed, we went about designing the first draft of our content to see if it really made sense. To do this, we created a wireframe using MockFlow This allowed us to bring design and content together and the client got a clear idea of how we were looking to solve this problem.
The initial ground test
While we were a bunch of experts working on solving a client problem, the real answer on whether we solved the problem or not will come from actual users. So we got a group of 15 users to look at the design and asked them if they understood the package types on the site.
Now, we came up with the second round of insights that helped us further solidify our content and design strategy.
– Is there a way I can see the cumulative difference between each package easily?
– The package names are a bit confusing. Can there be a ‘user-friendly’ aka given to them?
We collated the feedback, went back to the drawing board and did another iteration. This time, we were more confident that the content and design were working together to solve other goals of the page like getting people to actually initiate the booking or even test out the booking system.
We tested out the ‘conversion’ ratio of the page by asking a new set of users to see the steps they would actually follow while booking. Would they read the text first and then try booking or would they directly try to book and check for price information? We uncovered a few more insights based on direct feedback and heat maps, which we used to refine the page further.
The success of the project was defined by increasing bookings and decreasing inquiries on package pricing. Needless to say, the design and content had managed to achieve both.
While we can’t do this for every single page, it is important to do this for the most important goal of the website. For our travel website, getting the bookings going was the most important task. Getting design and content iterations together from the very beginning allowed us to solve this problem more efficiently.
What are the things you do for a seamless UX content creation experience for your user? We would love to hear from you.