The Right Way to Wireframe

Presenters

Russ Unger, Will Evans, Fred Beecher, Todd Zaki Warfel

Workshop

Background
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.

Description
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. Participants will be separated into four different groups based on their preferred wireframing tool: paper, Visio, OmniGraffle, or Axure. 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 turn their sketches into wireframes using the tool of their choice.  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
15 minutes: Break
30 minutes: Individuals use the tool of their choice to create a solution
30 minutes: Pitching & critique within the group, selecting the best to use for a collaborative (re)design
30 minutes: Groups collaborate to create a concept using their method & tool
45 minutes: Groups present their solutions
40 minutes: Each workshop leader shows how they solved the problem

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.

Biography

Russ Unger

Russ Unger is the Director of Experience Planning for Draftfcb, the largest advertising/marketing agency in the Midwest. Russ has been working on websites since 1993 – when there was only Notepad to code with and Mosaic was the only browser around. That was when he found his interest in User Experience Design and Information Architecture began to flourish.

Since then, he has worked with a number of major brands, including Gatorade, Propel, Quaker and Celebrity Cruise Lines, as well as on large scale Intranet and Extranet applications for such companies as Volkswagen Credit, Audi Financial Services, Information Resources, Inc. and Marsh. He has been involved in the Information Architecture for large-scale public-facing sites for such companies as Metromix, Oprah.com, United Airlines and Hewlett-Packard. He has also worked off-line, creating unique biometric (fingerprint reader) applications and has worked as the Design Lead for Motorola’s Connectivity domain where he was responsible for creating user interfaces for mobile applications in Motorola’s Consumer Experience Design group. Russ worked closely with such major carriers as T-Mobile, Cingular/AT&T and Vodafone to design features for Bluetooth, WiFi and over-the-air updates. He has also taught courses in Web and Interactive/Flash Design.

In his spare time, he is an author and editor for Boxes and Arrows, a well-known online Information Architecture magazine. In addition to being a mentor for the Information Architecture Institute, Russ also serves on the 2200+ member organization’s Board of Directors as the Director of Events and Marketing. As if that is not enough, he tries to actively blog on topics in User Experience Design at UserGlue UserBlog.

Russ is co-author of the book A Project Guide to User Experience Design with Carolyn Chandler for Peachpit Press (Voices That Matter).

Todd Zaki Warfel

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 will discuss 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. Anticipated publication is in 2009.

Will Evans

Will Evans is founder and Principal User Experience Architect for Semantic Foundry with 14 years industry experience in information architecture and user experience design. His experiences includes directing user experience design and information architecture for AIR Worldwide, UX Architect for web 2.0 social networking site Gather.com; and UX Architect responsible for information architecture and interaction design for Kayak.com. Before Kayak, he was the senior information architect at IBM working on their enterprise learning management platform. Before IBM, he worked at Curl – a DARPA-funded MIT project when he was at the MIT Laboratory for Computer Science. Most recently Will has lead design projects for Pillsbury, General Mills, HiveFire and CrowdSprout.

A distinguished speaker, Will provides lectures and seminars on such topics as user experience, strategic design, social interaction design, and findability. Will’s work has been featured in numerous publications including Business Week, The Economist, Fortune, MSNBC and the Wall Street Journal.

Fred Beecher

Fred Beecher is a Senior User Experience Consultant at Evantage Consulting in Minneapolis. Fred has been working in the user experience design industry for 11 year, 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 trained additional consultants to give the courses and currently leads a broader Axure training program for Evantage.

Fred and the rest of the Evantage user experience consultants blog on all things UX at userexperience.evantageconsulting.com.