Letting go of perfection: Developing IA agility

Letting go of perfection: Developing IA agilityIA Summit 2011

Denver, Colorado

Chris Farnum, Joanna Markel, Serena Rosenhan

Background – UX at ProQuest Build search applications for academic and

corporate users Translate business requirements into user

experiences that can be implemented by development

Sit within development group Have shifted from traditional (waterfall) to agile

development processes Work on large scale agile projects

Global Multi-year

IA - Traditional development cycle

Business Case

Functional Design (prototyping, JADs usability testing )

Technical Design

Business requirements

Functional requirements

Design documents

Implementation

Test

Release

IAprocesses

IA - Agile development

Prioritized requirements

Design

Develop/Test

Iteration release Productrelease

Planning

Core IAProcesses

Agile challenges traditional IA value proposition

Working in Waterfall

Define site/application systems (navigation & labeling, metaphors etc.), resulting in a comprehensive and scalable user experience

Use upfront research to inform designs

Provide detailed and elegant deliverables to developers

Save money and development effort by reworking and testing designs before one line of code is written

Working in Agile

Can only design for known requirements.

Cannot do all research up front.

Smaller deliverables produced much more frequently

Coding begins before design is finished – inevitably has to be re-worked.

How can IAs be successful in agile?

Let’s try a quick exercise!

Agile development exercise

Make a paper airplane

Requirements: Must be made out of paper Must fly 5 feet before dipping Must fly straight Must have IA summit logo Must have stripes on wings


Mini-development cycle Three 45 second builds “Story cards” for each build will appear on screen

Team A – left side Team B – right side

Pairing is optional

* Plane patterns adapted from www.funpaperairplanes.com

http://www.funpaperairplanes.com/

Agile development exercise – Build 1

Team A Team B

Position logo and apply stripes

• Position the paper with the lines showing.

• Draw IA logo between folds 4 and 5 to the right of center.

• Color in 5 stripes between folds 1 and 2 on each side.

Make a 3 fold plane

• Position the paper with the lines face down.

• Fold the paper in half along fold 4 (so lines show).

• Re open the paper (lines down).

• Fold top corners in to the center fold and crease along line 1.

• Fold angled edges in to center fold and crease along line 2.

• Fold in half again along line 4.




Design A Design B

X X

X

X

X


Team A Team B

Make wings and nose of the plane

• Fold the paper in half along fold 4 (so lines show).

• Re open the paper (lines down).

• Take top corners to center and crease along line 1.

• Take folded edge to center and crease along line 2 on both sides

• Make fold 3 (fold the nose toward you).

Make 5 fold plane

• Open plane along fold 4 and place with lines face down.

• Make fold 3 (fold the nose toward you).

• Refold in half along line 4.

• Fold both wings down along line 5.




Design A Design B

X X

X

X

X

X


Team A Team B

Make the launch handle and put tips on the wings

• Fold in half again along line 4. (lines 5 & 6 will be visible)

• Fold both wings down along line 5.

• Make fold 6 (fold tips up).

Position the logo and apply stripes

• Draw IA logo between folds 4 and 5 on the right side of the plane.

• Color in 5 stripes on the top of each wing.

• Make fold 6 (fold tips up).




Design A Design B

X X

X X

X X

X X

X X

Plane patterns adapted from www.funpaperairplanes.com

http://www.funpaperairplanes.com/

How can IAs be successful in agile?

Let go of old ideas of perfection and . . .

Change how you think

Change how you work


Understand the opportunities for IA in Agile

You can design iteratively

• Freedom to make mistakes earlier

• Working prototypes for testing come early

Want-to-have vs. need-to-have

How do I know the difference?

• Prioritize requirements• User personas and use case

scenarios• “What’s the simplest thing that

could work?”• Remember that it’s a moving

target



Increment your way to perfection

Think just enough, just in time

• Additional features ≠ better.

• Elaborate designs do not always create the perfect UX.

• Iterations provide room to make incremental progress


It’s okay to refactor your design… really.

Good IA stands the test of time

…but you don’t have only one try to get there.

Expect that your designs and resulting code will be refactored.

Let go of previous attempts.

Change how you work

