Lessons Learned While Integrating a New IA ToolAdopting a New Way of Creating Wireframes, Prototypes and Functional Specifications

Introductions

Chris Farnum, Senior Information Architect Tonya McCarley, Information Architect Josh Morse, Information Architect

We work on projects that are• Many shapes and sizes• For external clients• Interdisciplinary and collaborative• Full of rich interactions• Creative and, well… interesting…

Overview of Presentation

Choosing a Tool Introduction to Axure Project Examples

• Interactive wireframes for a large packaged goods manufacturer

• Prototyping and usability testing for a large banking site• Specifications for a social security assistance site

Summary & Looking Forward

Choosing a Tool (Something Wasn’t Quite Right)

Information Architects produce several key deliverables: Site Blueprints Flow diagrams Wireframes Prototypes Functional Specifications

Issues: Used several different tools during the process Resulted in an inconsistent process for producing deliverables Maintaining and revising was tedious

So we decided to look for new tools

One Tool to Rule Them All…

Our goal was to find a tool that would: Make it easier to create our own prototypes Help us create more consistent deliverables Let us create functional specifications more seamlessly Improve our efficiency and project process

Some popular IA tools

Visio MS Word

Pencil

A new generation of tools for Information Architects

What did we try?

We were using… Visio + Word, sometimes Excel

We tried…• Swipr and Intuitect as Visio add-ons to automate wireframing

• Adobe Fireworks and Swipr for prototyping

• None of the above addressed functional specifications

Challenges and Concerns

Enlighten had a long history of Visio use, and an abrupt shift for the whole team would not be easy:• IA team members were already engaged on projects

using Visio• Existing Visio stencils and templates• Most team members had become efficient with Visio• Word templates for specifications were already

adopted across departments

An Intersection of Axure Information

Prior to selection:• Engineering management conducted a functional assessment of

IA tools, including Axure.• One IA team member (Tonya) participated in a working group

focused on documentation and Axure at IA Summit 2008.• Another IA team member (Josh) explored Axure in a graduate

school class.

During the selection process we consulted others in the organization:• Engineering and QA• User Experience• Management

Why did we choose Axure?

Axure is designed to produce wireframes, prototypes, AND specifications

It offered several advantages for our workflow

It was affordable It has a growing user

community for exchanging info, stencils and tools

Cost

Functionality

Axure

iRise

Swipr

Taking the lead on Axure

For efficiency, one IA team member (Josh) took the lead in the adoption process• Reviewing training documentation and practiced

using Axure• Creating new stencils to replace those in Visio• Writing internal documentation on using Axure• Joining the active online Axure community• Using Axure on several small projects

The IA team met regularly to discuss goals and standards for Axure use

Axure Capabilities

Wireframe Tools• Similar to Visio, but with more

annotating capabilities Specification Generator

• Automatically generated from wireframes and annotations

Interactive HTML Prototypes• Functionality is added to wireframes

Wireframes – Opportunities and Challenges

Opportunities• Interactive wireframes were more intuitive for

planning a Flash user experience• Dynamic Panels in Axure make it easy for a

non-techie IA to illustrate interactions• Easy to output to both HTML and Word.

Challenges• Need to decide how much interactivity is

needed• Limited drawing tools compared to other

tools• Might need separate versions of the

wireframes for documentation

Axure Example: CPG Product Micro site

Hair care and styling division of an international consumer packaged goods company

Microsite and media campaign for a new line of products

Focus on consumer education Information Architect’s goals

• Provide wireframes and “just enough” requirements for the internal project team

• Wireframes should Communicate interactivity Document team decisions

CPG Product Microsite: What We Did

Flash site included an interactive salon, animated product demos, videos, music playlists via Rhapsody

IA• Created wireframes with interactive

elements and working navigation• Revised with internal feedback• Handed off the wireframes as a

guide to design, creative and engineering

Later adapted wireframes for an expandable banner ad

Sample wireframe in a Word doc

CPG Product Microsite: Lessons Learned

Wireframes were VERY well received by the internal team

IA had positive influence on interaction design

Even with the learning curve, wireframes were done quickly and shared easily

Issues:• Need to decide how much interactivity

is needed to communicate an idea• Limited drawing tools compared to

other solutions• Might need separate versions of the

wireframes for functional spec documentation

Prototyping – Opportunities and Challenges

Opportunities• Validate the effectiveness of the

new tool for Usability testing needs• IA creates the interactive prototype

rather than Engineering• Increase collaboration opportunities

between IA and design

Challenges• Working in parallel to meet

engineering needs and manage the usability testing process

• Learning a new tool in the middle of an established project

Axure Example: Central Bancompany (CBC)

Large Midwest financial holding company

• 16 separate properties Incorporation and execution of a new

content management system (CMS) Unified look and nomenclature across

all sites

Usability Testing assignment:• Test Missouri bank users• Create an interactive prototype

Evaluate response to new look and structure

Validate appropriateness of nomenclature

CBC: What we did

We recruited and tested 11 small business owners in Missouri

• The testing location was a Marketing Research firm in St. Louis

Camtasia software captured and recorded each test

Axure was used to create the interactive prototype

• High-level prototype• Created with design comps imported

to Axure• Required no coding

CBC Lessons Learned

Axure made it possible to create a polished, interactive prototype quickly• Users did not “know” they were

not looking at HTML pages Adopting a new application mid-project

is challenging• Using Visio and Axure to satisfy

separate deliverable needs

Specification Generation – Opportunities and Challenges

Opportunities• Quick and easy generation• Multiple people can share Axure project files

Challenges• Document is very table driven – not a lot of

freedom for additional notes.• Specification must be re-generated when

changes are made in Axure Tracking changes is difficult

• Items are only ordered at a page level Items cannot be easily grouped by

column or panel

Axure Example: SSDC Services

Small site with mainly static content. A few HTML forms. A dynamic questionnaire with somewhat

complicated branching logic. Site used a Content Management System (CMS)

We produced• Wireframes for the CMS page templates• A prototype of the questionnaire• A document with both CMS and functional

specifications

SSDC Services Specifications: What we did

The functional specifications for SSDC were done through Axure, and included

• Technical specifications for the CMS• Analytics specifications

Challenge: Only IAs have Axure licenses• Updates funneled through the IA• Used the Word template to store non-

page-specific information

Challenge: Widgets are listed horizontally• Multi-column pages cause trouble for QA

members• IA renumbered footnotes on select pages

SSDC Lessons Learned

Develop alternative formatting standards that take advantage of Axure

• Find a balance of effort between IAs and other teams using specifications.

Work closely with the people that will be using your specifications to ensure that they are easy to read and use.

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.

Lessons Learned From the Adoption Process

During the adoption process, maintain regular communication with representatives from internal teams, not just the IA team.• Make sure to discuss details as well as high-level issues.

Evaluate your process along with the new technology• Technology changes may require process changes that affect

many people. People will be uncomfortable; try to keep them informed and bring

them into the adoption process.

Summary and Looking Forward

We are still in an integration process• We are still learning and building out our stencil/widget library• Continue the functional specification discussion• Axure has not been tested on a large CMS-driven project

Reliance on Visio/Word documentation Multiple Authors across departments

• Wider adoption of Axure is under consideration Engineering, Analytics, and QA

And we are continuing to evaluate potential solutions

Thank you for your time!

Any questions?

Contact UsChris Farnum cfarnum@enlighten.comTonya McCarley tmccarley@enlighten.comJosh Morse jmorse@enlighten.com

EnlightenInteractive Marketing | Web Development | Strategic Consulting

Ann Arbor, Michigan | www.enlighten.com