As a developer, I’m always interested in the roles that other disciplines play in the development process. One of Saturday’s more engaging panels was given by four User Experience designers. Russ Unger, Todd Zaki Warfel, Will Evans, and Fred Beecher, entitled "The Right Way to Wireframe".

Each of these four designers was given the same challenge for the same client. In this case, a nonprofit currently running a blog at lend4health.com is looking for a site redesign. All four of these UXers were asked to bring the project to the same point without communicating or sharing ideas. The best part of it is that they have been asked to use different tools and to document their entire process. The same panel of designers gave this presentation at IxDA10 (read more about the challenge in the IxDA site).

First, take a look at Gabby Hon's post about gathering data and requirements to begin the project.

Russ Unger

• Begin with research and requirements.
• Create Personas: Loan recipient, loan provider
• Create sitemap using Card sort and post-it notes. makes sitemap
• Next focus on user paths
• Sketch first, sketch early. This is still the fastest medium to explore ideas
• Wireframes arise out of user path sketching
• Russ used Balsamiq
• Bring visual designer on board

Todd Zaki Warfel

• It begins with research
• Interviews with stakeholders, remote observation
• Post it note card sort:1 data point on each post it note.
• Tell the story of the data with personnas
• Explore concepts early through sketching and visual exploration.
• Benchmark other sites and their features
• Pitch and critique with other team members: quick cycle with a time limit. many iterations
• Go straight from sketching to HTML prototypes
• First two rounds of HTML protos are grayscale, then bring in color and sexy design.

Fred Beecher

• UX designers are not making solutions, we're making hypotheses. Its about communication and experimentation.
• Start with business goals. Always ask what the user wants.
• Sketch user flow- pen and paper for quick revising and exploration.
• Axure for prototyping, allows interaction. Can be used for testing.
• Proof of Concept: prototype your most important interactive elements, run quick tests, revise, and retest.
• Comprehensive testing: Prototype against your test plan, everything that wasn't in your proof of concept.
• Make a report. It is helpful to recount the whole story to all team members.
• Visual design is not just a refinement, it is an opportunity to evolve.
• Communicate the process to the visual designer, but don't dictate.
• Let your designer take risks too.

Will Evans

• Start with a conceptual model where you consider every possible activity and interaction.
• Gather requirements in a group. Allow stakeholders to sketch and discuss what is important to them. This collaborative approach keeps any one stakeholder from have too much influence.
• Personas inquire and observe users where possible. Many times users do not tell the truth b/c they are embarassed.
• Sketch wireflows- basically storyboards of the web experience. Get inside the users's head and thing of how they want to accomplish a task.
• Sitemap and Wireframes: Iterate quickly. Don't spend too much time on any one sketch. Wireframes are tools for thinking and exploration of a problem.
• Will used Omnigraffe for this project

Some reference materials from Will's presentation:

PDF of concept map
Blog post on sketching
Blog post on wireframing