Lessons Learned While Integrating a New IA Tool Adopting 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 …

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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

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 Us Chris Farnum [email_address] Tonya McCarley [email_address] Josh Morse [email_address] Enlighten Interactive Marketing | Web Development | Strategic Consulting Ann Arbor, Michigan | www.enlighten.com

Any questions?

Contact Us

Chris Farnum [email_address]

Tonya McCarley [email_address]

Josh Morse [email_address]

Enlighten Interactive Marketing | Web Development | Strategic Consulting

Ann Arbor, Michigan | www.enlighten.com