Five Important Considerations for Wireframing
User experience design is more than just problem solving. Since a UX Architect’s workflow requires input from different teams, a vast part of the actual work is clear communication and discussion about the solution. While there are tons of great methods and apps for UX designers, one of the best and most efficient tools to drive both conversation and new ideas is wireframing.
As tempting as it is to just jump in and start designing screens… don’t do it! It’s in your best interest to sit down and deliberate over the details before diving in. So, without further ado, here are five important considerations for wireframing your latest project.
Clarify The Problem
UX problems are always multifaceted. Before designing any solution you need get into the nitty gritty of the problem. Thus, it’s essential to gain more clarity about the issues in the problem in order to create a better solution. When tasked with a new project, ask your stakeholders:
- What is the project?
- What problem is it solving?
- How do we know its a problem?
- Who is it for?
- Where is this page or tool going to live?
There are other ways to gain relevant information. If you have access to previous user research around the problem, review that first. If you’re fortunate enough to have access to incredibly knowledgeable customer service agents and sales teams that are on the front lines with the customer, don’t hesitate to pick their brains. And if there is any quantitative information around the problem, make sure the same story is being told in the data.
Before you start planning a solution, know the problem.
Workflows and Sketches
Sketching can happen anywhere, anytime in the design process. Sketching with stakeholders on a whiteboard early on is a great time to talk through the problem and workflow. Sketching out the screens and workflows for the user can generate other critical questions, like: What happens when the form is successfully submitted? Will it be available only on mobile? What happens when there’s an error?
There will always be moments when the team makes faulty assumptions or simply forget facets of the interaction. Pinning down the workflow and necessary screens will streamline the process and inevitably help your wireframe designs.
Get Feedback (Early)
Throughout the sketching process, I like to show the developers, designers and even the product managers what I’m considering for a possible solution. This helps incorporate and consider the technical limitations and other unforeseen capabilities. This also helps with scoping out the timeframe for building the solution (e.g. a new module that needs at least 6 months to be coded). Don’t be shy. Share and talk about it.
Know Your Tools
So you have final approval on the sketches. Now it’s time to turn those sketches from chicken scratch into crisp, clean designs. Omnigraffle has been my go-to tool for both low and high-fidelity wireframes. When I first started using it, I found myself spending more time trying to align objects and manage layers. Over the years, I’ve learned the keyboard shortcuts and built templates. Whichever tool you use, get comfortable with it and do what you need to save yourself time. Your energy should be spent on creatively solving the problem and communicating that solution.
Know Your Audience
Every team communicates and understands problems differently. So the fidelity of your wireframes has to be tailored to the audience. For example, I’ve designed high-fidelity wireframes for those who needed to see the concept fleshed out as close to reality as possible. Low-fidelity wireframes were best for those who simply needed to know where the interactive elements were on a screen with an additional description on how they worked (especially if a prototype wasn’t available).
In Conclusion
It’s easy to make a simple mistake of designing for the wrong problems or wrong audience. These considerations can help you stay focused on wireframing solutions and sharing that vision across teams. If you have any other tips, feel free to leave them in the comments section below!
