As UX Designers, we’re often asked to tread a fine line between content and design. As a result, our designs, especially early on in the process, tend to avoid content since they might not be finalized.
If you want to include some introductory text on the home page, but your team is still debating it, any sketch you show the team might have placeholder text since including that content might derail the discussion.
We often abstract the design to get the team to focus on what the page should do, instead of whether something is a droplist or radio button. This allows us to figure out what we need to design and explore several creative options.
However, that begs the question: When do you add the content back in? There’s a tendency to avoid adding content until the latest possible stage: usually before user testing or even later if you feel necessary.
Leaving content for last can sometimes lead to several problems in the late stages of projects. I encountered this when I ran into an unexpected design rejection late in the process.
Design rejection due to external factors
My team hit a snag three weeks before a re-design for a federal organization was due. Our current design solution wouldn’t work from an organizational (and legal) standpoint. Unfortunately, the way the legislation was worded and organizational consistency across other products caused us to be blindsided by an unexpected design rejection.
In that time crunch, the team leaned towards a poor design solution: using the bad original design with minor tweaks. Fortunately, we tested some alternative design solutions in our user tests.
While we had to scramble, organizing the testing data helped us quickly figure out how to implement that design solution.
However, that got me thinking about the larger picture. What could I have done to avoid that sort of situation?
This was when I began to consider the content: if I had thought about the content we would generate, we probably wouldn’t have run into this issue.
Designing for content first
Content-first design is a mindset that begins with thinking about the content. It can feel unusual because we usually don’t start our designs by thinking about content.
For example, we might start designing a home page by blocking out sections for certain types of design elements. But did you ever consider how your users get to this page?
This was one of the reasons our design got rejected, as we were designing an internal application.
Users usually navigated to our page from another application, which had form controls (Next/Previous/Cancel) and static pages.
When they came to our page, we had sidebar navigation and often used pop-ups and hover states. That sort of inconsistency across pages made our application stick out in the suite of products.
What’s worse, though, is that we hadn’t considered whether certain things were possible. Our idea of a ‘personalized dashboard,’ for example, wouldn’t work when we realized that the user login process wasn’t that sophisticated.
Users logged in with their unit code, but that unit code didn’t save previous actions they did the day before. That meant tabs like “Most recent documents,” “Commonly used documents,” and more wouldn’t work.
This is why a content-first approach can be helpful. When content comes last, projects run late, and budgets run high. You might design something that doesn’t fit existing content, which means either the content needs to be re-written or the design needs to change.
However, it’s tough to keep content in mind when juggling many different design priorities for a project. Rather than having reminders to ask us to think about content, though, we can ask ourselves one specific question:
How might we design the page in a hierarchical grid layout?
Hierarchical grids are not ideal for every design, and you might not want to use them in your design. But sketching your design in this layout is a great way to ensure content isn’t left until the last step.
Hierarchical grids force you to look at how you’d prioritize your design elements in order of importance and the central message of a specific design page.
First, identify the various audience segments and their top needs.
Prioritize those needs: assign each one a number to indicate its relative importance. No two items can have the same number.
Before designing a page, write a concise message (one to two sentences) that identifies what the page should get across.
Select the needs this page will fulfill. Then, compare them to the message to make sure the message and the needs are in sync.
Design the page to support the message and these needs further.
We might touch upon some of these steps during our everyday design process, but we might forget others. In particular, steps 3 and 4 are essential things we usually create but get lost in translation.
For example, you might create a high-level workflow early on where the purpose of one page, the Product page, is to get you to click on a specific Individual product (“Product C”) page.
If we were to write a short message for the page, it might be “The purpose of this page is to guide our user towards one of our featured products, Product C.”
But it might slip our minds when we’re designing. For example, our mockups might put design elements in sequential order, meaning “Product A” is first, and “Product C” isn’t the focus of the page. This is why the hierarchical grid layout can be helpful to think about.
When you’re forced to think about which element is the top priority, you also begin to ask questions about what type of message this page conveys and whether it aligns with what you want users to do.
This layout also has the benefit of forcing you to think about the requirements for the types of content you want to prioritize.
For example, if you want to prioritize “Top-rated products,” this might require showing an aggregate 5-star rating to show that it’s not just a single user that recommends something.
Or if your message is that your product is trustworthy, perhaps you need to think about how you might display logos (“Better Business Bureau”) or awards (“2019 Product of the Year.”)
Even if you are scrapping the hierarchical grid design, spending a few moments to sketch out how you’d design in this format helps ensure that content isn’t left until the very end. It might also get you thinking about whether the current content fits your designs.
Design is a path of multiple steps
A Design is rarely just a single page: instead, we want to guide our audience forward on a path across our website. Thinking about the content and the message you want them to take away will help them move forward without issues.
So it’s crucial to keep content in mind even if your design is currently abstracting the details. To do it quickly, think about the hierarchical grid.
Do you want to know how organizing my data allowed us to quickly create an alternative design solution? My new book, Data-informed UX Design, explains this and many other data tweaks to improve your UX Design process.
