The Right Way to Wireframe

Increasingly, as designers of interactive systems (spaces, processes and products for people), we find ourselves stretching the limits of communication tools to explore and document what it will be like to interact with the things we design.

We describe “wireframing” as a form of design communication that enables stakeholders, team members, users and clients to gain first-hand appreciation of existing or future problem spaces and solutions.

We create wireframes to inform both design process and design decisions. Wireframes range from sketches and different kind of models at various levels of fidelity— “looks like,” “behaves like,” “works like” — to explore and communicate propositions about the design and its context.

We think that the wireframing strategies user experience designers use are often constrained by the tools they feel most comfortable with: problem space, domain, expertise, theme, context of problem, bias towards types of design tools and documents, timeliness of artifacts created. For this reason, a session that attacks one business problem from the perspective of four different designers will provide attendees with a unique understanding and set of strategies and tactics to improve their own practice.

This workshop will be presented in two parts and will revolve around a single design problem. Before the workshop, a third party (TBD) will provide clear business requirements to the four user experience designers leading it. They will each choose their own tool and method for exploring the requirements via wireframes and specifications. They will each work with their own graphic designer to develop and apply a visual design.

When the workshop begins, the workshop leaders will present the design problem/requirements to the participants. Each group will be coached by one of the workshop leaders. In these groups, attendees will tackle the design problem through sketching and review sessions. At the end of the sketching activity, the teams will each choose their best sketch and will refine a final solution. Each team will then present their final solution to the workshop, taking questions and critiques from the attendees and session leaders.

After the presentations have been completed, each of the workshop leaders will show their own solutions. They will each provide a detailed account of how they arrived at their solutions and how the tools they used influenced them. Participants will be provided ample time to critique these solutions and ask questions of the workshop leaders.

Workshop Timing

10 minutes: Intro to the design problem

20 minutes: Primer on the four different methods/tools the participants can use

30 minutes: Groups sketch their ideas & refine using the 6-8-5 method

20 minutes: Each group pitches their best sketch

30 minutes: Groups collaborate to create a concept using their method & tool

30 minutes: Groups present their solutions

40 minutes: Each workshop leader shows how they solved the problem

Audience Level

• Intermediate

Session Takeaway

• Gain a better understanding of three different kinds of activities within the design and development process where wireframing is valuable:
• Understanding existing user experiences and context
• Exploring and evaluating design ideas
• Communicating ideas to and audience of decision makers and team members.
• Provides user experience designers with a variety of approaches to creating wireframes.
• Details four different approaches to business requirements synthesis and wireframe exploration.
• Shows the advantages and disadvantages of different approaches within a specific context
• Refutes the argument that wireframing is dead by showing that it has just multiplied its forms
• The realization that the tools we use to design, such as wireframes, prototypes, etc. influence the way we think. Solutions, and probably even imagination, are inspired and often time limited by the tools we have at our disposal – which is perhaps the greatest takeaway from this session.