How to prepare for wireframing (and create better designs)

Too many UX designers jump the gun and start wireframing before they collect enough information to make an informed design. Unfortunately for their teams, these efforts don’t just waste their time, but everyone’s.

Before you do a single sketch, there are a few tasks you should complete to ensure that you’re ready to design a UI/UX wireframe that achieves the right goals. Smart preparation and proactivity will give your project much higher odds of succeeding.

Whether working with a client or internal stakeholders, it’s crucial to collect data and conduct detailed analysis before the wireframing process. Make sure your early-stage planning includes these important steps.

Client survey: obtain all source material

The first step is to learn your stakeholders’ goals. A stakeholder survey is a great way to familiarize yourself with each person’s perspective and expectations. By gathering this information upfront, you can begin the working relationship on a positive note and learn what motivates your stakeholders.

Surveys are vital even if you know your stakeholders from previous projects. Customer tastes change, data leads to new marketing targets, and a business’s mission often evolves over time. Without an in-depth stakeholder survey, you may overlook these factors.

If you’re missing key details, you’re left with assumptions or guesses. That’s never a good way to start a successful project. Moreover, this kind of misstep can lead to rounds of revisions down the line that could have been avoided.

Instead, get what you need to know in the most time-efficient manner possible. Your best options include:

• Sessions over Skype, Google Chat, etc.
• In-person meetings
• Telephone conferences
• Email

In all cases, take good notes you can easily refer back to when necessary. Record meetings or phone calls, so you don’t forget any vital information.

Asking the right questions

Prepare by analyzing any source material you can find. With existing brands and properties, you have a wealth of information to pull from. This includes:

• Company branded properties
• Social media
• Media coverage
• Press releases
• Fan reviews and comments
• Competitors (content, search rankings, etc.)

Use whatever is out there to ask the questions you need to know. Organize the information to begin your content inventory, which will come up later in the process. Go through each resource for quotes, news, and intriguing content, and compile them into an outline.

Sometimes, there won’t be an existing active presence. In this case, you’ll have less information to pull from, but you’ll be well-prepared with the questions you need to ask. Expect to do a bit of legwork to gather all this information. While it may seem like a lot of data to assess, you’ll be thankful you did the necessary research and analysis upfront.

Once you’re prepared, it’s time for the interview. Be sure to ask the core questions required for all projects. Then, ask any questions that help establish project objectives, including topics such as:

• SEO goals
• Target audience
• Branding
• Marketing
• Tone
• Call to action

With thorough research, your project is off on the right foot.

Online access: gain entry where needed

The following two tasks can be partially completed while conducting your stakeholder survey. It doesn’t matter when you begin as long as all information is acquired. Here, it’s about having all your needed credentials.

Think over every aspect of the project. Be sure to collect your client’s essential information. Obtain data from social media logins to domain registration. The needs vary by project. Be sure to evaluate on a case-by-case basis.

Chunk your project into an Excel sheet. Use one large sheet or separate by tabs. Either way, list your project. Use headings like:

• Social media
• Email marketing
• CRM
• Domain credentials
• Analytics

You can begin to build this list during your fact-finding. Round it out in your stakeholder interview. After the meeting, send a follow-up email with the sheet’s link so they can add any information they forgot.

With this information, begin to enhance your client survey with keyword analysis from Google Analytics. Study ranking keywords and the search terms the client is targeting. Discover how they fare against the competition. Use everything to build your plan’s purpose.

Some early-stage clients might need you to register additional properties. Or, they might want you to migrate to a better platform. This will be covered before any plans are finalized. Account for any extra work in your planning.

Content inventory: collect all visual information

This task involves a mix of research and data entry. Create a content inventory for any existing content your project may use. This can be somewhat time-consuming for larger projects.

Consider that time a benefit when it comes to branding. You’ll become deeply acquainted with the project by cataloging and detailing every piece of visual and written data. Having this information helps you to avoid veering off-brand.

Using a new Excel sheet, one tab only, list out each existing page. Then analyze and collect all written and visual copy. This includes listing every blog hyperlink, subheading, and clickable anchor text. Further on the table, create a files tab to cover all the content found on the page.

