TUG Talk: Prototypes & Wireframes Workshop

Summary: Grant Carmichael and Jessie DuVerneay shared their favorite tools at an IxDA / Ladies That UX joint workshop focusing on prototypes and wireframes.

Grand Rapids TUG team members Grant Carmichael and Jessie DuVerneay shared their favorite prototyping tools and approaches at the local Grand Rapids IxDA and Ladies That UX joint June 2015 workshop focusing on prototypes and wireframes.

Grant demonstrated the popular prototyping tool Omnigraffle, and Jessie discussed a TUG favorite:  large analog wireframes. They each had ten minutes to present their ideas to the crowd, and then attendees asked questions about the methods Jessie and Grant shared.

Omnigraffle: Macro & Micro

We at TUG are fond of emphasizing that you need to define the “what” before you start working on the “how” and the importance of connecting what was discovered in research and making sure it carries through to the definition of a digital place. Omnigraffle is one of Grant’s favorite tools. It has an engaging usefulness that can span your entire project—from showing the big picture by modeling your insights into quick visualizations that radiate findings to your team and stakeholders, to defining the wireframes and light prototypes of the user interface without the heft and complexity of many other tools. Grant walked through several of his models–experience maps, task-flow charts, mental models, wireframes–to highlight tips, pros, and even some cons of using Omnigraffle.

Slide Deck:

The Flexibility of Omnigraffle…Macro and Micro from Grant Carmichael

Large, Low-Fidelity Analog Wireframes

Instead of focusing on a specific prototyping tool, Jessie chose to share TUG’s successful approach of using large paper wireframes with minimal information to share the first look into a site’s re-imagined structural design with clients.

If we use McLuhan’s “Medium is the Message” as a central ideological framework for framing how we might first show our digital places to clients, using large, low fidelity paper wireframes helps clients understand that what we are working on is a sketch, not their actual website. This helps clients think about the “placeness” of their site and the environment they are creating for their visitors, while not getting bogged down in concrete design or language details.

This approach encourages teams to “play” together and collaboratively edit the large wireframes after walking through them as a user might “walk” through a website in real use. The team also has the opportunity for building consensus and an increased shared understanding on forward direction.

Please see the slides for more details on how to use large paper wireframes with clients, and pros and cons of using large, low-fidelity wireframes.

Slide Deck: