Priority Guide with Intent: Analyze with Content Early

Part 2 on how a priority guide can add value at any point in the design process

Workday Design
Workday Design
7 min readOct 13, 2020

--

By Simone Ehrlich, Content Strategy Manager

Illustration by Vichai Iamsirithanakorn

Redesigns are easy, right? Just glance at the page, and it’s instantly clear what should stay and what should go. Far from it. The beauty and risk in design is that inherent in any page are a thousand small decisions. All these add up to an efficient, delightful experience, or degrade it until it’s a broken, incoherent mess.

A priority guide has the potential to inform your decision-making. At Workday, this is one of our Content Early methods, which we use at any time during the design process. We use priority guides to design, in the manner of content first, before ever opening a Figma file. We also use them to bring fresh perspective if we’ve already started a design. It’s never too late to consider content.

By infusing intent into a priority guide, it helps you to analyze the hierarchy as well as the purpose of each section and element of a design. You can do a priority guide based on an existing wireframe, mock, or even a page from your product that’s out in the wild, but begging for a redesign.

How to Create a Priority Guide for Analysis

Here’s how to create a priority guide for analysis:

  1. Identify the goal for the page.
  2. List the content (and their associated UI elements, functionality, and intent) in the order of the current hierarchy.
  3. Analyze the hierarchy relative to the page goal, in light of any research you have, and add ideas for the redesign.

Let’s say that we’re redesigning the Recipe page for ProCooking (a fictitious website). Here’s the current page:

Mockup of a webpage with a recipe for bread baking and related information
Hi Fi Mock of Recipes Page

To analyze the order and content of your sections, you can make a high-level priority guide.

Identify the Goal for the Page

This should be the goal of the page in your new design. You’re going to use this goal to compare what the current design is communicating, and then make decisions about what to change to better support the goal. For example, the goal here is to “Guide cooking enthusiasts and new cooks through a recipe of interest to them.”

List the Content, Elements, Intents, and Functionality

What is the existing design telling you is most important? What draws the eye? Look at the size of the element, placement, weight of text, vividness of color and imagery, and more. Make a list, in order of the current priority communicated in the design. Leave out the header area or nav if it’s not a part of your redesign.

In the example, right now the recipe page has some elements that are competing for priority. Because of their relative size and visual interest, the 3 images on the left are high in priority: Baking Basics, The One Dutch Oven You Need, and Quick Dinner Rolls. It’s not immediately clear that these represent 3 separate sections: classes, equipment, and related recipes.

Two other sections, Ingredients and Steps show as lower in priority. Yet these are the sections the user cares most about when making a recipe! (Yes, you’re starting to analyze… 😄 It’s irresistible once you write down the priority.)

Analyze and Add Ideas for the Redesign

To analyze the content priority manifested in the present design, question everything. How does the content in its current order reflect its importance to the user and support your page goal? Add any ideas for how the information and its hierarchy might change with your redesign.

Consider what you know from user research or the usage data (if the design is already live). Then think about what needs to be changed or eliminated. Is something too high up in the list? Does it not even need to be there?

Now’s the time to make a note about moving Ingredients and Steps up in priority, above Related Recipes. You may add a redesign idea to expand the Related Recipes section, based on usability testing. And if you know from your usage data that users aren’t navigating to Essential Equipment or Cooking Classes from the recipes page, you can ditch these sections entirely.

Mark up of how sections in priority guide move or get cut, with redesign notes
High Level Priority Guide for Analysis of Recipes Page

The priority guide helps you to first evaluate how well the information supports the goal for the redesign, then determine what changes to make in that redesign. You can ruthlessly slash sections that don’t support the goal and revamp or rearrange sections according to what information best serves it.

The redesign ideas listed in the margins of the priority guide may cover functionality or intent. For example, the ingredients section is essential (after all, what’s a recipe without ingredients?), but you can improve it. The original intent to “Make it easy to order” supports the goal, but the new functionality, “Integrate ordering via the user’s preferred delivery service” better fulfills that intent and serves the overall goal.

Get into the Details

As part of your redesign, you can make a detailed priority guide of the individual sections you plan to keep and dive deeper into the redesign of the page in lowest fidelity. What’s lower fi than notes in the margins?

Let’s look only at the Related Recipes section of the page. By analyzing the intention of each element, and keeping in mind insights from research, you can decide what you want to move around. You can also determine what changes in functionality to make and vet these with PM and dev.

Close up of a single section of recipes page with a picture of rolls in a basket
Hi Fi Mock of Related Recipes Section

This deceptively simple section has a lot going on. There are 5 elements that convey information, some of which you can eliminate, substitute, or move around. To expand the section, you’ll need to move the text button up in hierarchy and also add a section header: Related Recipes.

If you know from usage data that users don’t tend to share before they dig further into the recipe, you can eliminate the share functionality at this level, and reserve it for when the user clicks into the recipe.

Say you have a hypothesis you’re thinking about testing — that seeing the ratings from other users will encourage the user to click into a related recipe. By adding that new idea to the priority guide, you can gauge your partners’ reactions. Then when you go to wireframe or mock up the redesign, you have a better idea of whether you have buy-in and how feasible your design will be.

Markup showing how to redesign a section and its content within a priority guide
Detailed Priority Guide for Analysis of Related Recipes Section

Take a look at the redesigned Related Recipes section.

Original section with 1 recipe and an expanded version containing 4 recipes
Hi Fi Mocks of Related Recipes Section — Before and After Redesign

An intent frame, in which you plan the layout of elements based on the purpose of each one, could help you gauge where on the page you’ll have space for all these new related recipes. But let’s stay focused on priority guide, shall we?

Benefits of Analyzing Your Intentions in a Priority Guide

The benefits of analyzing your designs with a priority guide are similar to those that accrue when you design with one.

Alignment Made Easier: Shared ‘Ah Ha’ Moments

The tool is the conversation starter with your partners. You don’t need to argue your point. Just show what the present design is communicating about what’s important, all by itself. The conversation swiftly moves to how to improve the prioritization, and you’re off to the races.

Rapid Iteration: Kickstart the Redesign

It’s super fast to get a jump on your redesign with a priority guide that analyzes the current design. You can iterate without having to create wireframes or mocks yet — just move the sections around in your priority guide and change the information, rapidly.

Then you can use the priority guide to inform your next wire or mock (or an intent frame if you’re using one) and translate the design back to a more visual and spatial form again.

Check out the newly redesigned mock for ProCooking’s recipe page after its glamorous transformation!

Redesigned mockup of webpage with same recipe for bread baking
Hi Fi Mock of Redesigned Recipes Page

So What?

Why analyze your designs with a priority guide and bring intent into the mix? Like much in design, if you ground your goal and priorities in a combination of user and business needs, and communicate your intentions clearly, you’ll succeed. The user needs, you get from research. The business needs, you get from product management. The technical feasibility, you get from engineering.

And, like all Content Early methods, you can bring priority and intent to bear at any point in your design process. Whether you use a priority guide to design from scratch or analyze an existing design, it brings value because it helps you to organize your own thinking and align with your partners.

Using priority guides in similar or different ways? I’d love to know how. Reach out!

--

--