Designing with purpose: how intent framing guides your design process
How to be more intentional when placing elements and content on a screen
I should have sent this post last week, but I've been busy juggling work and parenting. My wife is currently pursuing her master's degree in Holland, while my children and I are still waiting for our visas here in ever-sunny Indonesia. Hopefully, we can reunite in the coming weeks and enjoy some stroopwafels together.
I've been considering adding some structure to the newsletter. Each month, I plan to focus on a specific topic and break it down into sub-topics each week. This week, we're discussing how to become more intentional in our design process, aiming to design with purpose.
Last week, I kicked off a new series on designing with intention, a topic I've always been passionate about. In the first post, I discussed how to start a project with intention, using IBM Design's Statement of Intent framework.
After setting a project's intent, you begin seeking and crafting solutions. This intentional mindset also applies in this phase.
Enter intent framing
Intent framing is similar to traditional wireframing, but it places greater emphasis on understanding the purpose behind each element you include. Instead of immediately detailing elements, content, or functionality, you start by considering the purpose of the element you want to include.
Simone Ehrlich, Content Strategy Manager at Workday who introduced the concept of Intent Frame, added, "Think about the purpose of the element for a second; understand what it should do—that's essentially what intent framing is."
Why I find intent framing useful
I have always found traditional wireframes useful for considering high-level ideas, content, and functionalities. I love having a mental space to process complexities in a low-level form. However, in some cases, adding wireframing to the process just gives extra overhead and slows me down. Moreover, most of the time, I created boxes and content that would most likely be changed significantly in the high-fidelity design phase.
I was torn: I love using wireframing as a way to think through a concept at its core, but I don't want to get too detailed at that stage. Instead, I prefer to focus on the details when working on the high-fidelity mockup.
When I discovered intent framing, it felt like the sweet spot I had been looking for. I need a space to think, specifically to understand the purpose of each element I want to include on a screen. On the other hand, that information is sufficient for me to jump onto high-fidelity design without spending a lot of time detailing the wireframes.
Disclaimer: This may not apply if you don't engage in any visual work; in such cases, wireframes may still serve as your final output.
How to use intent framing
To start with intent framing, the approach remains the same: gather the necessary insights to prepare yourself before diving into the design stage.
Before detailing content through either wireframes or high-fidelity designs, employ intent framing using the following steps:
Figure out the goal for the page.
Sketch a concept (or design a wireframe) with just the outline of elements you want to include on the page.
State the purpose of each element, right in the space where it goes.
Let's make one. Here's an example of a screen from a dog care app where paw parents can get real-time information about their dogs or cats when they are being sat or walked.
Step 1: I'm using the Statement of Intent from my last post as a goal.
(Who) Paw parents who are concerned about their pets' well-being and crave real-time updates (What) can enjoy peace of mind by receiving detailed information about their pets' activities, including location, duration, and even photos, when their pets are being sat or walked (Wow) all updated and accessible in real-time in-app.
Step 2&3: Sketch a concept & state the purpose of each element
The intent behind each element is articulated using an active verb:
Display the real-time position of the pet on a map for a quick glance.
Update the owner about what her pet is currently doing, as reported by the pet sitter. For example, "Currently, Molly is playing frisbee." I want it to be easy and quick for pet owners to glance at their pet's position.
Show pictures of the pet that is being sat to provide tangible proof that the pet is in good hands, or as visual updates to allow owners to feel emotionally connected to their pets even when they can't be physically present.
Provide a pet sitter profile to help build stronger connections and instill trust in pet owners that their animals are in good hands.
Display a chat button to enable communication with the pet sitter via in-app chat.
In general, my intention is to structure the screen from top to bottom based on what most owners expect from updates. This way, owners can quickly check their pet's location and activities. If they have more time and wish to see additional updates, they can browse through photos or chat with the pet sitter.
Other active verbs you can use: are grab, entice, remind, surface, and accomodate—well, you can use any verbs you like, as long as they accurately represent your intentions. These verbs are framed from the designer's perspective, fueled by user insights. Your intentions should not be solely based on your own desires; they should focus on understanding the purpose and considering your users. Ask yourself:
What is the purpose of the element that I want to include here?
What will this element mean to our users?
Do I have any supporting data to help rationalize my intention?
Intent frames help verbalize abstract ideas, preventing you from feeling overwhelmed.
Focusing on intent is an effective method for starting your project by verbalizing abstract ideas. This approach acts as a remedy for 'blank page' paralysis by encouraging you to think in layers: from intention to content, and finally to high-fidelity mockup.
Designing directly in high fidelity while simultaneously considering both the intention and the content can be overwhelming. This complexity may eventually slow down your design process, making it less efficient and more prone to errors or oversight. By breaking down the stages, you set clear milestones for your design process, making it easier to concentrate on each component and avoid feeling overwhelmed.
Intent frames provide the groundwork for a strong design rationale.
When you start with an intent frame, you lay the groundwork for a strong design by thoughtfully considering each element you incorporate. This intentional approach makes sure that every component has a specific purpose, aligning with the overall goal of a screen, even a project. If your team asks why you've added a particular element or piece of information, you'll be well-prepared to provide a rational explanation that supports your design decisions, because you've been considering them all along.
Conclusion
Just because you've spent years designing doesn't necessarily mean you can speed through the process and make better design decisions. When you've designed countless home screens, it's easy to slip into autopilot, letting your intuition based on past projects or best practices take over. Often, we place elements before truly considering their purpose. This is where intent framing comes in handy; it serves as a moment to pause and clarify the purpose of each section and element in your design.
Support Design Buddy
All the content on Design Buddy and in the newsletter is accessible to everyone for free
If you like my post, please consider giving it a ❤️
Share it with your design friends.
Subscribe to the newsletter, if you haven’t.
If you have any comments or feedback, or if you'd like to get in touch, feel free to send me a message. Thank you for subscribing!
Digital handbooks for designers
I'm writing two handbooks to guide designers with valuable insights, helping them thrive in their craft.
Frameworks for Thinking offers various frameworks and tools to help designers and creatives think critically, generate new ideas, and solve complex problems.
Deliberate Practice for Designers provides guides and insights to help you master your craft and become a lifelong learner through deliberate practice.
References