How wireframes fit into the design process
When approaching a digital product build, you’ll often work with wireframes at the start of the design process. These simple drawings or designs help key stakeholders in your organisation understand the basic layout and functionality of any planned website or app.
Wireframes visually demonstrate elements such as where the menu will go, where content will sit, and where other features, like a booking form, will be positioned.
Wireframing is an important part of the overall design process, which looks to map out and optimise your users’ experience. This is done in a series of stages, which we’ll explore in this article.
Laying the foundation: Why you need to get wireframing right
As the first step of the design process, it’s important to get your wireframes right. And by ‘right’, we don’t mean that they should be an accurate representation of the end-product. Quite the opposite.
You could think of wireframing as the foundation on which the eventual design is built upon. For this reason, you don’t need to worry about external design aspects, like colours or fonts at this stage. Discussing these elements at the start of the digital process, will slow down production and often leads to confusion.
Wireframes should be quick and simple to whip up. They can be sketched on paper or a whiteboard, but should also be produced in digital form for better presentation. This also gives you something to keep for future reference.
Although basic, wireframes are a valuable first step in the design process.
By starting out with a very simple, basic design representation, potential issues or risks can be identified early on. Key stakeholders will be more likely to understand your design choices from the very beginning, and can watch the concept develop with each iteration of the design process.
Stage 1: Wireframes
Wireframes are meant to be basic. We often see clients fall into the trap of overcomplicating this part of the design process, when it should be kept simple, quick and easy to interpret.
A wireframe is a simple, single-colour, low fidelity representation of what elements will be on a page. It should not have branding or colour on it, and isn’t suitable for user testing.
It isn’t helpful when stakeholders are reviewing a wireframe with design elements on it, because the conversation often leads into design specifics, instead of focusing on basic positioning of elements. “This button shouldn’t be green”, or “that’s not the right use of our logo” are all points to be discussed further down the track. The goal, at this stage of the design process, is to develop a set of documents that are fast and simple for everyone to review.
Stage 2: Mockups
Mockups are where branding and visual design come into the equation. Once your wireframes have been approved by key stakeholders, your designer can move into developing a more detailed visual representation of the digital product.
There’s likely to be several versions of mockups produced, in order to demonstrate the user interface (UI) on different devices. This design stage gives you a general idea of how the digital product is going to look, and stakeholders can begin to provide input into stylistic choices.
In this iteration, you can start to ask questions like, “why is this button green?” and, “should we represent this text as a pop-up or an accordion?”. There may be several different stages of mockups created, as the designer implements feedback and incorporates new ideas for the design.
Stage 3: User testing
After your product’s mockups have been reviewed and signed off by your key stakeholders, design will then move into user testing.
This involves having a user interact with your mockup and observing if they use the product as you intend them to. You can gain valuable insights, such as whether they’re finding the information they need easily, or if they prefer using sliders or checkboxes.
This stage of design will be closely monitored by your product owner and your designer. They will note how users are interacting with the digital product, and identify if any functionality needs to be redesigned or tweaked.
Once user testing has been conducted and the results have been compiled, your digital product will finally move into the build stage. While you may consider this to be the ‘final’ stage of design, keep in mind that further user testing may be conducted down the track as new content or features are added.
At Tadashi, we have a wealth of experience in walking clients through digital product builds, from auditing and strategy through to design and platform selection. We can guide you through the wireframing stage, ask the right questions at the right time, and ensure your digital solution rolls out with ease.
Get in touch to chat about how we can be involved in your next project.
Originally published at https://www.tadashi.com.au on June 14, 2019.
