The Right Way to Wireframe

Russ Unger (18F), Todd Zaki Warfel (Messagefirst), Fred Beecher (Evantage Consulting)
Workshop
Location: 2001 Level:
Average rating: ****.
(4.00, 7 ratings)

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.
Photo of Russ Unger

Russ Unger

18F

Russ Unger is an Experience Design Director in Chicago where he leads teams and projects in design and research. He is co-author of the books A Project Guide to UX Design, Designing the Conversation, and Speaker Camp for New Riders (Voices That Matter). Russ is also working on a book on guerrilla design and research methods that is due out, well, sometime.

Russ is co-founder of ChicagoCamps, which hosts low-cost, high-value technology events in the Chicago area, and he is also on the Advisory Board for the Department of Web Design and Development at Harrington College of Design. Russ has two daughters who both draw better than he does and are currently beginning to surpass his limited abilities in coding.

Todd Zaki Warfel

Messagefirst

Todd Zaki Warfel is a Principal Design Researcher and founder of Messagefirst, a Philadelphia-based design research consulting firm, where he blends research and design to evolve products in innovate and beautiful ways. Todd is a dynamic speaker and storyteller by nature. He’s rarely short on details. He is an active member in a number of industry communities and organizations, including the Information Architecture Institute, IxDA, and UPA.

Todd’s clients have included Albertsons, AT&T Wireless, Bankrate, Bank of America, Citibank, Comcast, Cornell University, IntraLinks, The Hartford, LA Times, Motorla, Palm, and SBC.

Todd currently lives in Philadelphia and blogs at toddwarfel.com. His upcoming book ‘Practical Prototyping’ will take a hands-on approach, enabling you to develop prototypes with minimal muss and fuss. The book discusses how prototypes are more than just a design tool by demonstrating how they can help you market a product, gain internal buy-in, and test feasibility with your development team. Todd is co-authoring a book on research methods due out in 2010.

Photo of Fred Beecher

Fred Beecher

Evantage Consulting

Fred Beecher is a Lead User Experience Consultant at Evantage Consulting in Minneapolis. Fred has been working in the user experience design field for 12 years, doing research, information architecture, interaction design, and usability evaluation for a diverse array of clients like Medtronic, UnitedHealthcare, 3M, RBC Dain Rauscher, General Mills, Thomson Reuters, and the National Marrow Donor Program.
A recognized expert in rapid prototyping, Fred speaks frequently on the topic at national professional conferences and local user experience group meetings. In 2007, Fred developed the official training program for the Axure RP Pro rapid prototyping tool at the request of the makers. He has since expanded the training program at Evantage to include an additional Axure trainer, a course on prototyping for Business Analysts, and process integration consulting for companies interested in improving their software through prototyping.

Comments on this page are now closed.

Comments

Dave Scheirer
05/06/2010 7:07am PDT

Loved it, this was a true workshop. Wish 5 more people from my team could have participated.

Silverlight Showcase
Sponsors
  • Microsoft Corporation
  • .CO
  • Adobe Systems, Inc.
  • Ericsson
  • Germany Trade & Invest
  • IBM
  • Berlin Partner
  • blueKiwi
  • EffectiveUI
  • HP
  • Neustar, Inc.
  • OpenSRS
  • OpenText
  • PayPal
  • Pearltrees
  • The Planet
  • SOASTA

Rob Koziura
(415) 947-6111
rkoziura@techweb.com

Kaitlin Pike
(415) 947-6306
kpike@techweb.com

View a complete list of Web 2.0 Expo contacts.