IxD10 Day 0: The Right Way to Wireframe
The main reason I came to IxD10 was the workshop titled, “The Right Way to Wireframe,” given by Fred Beecher, Russ Unger, Todd Zaki Warfel, and Will Evans.
On the agenda was to break into groups based on our interest in a tool (OmniGraffle, Balsamiq, Fireworks and Axure), and starting from a requirements document and personas, to design a website to facilitate microloans for families and children with autism spectrum disorder.
The gotcha is that there IS no right way to wireframe, and we were showing that it wasn’t so much the tool, but some of the techniques that you use during the process — more on that later.
The foundation of user-centered design is research and the resulting personas, which Fred explained to the workgroup:
Todd Zaki Warfel also explained the concept of design studio to the group, which for me, was a fairly new concept. I’d originally read about it in his book about prototyping.
Common in architecture and other design programs, design studio is a highly iterative activity in which you essentially brainstorm a ton of possible ideas, and then use a peer critique system to distill good ideas and get rid of bad ideas. The benefit of design studio is that you obviously will explore a larger set of the solution space, and you end up with sort of a genetic improvement of designs very quickly.
Todd gave us some pointers about sketching, about how you don’t need to draw to sketch, and to not go into too much detail. He was also an awesome drill sergeant, keeping everyone on time and general butt-kicking :)
Our first task was to not talk to anyone at our table, and within the span of a couple minutes, brainstorm and produce as many low-fi sketches on an 8-up wireframe template as possible. It didn’t matter if they were good, accurate, or even detailed. The idea was to get as many ideas as possible out.
Once our time was up, we started the critique portion of the studio. We put out 8-ups on the wall and spent a couple minutes each explaining each thumbnail and our reasoning for it. Once we were done explaining, everyone in the group was supposed to offer a couple things they liked and a couple things they didn’t like about the thumbnails. Keep the good stuff, leave the bad stuff. Rapid iterative improvement.
Once we’ve chosen the better designs to use in the website, we increased the level of detail that we were working in. We split our table into a group of three, with each group working on a separate section of the website: Homepage, Loan search results, and Loan detail. Since we’re working at a slightly more detailed level, we switched to 1-up templates, which gave us a bit more breathing room on the page.
This also required a level of coordination between our subgroups to make sure we had things like consistent branding, navigation, etc. Mirroring the increased level of detail, we then also switched to presenting to other teams, with the same process as before. Present the design, and critique.
At this point we were allowed to steal good ideas from other teams >:)
Once the cross-team design critiques were finished, we regrouped, and increased our level of detail yet again. We were now ready to begin prototyping, but we still had to think about things like exact content and wording of page components. By treating pieces of the page as a component, you can do things like break that component into a difference page and use an increased level of detail. Tools like Axure also let you create widgets (called masters, I believe), which let you edit a piece of a page as a template, and you can repeat that component throughout the site. The benefit is that you can update the component in one place, and every instance of that component will change as well.
Then, we presented our prototypes to the entire workshop group. And, as before, we used the design studio process of critique to improve the designs. It was very interesting and enlightening to see the range of designs that the final prototypes had.
Finally, Todd, Russ, Fred and Will all presented about their individual design process and had cool time-lapse videos of them prototyping.
Todd’s Video, Russ’s Video, Will’s Video
Fred presenting some sketches:
In all, I left the workshop very pleased, along with a bunch of takeaways, most notably the idea of design studio. Why limit yourself to the first thing that pops into your head, when you can spend some time to screw up on paper, when it’s cheaper? Why limit yourself to a crappy design, or something that doesn’t even solve the problem you’re trying to solve? This all seems like a no-brainer in my opinion.
Touching back on my comment earlier on process, was that there is no general design process that you can follow that will always guarantee success. Someone brought up process and Will Evans spoke about agencies that sell a process, and the fallacy that if a process is successful, and it’s repeatable, then the success is repeatable. “I think it’s bullshit,” he quipped. The lesson: use the appropriate tools and methods for the situation and context.
I’ll have to agree with what Will Sansbury said, that the workshop was worth the cost of the entire conference.
