Theory: Giving Ideas Form & Function

Without trying out a potential solution to a UI/UX design challenge, it’s impossible to know if it could work. A roadblock presented to creatives on a daily basis is how to take conceptual ideas and make them concrete. After all, design gives ideas form and function. But without that jump – without taking a chance on something to see if it actually works – it’s impossible to progress to later phases of the UI/UX design process.

Here’s a correlative example: no matter how grandiose an architect’s vision of a building is, if he or she doesn’t start with a simple sketch, there’s no means of actualizing the design. Without first identifying how the geometric shapes of the building will fit together, the architect can’t skip ahead to picking out the building materials, the exterior colors, or the fancy lighting schemes that accentuate the design.  The architect can become inspired, but picking out refined materials will be less efficient since the structure may change.

In UI/UX, the business of wireframing is all about establishing the plans of what could be without becoming totally married to any one particular idea.

Psychology: Wireframes say “I Can Change”

At Fresh Consulting, UI/UX Designers work in a highly collaborative team setting where all sorts of perspectives and solutions to a design problem are taken seriously. One essential stage of this process is wireframing as it allows team members and stakeholders to align on a common vision for the design layout and information architecture before progressing to the aesthetic. A key message that wireframes broadcast is that they are subject to change and that there can be additional passes at the layout of a website or app before a final layout and information architecture is agreed upon.

But how do you come to an agreement about what the final wireframe should look like when there are so many hands working on a project?

At Fresh, the collaborative wireframing process encourages participation and converges different input from multiple team members.  The process might look like the following:

• The client shares ideas, vision, objectives, problems, and questions.  We listen.
• The UX team does UX research, analysis, and testing to understand problems, opportunities, and insights. Together, analysis, ideas, questions, recommendations, and directives are outlined as ingredients for the wireframing process
• The UX lead creates a master file in Adobe Muse or Adobe Illustrator with a simple specification guide and global design elements.  He or she might also take a first pass at setting up some foundational layout ideas or information architecture plans.
• This file is shared with other members of the design team who are asked to collaborate or work on different parts of the wireframe.
• The UX lead integrates and implements the changes other designers suggest on the master file.
• The team reconvenes to assess the wireframe and dissect what does and doesn’t work in terms of form, functionality, and behavior.
• The team shares iterations and drafts with the client for their input throughout.

The most important theme of the aforementioned wireframing approach is taking input and being subject to change quickly.  In fact, that’s the whole point. Because the design is still in its infancy, this unpolished deliverable allows for iterations, constructive (and critical) feedback, and early rounds of usability testing in a shorter time frame.

Benefits:

1) Better Usability with More Structural Integrity

In a blog post on the importance of differentiating wireframes, mockups, and prototypes, we wrote that “Skipping wireframes comes at the trade off of not locking down efficient layout, interactions, and information architecture because aesthetic mockups look deceivingly good.”

This is the honest truth. No matter how amazing your vision for a product is, without focusing on information architecture, layout, user flows, and the arrangement of buttons and calls to action – all enabled by investing time in wireframing – you jeopardize creating a “building” that looks awesome on the exterior, but falls apart as soon as people step inside it.

Worry less about how the paint or accoutrements will look, at least on the front end. Instead, design an experience for your users, and do so with wireframes.

2) More Innovation from more Efficient Collaboration

Remaining cognizant of the importance of iteration – consistently and repeatedly making changes to a design – is imperative. While iteration still remains important at later stages of the design process, it becomes less viable as time and attention are spent on increasing the interactive and visual fidelity of the product. Hence the importance of wireframes – quick and influential iteration is conducted when it’s easiest to do so.

Breathtaking aesthetics are compelling, but at the same time, they are constrictive. Like an architect who creates a blueprint for the first time, the UI/UX Designer must remain open to the possibility that when ideas get drawn, the finished product may look different than what was first envisioned.

In a creative workspace, it’s ideal to have a team mindset that enables talented people to work efficiently together on a project and create something better in the end. For this reason, starting with wireframes makes a lot of sense as they allow you to account for the needs, voices, and politics inside your business. Wireframes allow for more input and collaboration in the initial stages of a project when rapid iteration is the premium creative currency.

To summarize, wireframing in a team setting efficiently allows more open minds and participation, which leads to more ideas entering the design process, which allows for more more ideas to combine, which creates more innovation.