IUE2009 - Lessons Learned While Integrating a New IA Tool


Published on

Presented by Josh Morse, Tonya McCarley, and Chris Farnum on April 2nd, 2009 at the IUE2009 Conference in Ann Arbor.

Finding the right tool for the job of constructing wireframes and specifications has been a longtime challenge for User Experience professionals. The longtime standby combination of Visio, Word, and Excel has prompted many to ask "is there a better way?" In recent years, a new generation of tools has emerged that promises improved productivity and integration for IAs. But there are costs to making changes to the established methodologies in our organizations. At Enlighten, the Information Architecture (IA) team recently transitioned from a work flow based on Microsoft Word and Visio to one based on Axure RP. In this presentation we will discuss the issues we considered while making the switch, three examples of projects that Axure made a difference for, and finally some of the issues we encountered and the challenges still facing us.

Published in: Technology, Business
1 Comment
  • hi, we developed a solution to add comments from registered users to an Axure prototype
    It might interesting you
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

IUE2009 - Lessons Learned While Integrating a New IA Tool

  1. 1. Lessons Learned While Integrating a New IA Tool Adopting a New Way of Creating Wireframes, Prototypes and Functional Specifications
  2. 2. Introductions <ul><li>Chris Farnum, Senior Information Architect </li></ul><ul><li>Tonya McCarley, Information Architect </li></ul><ul><li>Josh Morse, Information Architect </li></ul><ul><li>We work on projects that are </li></ul><ul><ul><li>Many shapes and sizes </li></ul></ul><ul><ul><li>For external clients </li></ul></ul><ul><ul><li>Interdisciplinary and collaborative </li></ul></ul><ul><ul><li>Full of rich interactions </li></ul></ul><ul><ul><li>Creative and, well… interesting … </li></ul></ul>
  3. 3. Overview of Presentation <ul><li>Choosing a Tool </li></ul><ul><li>Introduction to Axure </li></ul><ul><li>Project Examples </li></ul><ul><ul><li>Interactive wireframes for a large packaged goods manufacturer </li></ul></ul><ul><ul><li>Prototyping and usability testing for a large banking site </li></ul></ul><ul><ul><li>Specifications for a social security assistance site </li></ul></ul><ul><li>Summary & Looking Forward </li></ul>
  4. 4. Choosing a Tool (Something Wasn’t Quite Right) <ul><li>Information Architects produce several key deliverables: </li></ul><ul><li>Site Blueprints </li></ul><ul><li>Flow diagrams </li></ul><ul><li>Wireframes </li></ul><ul><li>Prototypes </li></ul><ul><li>Functional Specifications </li></ul><ul><li>Issues: </li></ul><ul><li>Used several different tools during the process </li></ul><ul><li>Resulted in an inconsistent process for producing deliverables </li></ul><ul><li>Maintaining and revising was tedious </li></ul><ul><li>So we decided to look for new tools </li></ul>
  5. 5. One Tool to Rule Them All… <ul><li>Our goal was to find a tool that would: </li></ul><ul><li>Make it easier to create our own prototypes </li></ul><ul><li>Help us create more consistent deliverables </li></ul><ul><li>Let us create functional specifications more seamlessly </li></ul><ul><li>Improve our efficiency and project process </li></ul>
  6. 6. Some popular IA tools Visio MS Word Pencil
  7. 7. A new generation of tools for Information Architects
  8. 8. What did we try? <ul><li>We were using… Visio + Word, sometimes Excel </li></ul><ul><li>We tried… </li></ul><ul><ul><li>Swipr and Intuitect as Visio add-ons to automate wireframing </li></ul></ul><ul><ul><li>Adobe Fireworks and Swipr for prototyping </li></ul></ul><ul><ul><li>None of the above addressed functional specifications </li></ul></ul>
  9. 9. Challenges and Concerns <ul><li>Enlighten had a long history of Visio use, and an abrupt shift for the whole team would not be easy: </li></ul><ul><ul><li>IA team members were already engaged on projects using Visio </li></ul></ul><ul><ul><li>Existing Visio stencils and templates </li></ul></ul><ul><ul><li>Most team members had become efficient with Visio </li></ul></ul><ul><ul><li>Word templates for specifications were already adopted across departments </li></ul></ul>
  10. 10. An Intersection of Axure Information <ul><li>Prior to selection: </li></ul><ul><ul><li>Engineering management conducted a functional assessment of IA tools, including Axure. </li></ul></ul><ul><ul><li>One IA team member (Tonya) participated in a working group focused on documentation and Axure at IA Summit 2008. </li></ul></ul><ul><ul><li>Another IA team member (Josh) explored Axure in a graduate school class. </li></ul></ul><ul><li>During the selection process we consulted others in the organization: </li></ul><ul><ul><li>Engineering and QA </li></ul></ul><ul><ul><li>User Experience </li></ul></ul><ul><ul><li>Management </li></ul></ul>
  11. 11. Why did we choose Axure? <ul><li>Axure is designed to produce wireframes, prototypes, AND specifications </li></ul><ul><li>It offered several advantages for our workflow </li></ul><ul><li>It was affordable </li></ul><ul><li>It has a growing user community for exchanging info, stencils and tools </li></ul>Cost Functionality Axure iRise Swipr
  12. 12. Taking the lead on Axure <ul><li>For efficiency, one IA team member (Josh) took the lead in the adoption process </li></ul><ul><ul><li>Reviewing training documentation and practiced using Axure </li></ul></ul><ul><ul><li>Creating new stencils to replace those in Visio </li></ul></ul><ul><ul><li>Writing internal documentation on using Axure </li></ul></ul><ul><ul><li>Joining the active online Axure community </li></ul></ul><ul><ul><li>Using Axure on several small projects </li></ul></ul><ul><li>The IA team met regularly to discuss goals and standards for Axure use </li></ul>
  13. 13. Axure Capabilities <ul><li>Wireframe Tools </li></ul><ul><ul><li>Similar to Visio, but with more annotating capabilities </li></ul></ul><ul><li>Specification Generator </li></ul><ul><ul><li>Automatically generated from wireframes and annotations </li></ul></ul><ul><li>Interactive HTML Prototypes </li></ul><ul><ul><li>Functionality is added to wireframes </li></ul></ul>
  14. 14. Wireframes – Opportunities and Challenges <ul><li>Opportunities </li></ul><ul><ul><li>Interactive wireframes were more intuitive for planning a Flash user experience </li></ul></ul><ul><ul><li>Dynamic Panels in Axure make it easy for a non-techie IA to illustrate interactions </li></ul></ul><ul><ul><li>Easy to output to both HTML and Word. </li></ul></ul><ul><li>Challenges </li></ul><ul><ul><li>Need to decide how much interactivity is needed </li></ul></ul><ul><ul><li>Limited drawing tools compared to other tools </li></ul></ul><ul><ul><li>Might need separate versions of the wireframes for documentation </li></ul></ul>
  15. 15. Axure Example: CPG Product Micro site <ul><li>Hair care and styling division of an international consumer packaged goods company </li></ul><ul><li>Microsite and media campaign for a new line of products </li></ul><ul><li>Focus on consumer education </li></ul><ul><li>Information Architect’s goals </li></ul><ul><ul><li>Provide wireframes and “just enough” requirements for the internal project team </li></ul></ul><ul><ul><li>Wireframes should </li></ul></ul><ul><ul><ul><li>Communicate interactivity </li></ul></ul></ul><ul><ul><ul><li>Document team decisions </li></ul></ul></ul>
  16. 16. CPG Product Microsite: What We Did <ul><li>Flash site included an interactive salon, animated product demos, videos, music playlists via Rhapsody </li></ul><ul><li>IA </li></ul><ul><ul><li>Created wireframes with interactive elements and working navigation </li></ul></ul><ul><ul><li>Revised with internal feedback </li></ul></ul><ul><ul><li>Handed off the wireframes as a guide to design, creative and engineering </li></ul></ul><ul><li>Later adapted wireframes for an expandable banner ad </li></ul>Sample wireframe in a Word doc
  17. 17. CPG Product Microsite: Lessons Learned <ul><li>Wireframes were VERY well received by the internal team </li></ul><ul><li>IA had positive influence on interaction design </li></ul><ul><li>Even with the learning curve, wireframes were done quickly and shared easily </li></ul><ul><li>Issues: </li></ul><ul><ul><li>Need to decide how much interactivity is needed to communicate an idea </li></ul></ul><ul><ul><li>Limited drawing tools compared to other solutions </li></ul></ul><ul><ul><li>Might need separate versions of the wireframes for functional spec documentation </li></ul></ul>
  18. 18. Prototyping – Opportunities and Challenges <ul><li>Opportunities </li></ul><ul><ul><li>Validate the effectiveness of the new tool for Usability testing needs </li></ul></ul><ul><ul><li>IA creates the interactive prototype rather than Engineering </li></ul></ul><ul><ul><li>Increase collaboration opportunities between IA and design </li></ul></ul><ul><li>Challenges </li></ul><ul><ul><li>Working in parallel to meet engineering needs and manage the usability testing process </li></ul></ul><ul><ul><li>Learning a new tool in the middle of an established project </li></ul></ul>
  19. 19. Axure Example: Central Bancompany (CBC) <ul><li>Large Midwest financial holding company </li></ul><ul><ul><li>16 separate properties </li></ul></ul><ul><li>Incorporation and execution of a new content management system (CMS) </li></ul><ul><li>Unified look and nomenclature across all sites </li></ul><ul><li>Usability Testing assignment: </li></ul><ul><ul><li>Test Missouri bank users </li></ul></ul><ul><ul><li>Create an interactive prototype </li></ul></ul><ul><ul><ul><li>Evaluate response to new look and structure </li></ul></ul></ul><ul><ul><ul><li>Validate appropriateness of nomenclature </li></ul></ul></ul>
  20. 20. CBC: What we did <ul><li>We recruited and tested 11 small business owners in Missouri </li></ul><ul><ul><li>The testing location was a Marketing Research firm in St. Louis </li></ul></ul><ul><li>Camtasia software captured and recorded each test </li></ul><ul><li>Axure was used to create the interactive prototype </li></ul><ul><ul><li>High-level prototype </li></ul></ul><ul><ul><li>Created with design comps imported to Axure </li></ul></ul><ul><ul><li>Required no coding </li></ul></ul>
  21. 21. CBC Lessons Learned <ul><li>Axure made it possible to create a polished, interactive prototype quickly </li></ul><ul><ul><li>Users did not “know” they were not looking at HTML pages </li></ul></ul><ul><li>Adopting a new application mid-project is challenging </li></ul><ul><ul><li>Using Visio and Axure to satisfy separate deliverable needs </li></ul></ul>
  22. 22. Specification Generation – Opportunities and Challenges <ul><li>Opportunities </li></ul><ul><ul><li>Quick and easy generation </li></ul></ul><ul><ul><li>Multiple people can share Axure project files </li></ul></ul><ul><li>Challenges </li></ul><ul><ul><li>Document is very table driven – not a lot of freedom for additional notes. </li></ul></ul><ul><ul><li>Specification must be re-generated when changes are made in Axure </li></ul></ul><ul><ul><ul><li>Tracking changes is difficult </li></ul></ul></ul><ul><ul><li>Items are only ordered at a page level </li></ul></ul><ul><ul><ul><li>Items cannot be easily grouped by column or panel </li></ul></ul></ul>
  23. 23. Axure Example: SSDC Services <ul><li>Small site with mainly static content. </li></ul><ul><li>A few HTML forms. </li></ul><ul><li>A dynamic questionnaire with somewhat complicated branching logic. </li></ul><ul><li>Site used a Content Management System (CMS) </li></ul><ul><li>We produced </li></ul><ul><ul><li>Wireframes for the CMS page templates </li></ul></ul><ul><ul><li>A prototype of the questionnaire </li></ul></ul><ul><ul><li>A document with both CMS and functional specifications </li></ul></ul>
  24. 24. SSDC Services Specifications: What we did <ul><li>The functional specifications for SSDC were done through Axure, and included </li></ul><ul><ul><li>Technical specifications for the CMS </li></ul></ul><ul><ul><li>Analytics specifications </li></ul></ul><ul><li>Challenge : Only IAs have Axure licenses </li></ul><ul><ul><li>Updates funneled through the IA </li></ul></ul><ul><ul><li>Used the Word template to store non-page-specific information </li></ul></ul><ul><li>Challenge : Widgets are listed horizontally </li></ul><ul><ul><li>Multi-column pages cause trouble for QA members </li></ul></ul><ul><ul><li>IA renumbered footnotes on select pages </li></ul></ul>
  25. 25. SSDC Lessons Learned <ul><li>Develop alternative formatting standards that take advantage of Axure </li></ul><ul><ul><li>Find a balance of effort between IAs and other teams using specifications. </li></ul></ul><ul><li>Work closely with the people that will be using your specifications to ensure that they are easy to read and use. </li></ul><ul><li>Axure can easily become the central repository for documentation on a project, which can make more work for the IA if only he has a license. </li></ul>
  26. 26. Lessons Learned From the Adoption Process <ul><li>During the adoption process, maintain regular communication with representatives from internal teams, not just the IA team. </li></ul><ul><ul><li>Make sure to discuss details as well as high-level issues. </li></ul></ul><ul><li>Evaluate your process along with the new technology </li></ul><ul><ul><li>Technology changes may require process changes that affect many people. </li></ul></ul><ul><li>People will be uncomfortable; try to keep them informed and bring them into the adoption process. </li></ul>
  27. 27. Summary and Looking Forward <ul><li>We are still in an integration process </li></ul><ul><ul><li>We are still learning and building out our stencil/widget library </li></ul></ul><ul><ul><li>Continue the functional specification discussion </li></ul></ul><ul><ul><li>Axure has not been tested on a large CMS-driven project </li></ul></ul><ul><ul><ul><li>Reliance on Visio/Word documentation </li></ul></ul></ul><ul><ul><ul><li>Multiple Authors across departments </li></ul></ul></ul><ul><ul><li>Wider adoption of Axure is under consideration </li></ul></ul><ul><ul><ul><li>Engineering, Analytics, and QA </li></ul></ul></ul><ul><li>And we are continuing to evaluate potential solutions </li></ul>
  28. 28. Thank you for your time! <ul><li>Any questions? </li></ul><ul><li>Contact Us </li></ul><ul><li>Chris Farnum [email_address] </li></ul><ul><li>Tonya McCarley [email_address] </li></ul><ul><li>Josh Morse [email_address] </li></ul><ul><ul><ul><li>Enlighten Interactive Marketing | Web Development | Strategic Consulting </li></ul></ul></ul><ul><ul><ul><li>Ann Arbor, Michigan | www.enlighten.com </li></ul></ul></ul>