Priority Guide with Intent: Alignment through Content Early

Part 1 on how infusing intent into a priority guide is a catalyst for effective design

By Simone Ehrlich, Content Strategy Manager

Illustrations by Vichai Iamsirithanakorn

Nothing sharpens our sense of priorities like a crisis. The COVID-19 pandemic has certainly thrown my personal priorities into sharp relief. The goal is to get through this. My priorities, in order, are my family, my team at Workday, and my community.

It shouldn’t take a crisis, however, for you to know your goal and priorities. In design, knowing both is key to success. A priority guide is a design tool that helps to establish the goal for a page and what should go on the page to serve that goal. You can use a priority guide to design from scratch or analyze an existing design, which is why it’s part of the Content Early suite of methods here at Workday.

For the original priority guide, introduced by Drew Clemens as a form of content first design, you identify the goal for the page and list the real content that supports it, annotating with the UI elements and any functionality.

I like to modify the priority guide a little and infuse it with intent. A priority guide with intent has particular power in fostering alignment and collaboration. Ultimately it leads to better design.

Let’s take a look at what this tool can do.

Designing with Intent in a Priority Guide

A prerequisite to a priority guide, like any content early method, is solid user research. Another valuable input is the business need that is so often the invisible hand in design.

At the core, there are really 2 things you need to do — identify the goal for the page and list what information needs to go on the page to support the goal and why.

Here’s how to create a priority guide:

1. Decide on the goal for your page.
2. List what goes on the page — the elements and the information that goes in them — in the order of importance to the user.
3. Add the intent of each element.
4. Note any functionality, if applicable.

Let’s break it down a little more. Let’s say ProCooking, my entirely fictitious website, wants to add a Quarantine Cuisine page. (Hey, it’s gonna be a long year.) These are the steps to making a priority guide:

Decide on the Goal

First, get the project team in a room (or on a Zoom) together. Align on the research insights before you begin. Assuming you have your flow already designed, you’re ready to start defining the priority for your page. Identify the goal first. For example, Support cooking enthusiasts and people who don’t already love cooking through Shelter-in-Place on a culinary and emotional level.

List What Goes on the Page

Figure out with your team what information needs to go on the page, in support of the goal. Make a list of each section you’ll need, in order of most important to least important. For example, FAQs, Quarantine Tips, Food Related Entertainment. This ordered list shows the content priority. It serves as a quick reference for the page’s information hierarchy.

Add the Intent of Each Element

For a high-level priority guide, the elements are just the sections. You can label them on the left side of the content. (This starts to add value when the elements change, for example, Section, Prompt, Button.) Now, note the intention of each piece of information in the list, off to the right. Start with a verb, for example: answer a variety of questions, appeal to social need.

Note the Functionality (if applicable)

Write down any key functionality for each section if it occurs to you. It’s great to vet these ideas with dev to make sure what you want is feasible. For example, does this section content change on a particular frequency? If so, you can add a note such as: Update tip at 12 a.m., local time.

Here’s what the priority guide looks like at a high level — you can see that it’s just the sections right now.

High Level Priority Guide for Quarantine Cuisine Page

This single column of content in the middle acts as a constraint (much like designing mobile-first), in which you have to ruthlessly prioritize the relative importance of the information. Writing down the UI elements and the functionality helps you plan the page and what you want it to do. The intents express what purpose the information serves. All these notes invite your partners, who need to implement the page, into the conversation about what they’ll need to build and why.

The Sequence of Priority and Intent

What’s next? You can translate the priority guide directly into a wireframe, but you’ve already got those handy intents all listed. If you make an intent frame, you can get a preview of the wireframe in lower fi.

Here’s how you use the tools in sequence.

Sequence of Designing with Priority and Intent

Each tool provides its own opportunity for alignment with your partners (and even feedback from users), keeps the focus where you need it in each step, and ultimately makes for a better design. You can also revisit your priority guide after new research sessions to see if any of the priorities in your design have changed based on what you learn.

Translating a Priority Guide into an Intent Frame (or Wire)

To determine the placement of each section in the intent frame, think about 3 things — location, size, and visual engagement — that factor into what gets the user’s attention first.

Consider, in combination:

• The highest priority real estate on the page based on the F-shaped pattern of scanning
• Relative size — the amount of space the content will take up
• Visuals that draw the eye (e.g. color, images)

Translating a High Level Priority Guide to an Intent Frame

However, to better plan the relative size of each section and factor that into the placement, first you need to think through the information that goes in each section in more detail.

Detailed Priority Guide

Enter the detailed priority guide. Think of it as the expansion (accordion-style) of the high level one. It’s the same thing, just at a more granular level. Here it is for just one section — the one on Quarantine Tips.

Detailed Priority Guide for One Section

This detailed content doesn’t have to be perfect — typos don’t matter. The important thing is to get a good sense of what’s actually going in the elements so you see how much space it’ll take up. That’ll tell you if you’ve got the right element or if you need a particular interaction pattern to reduce the cognitive load for the user.

To make this post slightly shorter than War and Peace, I’ll skip over showing the intent frame and wire for this section and show just the hi-fi mock. Here’s what it looks like for the Quarantine Tips section:

Translating Detailed Priority Guide to a Mock — Tip of the Day Section

Notice that something low down in the priority guide may end up higher up in the mock, because of how users process information on a page. Since the image is most engaging, the eye goes first to it, then to the subheading, ‘How to Freeze Citrus’, then to the button. The heading ‘Tip of the Day’ is low priority, because of its small font.

Once you detail each section, you can put it into your design, confident that, having already vetted the intent and functionality with PM and dev, your design is something your partners are bought in on and can implement.

Benefits of Priority and Intent in Designs

The Priority Guide is an expression of intentional design and an invitation to collaborate. It is both a plan and an alignment tool. By using priority and intent in combination, you can design more efficiently and foster collaboration with your partners.

You’ll make each iteration of your design more purposeful by not jumping to layout before you have figured out:

• The goal for the page
• What information you want on it
• That information’s relative importance
• The feasibility of implementing your intent

A priority guide with intent organizes all this information into a blueprint for a successful design and a successful collaboration. It’s not that a priority guide eliminates iteration — it just makes each one more effective, because it’s a communication tool.

The annotations in a priority guide — the UI elements, and in particular the functionality and intent — make for great conversation with PM and dev. Why not find out early whether your idea meets the business need and is feasible to implement…or if it doesn’t, how the team recommends you proceed?

Better yet, if you invite your partners into the process early (this is content early, after all), the goal, priorities, and intent are no longer just yours. They’re shared.

I flat out love doing a Priority Guide in this setting. It’s designing with partners without the pain of designing by committee. You’re making the hard decisions real time, and you still get to go off and figure out how to creatively bring it to life. Then when you come back to your partners with the next version of your design, they’re like, “Yeah! That’s just what we talked about!”

Try a priority guide. Then do an intent frame (super fast since you already have the intents), and then go to a wireframe. Your partners are bought in every step of the way cause now it’s a shared priority, a shared intention. Beautiful.

Interested in learning more about priority guides? Don’t stop here. Check out this pair of great resources:

Priority Guides: A Content-First Approach to Wireframes — Alistapart provides a super clear explanation of how to use a priority guide, by Heleen van Nues and Lennart Overkamp.

Design Process in the Responsive Age — This is the pioneering post on priority guides, by the man who invented the tool. My favorite line is Drew Clemens’ explanation of his original name for the tool: “my mobile-sized content prototype wireframe thingy.”