Why Wireframing your product first is the smart move

So, your design team has sent through wireframes for your new app. What now? Wireframes have long been an essential part of the design process. But today many design teams either use them to simply “tick” a box, or they see wireframes as an unnecessary step in their Lean UX methodology.

At Arcade, we’re all about the Lean design process. The difference is that we see wireframes as a key deliverable during this process. Why? Because when you use them properly, wireframes will save time, money and effort down the track.

In this article, we cover what wireframes are, why we believe they’re critical to the success of your app design, and what you need to do next.

What is a wireframe?

Think of a wireframe as an architectural blueprint for the app. It’s not there to show the intricate details of the design; it acts more as a skeletal guide to each screen. The designer can use the approved wireframes as blueprints for the next phase: User Interface (UI) design.

What wireframes do show:

  • Page elements
  • Space distribution
  • Object categories
  • Content prioritisation
  • Features and functions
  • Intended actions and user flows
  • Relationships between screens

What wireframes don’t show:

  • Design elements
  • Colours
  • Actual images
  • Fonts
  • Logos
  • How the app should perform
  • How it will undertake algorithmic calculations

It’s important to note that wireframes are not the same as user journeys (link to article) nor they can they be used alone to clearly explain the user journey. That’s why, at Arcade, we always ensure the team working on the wireframes (typically the business analyst, product owner and designer) directly reference user flows and journey screens.

Why are wireframes an important part of the process?

Wireframes enable divergent exploration

Wireframes often feature at the start of the design process because they make it easy to quickly explore multiple design options. Team members can bounce around ideas – albeit a more structured set of ideas than in the previous stages.

Wireframing ensures all functionality and features are captured.

Before moving onto the design phase, wireframes help ensure we've captured the features that are required to achieve the user stories and the functional and non-functional specifications. Wireframing therefore translates into quicker and cheaper app development, ensuring major changes have been made before the UI design phase. It’s faster and cheaper to make changes in the wireframing stage than later when the app is in development.

Wireframes save wasted effort, time and money

Once the best option is determined and all functionality is accounted for, designers can move into visual design, which is more time-consuming. In short, wireframes save designers from wasting valuable time and effort on the wrong design.

alt

Wireframes make sure everyone is on the same page.

Let’s face it – designs aren’t always to explain using words and sketches can be misinterpreted. That’s why wireframes are a great deliverable: they ensure everyone is on the same page. The whole team can see what the skeleton looks like, the relationships between screens, and can be across any changes before the next phase.

Wireframes provide a visual for stakeholders

Wireframes provide visuals for you to use in meetings or presentations to seek buy-in or funding for your app. Not only does it show you’ve fully considered the app design, it also captures attention – after all, investors and decision makers buy with their eyes.

What should you look for in wireframes?

Reading a wireframe is an important part of the process. After all, this is the blueprint upon which your design is built. So, it’s important that you don’t gloss over wireframes only to try and make changes later.

When you receive the wireframes, make these three crucial checks:

Scrutinise the wireframes to ensure nothing has been missed.

Check the elements on each screen of the wireframe are correct.

Confirm you’re comfortable that these screens will be used by the designer to design the User Interface.

Remember, this is not the stage for advanced design elements, like resizing images and cropping photos. At Arcade, our developers create a "black box" so this can be explored in the UI design stage.

Summary

Wireframes are an essential part of a fast-paced and lean app development process, ensuring everyone is on the same page before you move onto UI design. By using wireframes as a deliverable, we can get you to a working app faster and within budget. Not sure what to look for in your wireframes? Ask us.