The Right Way to Wireframe - A New Website for Lend4Health from SXSW
	Posted by Jordan Viator at Mar 14, 2010 04:16 PM CDT Categories: Accessibility, Content Management, NPtech, Technology, Usability

"Opening the kimono" and seeing the ins and outs of wireframing for web information architecture is something many of us never actually get to see. Seeing the "behind-the-scenes" work that goes into sketching, laying out and setting up the foundation for a web site is not well shared in the industry, but in the session "The Right Way to Wireframe" at this year's SXSWi, Todd Zaki Warfel and Russ Unger worked to change that.

For the layman web user or designer, you might be asking - why is wireframing important? Well, wireframing is the foundation of your web site, and thus one of the most important aspects any web site should focus on in the beginning stages of formation or redesign. Having worked on full-scale web designs, I was intrigued to see what some of the leaders in the industry had to say about wireframing and user research for web design -- an imperative aspect for nonprofits I might add as every organization should have a web site designed for optimal user experience and effectiveness.

The great part about the workshop was that the speakers worked with Lend4Health, a nonprofit focused on micro-loans for health issues and children, run by one woman (Tori Tuncan) out of her home to use as the focus for their work. Tori is currently using a BlogSpot, one page website. Tori knew she needed a more effective website and got paired up with a set of Information Architects/User Experience experts to help come up with ideas and wireframes of a new site for her nonprofit organization.  Oh, and they were concurrently competing with each other on how the others would approach the project and the tools they would use, not sharing an information with each other along the way.

The Goal: turn her website into multi-page, effective web site that would allow her to handle the volume of work that was coming her way.

This video shows one of the processes from start to end, looking at sketching to actual technical design (sans the first 10 seconds of the video).

All in all, the main elements the speakers harped on included:

• Any process always begins with RESEARCH! -->interviews, remote observation
• Research should be put into all aspects of your design and structure
• Sketching before using creating any final design or wireframe is crucial (dump all your ideas out on paper before embarking on any actual draft)
• Use persona- based roles when thinking about how people will interact with your web site
• You'll still begin to uncover new/different "stuff" as you begin to wireframe
• After you hand sketch out, then you can introduce the technology to help with the technical design (true wireframe)
• Pitch and Critique the work in front of a group of peers (iterate based on feedback)
• The technology you use for this work, the actual software for wireframing, isn't important. It's the communication of the elements you want to portray that's important.

And, one of my personal favorite quotes from the panel that I thought worthwhile to share"If you're not considering mobile on your site in 2010, what's wrong with you?"

The session was chock full of great information for anyone interested in gaining perspective on what goes into a user experience research and information architecture on the web. The presenters were able to show how they're working to "change the world through design" one day at a time.

So what about you? Are there any great tips you have for information architchture work? Or any questions you have about the work for the experts out there? 

Nickname
Date:
Your Website's URL:	Enter your Web site starting with http://, example http://www.connectioncafe.com
Your Comment:	(some HTML tags, such as <b>, <i>, <a>, are supported)
Enter this word:	Change For security purposes.