Lastly, make comments on the pages. List any redundancies, glitches, and navigational errors for addressing later.

With your list, scan for any areas requiring revision. Some teams will then make proposed changes to the current inventory. Others will opt for a fresh document to compare the two. The latter helps if you plan to show the list to your stakeholders.

Once complete, your content inventory serves as an additional project branding guide. Now, you have a meticulous hierarchy in place. Use this to steer your designs and layouts.

Define the customer journey

Don’t worry; all of this information gathering isn’t for nothing. The purpose of wireframing is to solve a problem for end users. And everything you’ve learned up to this point will help you turn conceptual ideas and dense data into practical functionality.

Whether you’re wireframing a website, product, or software feature, you need to have a clear idea of how it’s supposed to serve the end user. Now that you have the client and stakeholder perspectives, it’s crucial to align their product goals with the target customer’s expectations.

Understand the problem you’re trying to solve

Outlining the solution you’re trying to create isn’t always as easy as it seems. It’s common for stakeholders to approach the design team with an objective. Maybe, a client wants a high-converting e-commerce site, or customers aren’t using an existing software feature because it isn’t intuitive.

Without adequate context and data, it’s difficult for designers to understand the right way to solve a user problem. For example, low sales conversions could be related to poor functionality, a flawed content layout, a clunky checkout process, or a combination of things.

If you dive into wireframing without resolving these details, be prepared to waste a lot of time going back over the work you’ve already done. So, before you sketch a wireframe, make sure all stakeholders agree on five things:

1. Who is the user?
2. What does the user want?
3. What potential challenges could the user face?
4. How can you help users achieve their goals?
5. What action do you want the user to take?

Develop user stories and use cases

Based on the questions above, your next step is to write user stories to steer your design choices. A user story is a simple statement that sums up what a user wants to gain from the product and how the experience will benefit the user.

User stories typically come from user personas, a fictional profile of each target customer group. If you gathered this information during the client survey, you’ll have a good idea of the audience you’re designing for and how they’re likely to use the product.

User stories are valuable in UI/UX design because they help you develop use cases. A use case is a scenario describing how a person will interact with a system or product and the outcome of this process.

The wireframing process runs much more smoothly when you visualize the customer’s journey through the user interface. By breaking down individual pages or features by use cases, you can make sure the development team carefully addresses each design goal.

Client master sheet: combine the collected knowledge

Combine the various sources of research you’ve gathered for a full view of the project. For instance, align your analytical findings with your revised content inventory plans. Use your domain credentials to discover SEO optimization efforts. Compare your stakeholder surveys, user stories, and use cases to create a user experience that satisfies the client’s goals.

Working with your team, you’ll be able to make proactive plans and proposals that can realistically meet your stakeholders’ requirements. This should reduce revisions and make remaining on-brand easier. Collect this critical information early for smooth sailing later on.

Choose the right wireframing tools

Once you’re ready to make a visual representation of the product or site, the only thing left to do is choose the right wireframe software for your project. Do you need wireframing tools that support real-time collaboration? Will any non-technical team members be involved in editing the wireframes?

Consider how many stakeholders have to be kept in the loop. Working with cloud-based software is an excellent way to share wireframe diagrams when your team or stakeholders are spread out in different locations. You should also choose tools that make it easy to go from low-fidelity wireframes to high-fidelity prototypes as the project progresses.

With our Cacoo diagramming tool, you can build wireframes, track different versions of your project, and conveniently share resources with stakeholders in real time. Start with ultra-simplified designs, and then add annotations and background sheets to make interactive wireframes.

Final thoughts

While preparing for wireframing is time-consuming, this crucial step makes the design stage more focused and productive. At the same time, don’t allow information overload to hold up your project.

Acquire enough data from stakeholders to answer the most vital questions we discussed here. As you begin sketching, you’ll naturally start to narrow down your design ideas to fit the requirements of the project. The main goal is to avoid excessive backtracking and produce early-stage wireframes that drive a lot of feedback and engagement.

This post was originally published on December 7, 2017, and updated most recently on December 24, 2021.