Wireframing (best practices)

Wireframing is the first step in designing the structure of a website, and it serves many purposes; to describe how information is presented on a page, to determine a website’s structure and how it functions, and to shape the flow of the user journey. Whether you’re interested in an entirely new project or refining an old one, wireframing provides a firmly user-oriented foundation for your site.

It’s easy to get wireframing and prototyping mixed up. Wireframing is the step before prototyping (which we’ll cover in the part 2 of this series), and it does not focus on any elements of visual design beyond the layout. When it comes to wireframes, think of a blueprint. 

b13 wireframing can improve your website’s level of engagement, your conversion rate, and overall level of customer satisfaction. Get in touch with b13 to improve your usability through wireframing.

Gathering information and defining goals

The first step to wireframing at b13 is straightforward: information gathering. 

• Talk with clients to understand the ultimate goal of the website or project. Steffi Kreuzer, a UX conceptor and designer at b13, says, “The first stage is me understanding what our customers want, and them clarifying what they need. It can also go the other way around; I tell the client what they need to achieve what they want.”
• Conduct an inventory of existing information, such as existing processes, user personas, and user flows.
• Perform expert-based research with the rest of the b13 team to fill in any knowledge gaps.

“After I've got all this information, I know what the goal of the website is and what the end users' needs are.”

Translate the collected data into information architecture

Once the necessary data has been collected and the goal of the project is defined, b13 clarifies the information architecture. This critical step informs the sitemap, the user flow, and ensures site navigation is clear, comprehensible, and intuitive. 

Information architecture is understanding the placement of each piece of information on the website. It is the first step before anything digitally is done. It’s asking questions like ‘Is it more important if I find this information with one click, or is it okay to find it with three clicks?’ Taking hierarchical tree of this related information, it can be used to build a sitemap, the navigation, and to understand the user flow on the website.

Adding content elements to the user flow

The next stage of wireframing is defining the page types and content elements and incorporating them as part of the overall user flow. Deciding on types of content elements and their placement is an important part of wireframing, because they help guide a user’s level of engagement, such as if they are pausing on a page to read a paragraph, click a button, watch a video, or fill out a form.

The tools that can be employed at this stage include for example an atomic style guide and a content element spacing system. 

“My atomic style guide is where I define everything, and I put it into a content library as my single source of truth. That way, when I make updates, I only have to change it there and eliminate subsequent faults.” 

This process is wrapped up by considering the various user flows of the website. User flows show how customers get from point A to point B to point C, whether they’re purchasing something, creating a new account, or upgrading an old one. By asking yourself “Where are the key points where customers exit from this process? What would be the best way to make them feel safe if they want to double check their password, or if they want to have a preview of their cart while they’re shopping?”, you consider alternative paths and wayfindings.

The final step: balancing the needs of users, decision makers, and developers

Putting the finishing touches on the wireframes before prototyping can be tricky. It involves striking the right balance between everyone who will be looking at the wireframe — users, decision makers, and developers. Each audience tends to care about different aspects of the wireframe, although the client, of course, has the final word.

The key with decision-makers, who often care most about the final outcome and are eager to get there, is communication. It’s important to let decision-makers know the “why” behind decisions and to emphasize that a webpage “looking pretty” is not enough. That's not what makes customers stay on your site. Focusing on how the wireframing deliberately makes space for future growth and for new features to be added, helps avoiding common pitfalls later on in the design process.

For developers, the focus is different. Before handing off the wireframe to developers, give your work a once-over. Developers are very detail- and information-oriented and care very much about a well-defined and clean wireframes.

Lay a long-term foundation for increased customer satisfaction

Wireframing is not just about a pleasing visual presentation of information on your site. By considering your customer’s point-of-view from the start, wireframing lays a strong foundation to improve your website’s levels of engagement, conversions, and customer satisfaction for the long-term.

Stay tuned for our next post in this b13 design series as we move on to prototyping. Contact b13 to get your project off to a great start with user-researched wireframes.