Pyramid example courtesy of John Mayo-Smith, Two Ways To Build A Pyramid, InformationWeek, 22 Oct 2001http://www.informationweek.com/news/development/tools/showArticle.jhtml?articleID=6507351

Goal = A pyramid for the Pharaohs tomb

An example…

Change how you work

Approach 1 – Build the foundation


Change how you work

Approach 2 – Build up the pyramid


Change how you work

Search saved article full text

Auto-fill search box

Search saved article titles

Add/edit notes

Share notes and ratings with others

Ratings

Create a personal account

Customize colors and

layout

Change password

Email a link to an article.

Email multiple articles

Attach the whole article

as a PDF

Add / delete articles to a

list

Save articles to folders

Place in multiple folders

General requirement: Users must be able to save and organize articles they find on your site into a personal account space.

Ability to find saved articles

Allow users to add notes

Create a personal account

Business Requirements

Ability to email articles

Ability to save articles

Change how you work

Basic Functions

Enhancements

Embellishm

ents

Back to the pyramid

Change how you work

Add/edit notes


Ratings

Register for a personal account


layout

Change password

Basic Functions

Enhancements

Embellishments

It’s tempting to build requirements vertically...


Personal account


Email a link to an article



as a PDF


list


Edit, Move, Rename Folders







Change how you work


Ratings



layout

Change password

Basic Functions

Enhancements

Embellishments

Good layering creates a fully functional system more quickly.


Personal account





as a PDF


list









Add/edit notes

Change how you work


Ratings



layout

Change password

Basic Functions

Enhancements

Embellishments

Starting basic is also important at the next level of granularity.


Personal account





as a PDF


list









Add/edit notes

Change how you work

1st layer – Saved list of articles

Layered design example

Change how you work

2nd layer – Add navigation, article details, sorting

Layered design example

Change how you work

Personas Use cases Sketches Wireframes User stories Process flow Prototypes

-and- Ad hoc – what the project needs now.

Many of these are familiar, but how youproduce them may change.

Change how you work

The Agile Manifesto“Working software over comprehensive documentation”

Austin Govella“There’s a dangerous, anti-deliverable meme lurking about that damages good teams.”

Anders Ramsay“UX designers continue to struggle with letting go of the deliverables mentality, the idea of UX being one of creating pretty-looking design artifacts before starting to create software.”

Deliverables– think lightweight!

Change how you work

Try using “dirty deliverables” for some situations.

A basic site map – post its on butcher paper (courtesy of FatDUX)

Change how you work

Title: Article list view

User statement: As a researcher, I want to see a list of articles that I have selected during my session.

Acceptance criteria:

1. The page appears as in the wireframes.

2. The titles of all articles the user has selected during the session are listed in alphabetical order.

3. The articles are numbered.

4. Each article can be deleted from the list.

Wireframes: http://www.mywireframelink.com

Owners:

JMarkel – IA

JJones - DEV

SSmith – QA

Related Stories:1287 Link to article list from utility nav.

History/notes:

1. 1 Apr 2011, JMarkel - Story created

User stories – keep them short and precise. Link to details

Change how you work

FIG 2: My Saved Articles FIG 2 Notes:

1. Page title2. Count of all items in the list.

• Increments as items added• Decrements as items deleted

3. Link back to last set of search results

4. Sort options:• By date added – reverse chron• By date published – reverse

chron• Alphabetical by title

5. Checkbox to select all items in the list• Checking selects all items• Unchecking deselects all items

6.Articles. Each item includes:• Checkbox• Number in list• Citation – in same style as in

search results• Date added – DD Mon YYYY

12

34

5

6

Wireframes work well side by side with annotations

Change how you work

Choose a wireframe style that suits your task, team.

Try mashing up screen clips with drawings. Highlight what’s important.

Try low-fi greyscale wireframes.

Conclusion

Do you really have to let go of perfection to be Agile?

It’s not about perfect deliverables, it’s about working toward a highly usable product.

It’s a goal, not an end-state.

It’s a lesson we’re all still learning.

Bye

Questions?

Contact info:[email protected]

[email protected]

[email protected]

Slidesharehttp://www.slideshare.net/ChrisFarnum/letting-go-of-perfection-

developing-ia-agility

Special thanks to Carissa Demetris!without whose Agile know-how this presentation would not have been possible

Technology

Letting go of perfection: Developing IA agility