an army of one? a nation of millions? collaboration is not the key, it's the keystone

141
ARMY OF ONE? NATION OF MILLIONS? Collaboration is not the key, it’s the keystone

Upload: christopher-cashdollar

Post on 27-Jan-2015

104 views

Category:

Design


1 download

DESCRIPTION

Happy Cog directors Kevin M. Hoffman and Christopher Cashdollar explore how they collaborate with each other, their clients, and their team to create custom processes to best design their award-winning web sites.

TRANSCRIPT

Page 1: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

ARMY OF ONE?NATION OF MILLIONS?Collaboration is not the key, it’s the keystone

Page 2: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

1

WHO IS HAPPY COG?Small, dedicated teams

Page 3: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

WHO IS HAPPY COG?Innovation & Education

Page 4: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THE BOOK THAT STARTED IT ALLDesigning With Web Standards

Page 5: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

WRITINGA List Apart

Page 6: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

CONFERENCEAn Event Apart

Page 7: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

PUBLISHING (MORE BOOKS)A Book Apart

Page 8: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

WHO IS HAPPY COG?Collaboration

Page 9: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Experience Director@kevinmhoffman

KEVIN M. HOFFMAN

EST.1972

Page 10: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Strategy

‣ Requirements

‣ User Research

‣ Information Architecture

‣ User Interface Design

‣ Heuristics (Best Practices)

‣ Content Strategy

‣ Editorial Direction

What I Do:

‣ Write articles

‣ Speak at events and

conferences

(like this one)

Page 11: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Communications

Briefs

‣ Meeting Agendas

‣ Sitemaps

‣ Research Activities

and Reports

‣ Personas

‣ Wireframes

‣ Usability Testing

and Reports

What I Create:

‣ Content Inventory

‣ Editorial Guidelines

‣ User Flows

‣ Business Process

‣ UX Tweets from

@happycog every

Tuesday

Page 12: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Creative Director@ccashdollar

CHRISTOPHER J. CASHDOLLAR

EST.1977

Page 13: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Lead the design team

‣ I make the pretty, too

‣ Team up with the client to set

the tone for the project

‣ Develop the creative strategy

‣ Write / speak / teach

What I Do:

Page 14: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Design-focused workshops

‣ Creative Briefs

‣ Sketching / brainstorming

sessions

‣ Semi-coherent design-

related Tweets for

@happycog every Thursday

What I Create:

‣ Website Design

‣ User Interface Design

‣ Logos

‣ Style Guides

‣ Illustrations

Page 15: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

1

OUR PROCESS

Page 16: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

AOur Phases

PROJECTDEFINITION

INFORMATIONARCHITECTURE

VISUALDESIGN DEVELOPMENT

Page 17: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

BA Processcould be...

CREATIVEBRIEF

SITEMAP &WIREFRAMES

PROTOTYPE

“VIP” PAGEDESIGN

TEMPLATE &CMS

CREATIVE CONCEPTS

TESTING

QA & REFINEMENT

USER RESEARCH

KICKOFFWORKSHOP

DESIGNBLITZ

Page 18: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

COLLABORATIVE

FLEXIBLEITERATIVE

COur Process Values

Page 19: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

COLLABORATIVE

FLEXIBLEITERATIVE

COur Process Values

Page 20: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

COLLABORATIVE

FLEXIBLEITERATIVE

COur Process Values

Page 21: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

CHALLENGE CULTURE‣ E-commerce

‣ Highly customized,

infinite variations

‣ Endless pathways for

upsell

‣ Aggressive deadlines

‣ Bottom line driven

decisions

‣ Many vendors, but

one project

Page 22: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

ACollaboration Pairing:

Page 23: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Leadership involvement early in

process

‣ Extended “no meeting” work

periods in tight collaboration

‣ Collaborative, sprint based

design activities

Project Definition/Information Architecture

Page 24: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Fast results

HAVE A COST

Page 25: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

3

GEORGETOWNUNIVERSITY

Page 26: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

CHALLENGE CULTURE‣ Public (but also

internal) audiences

‣ Strong, historic

identity in transition

‣ Reengineer an

organizationally

based-site to a news

and messaging site

‣ Political... but what does

that really mean?

‣ B-52 (bombers, not

band): Powerful

stakeholders outside of

the process

‣ Siloed information and

solutions

Page 27: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

ACollaboration Pairing:

AUDIENCES & CLIENTS

Page 28: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Early, open discussion with

focused meeting outcomes

‣ Guerilla, cross-sectional

audience research - what ties

them together?

‣ New solutions to old problems

Project Definition/Information Architecture

Page 29: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

What is a wireframe?

Wireframes provide a presentation of the hierarchy of

items present on the page, and an overview of what will

and won't have persistence throughout the site, when it

will persist, and why.

Wireframes are not meant to provide any strict guidelines

for visual design, and a visual designer will significantly

deviate from the visual appearance and layout when

executing them.

Page 30: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

HIERARCHYPERSISTENCE

NOTVISUAL DESIGN

+

Page 31: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

—ELLIOT JAY STOCKS, DESIGNER

Honestly, I'm shocked that in 2010 I'm still coming across 'web designers' who can't code their own designs. No excuse.”

—RYAN CARSON, ENTREPRENEUR

'UX Professional' is a bullshit job title. It's just a way to over-charge naive clients. All web designers should be UX pros”

Page 32: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

“SWISS” DESIGNPracticing neutrality

Page 33: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Georgetown University Wireframes Version 3.0.graffleHome Page

Creator: Happy Cog | Modified: Wed Sep 15 2010 | Page 2/29

Logo/branding (link to home page)

Suggested topic Search

Photograph browser/video/audio player

Welcome to Georgetown University

About | Academics | Admissions & Financial Aid | Campus Life | Research | News

Events Calendar | Faculty & Office Directory | Maps & Directions | Latest Sports Scores

Plan a Visit | Make a Gift | Contact Us | Work For Us

Our Schools

Topic Title

Topic statement wouldgo here. Topic statementwould go here.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet,.

Teasermm/dd/yy at hh:mm, PM

Teasermm/dd/yy at hh:mm, PM

Teasermm/dd/yy at hh:mm, PM

Related Department

Related Office

Upcoming Events

Event Title at hh:mm, PM

Read the Full Story

Find Information Just For You What's this?

Full Length Story Title

Topic Title Topic Title Topic Title Topic Title

Close

Choose one of the options provided to keep instant access to information and the parts of the Georgetown web site you need most.

Privacy Policy | Copyright InformationGeorgetown University 37th and O Streets, NW Washington D.C. 20057

Our Schools

Georgetown CollegeThe Law Center (etc.)

University News

Event Title at hh:mm, PM

h:mm TT - h:mm TTLocation

MONTH DATE, YYYY Teaser TitlePosted on mm/dd/yy Lorem ipsum dolor sit amet

Teaser Titlemm/dd/yy at hh:mm, PM

Find Information Just For You

Prospective Undergraduate StudentsProspective Graduate StudentsParents, Family, & FriendsCurrent StudentsFaculty & StaffAlumni (cont., see page 3)

Page 34: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Logo/branding (link to home page)

Suggested topic Search

Photograph browser/video/audio player

Welcome to Georgetown University

About | Academics | Admissions & Financial Aid | Campus Life | Research | News

Events Calendar | Faculty & Office Directory | Maps & Directions | Latest Sports Scores

Plan a Visit | Make a Gift | Contact Us | Work For Us

Our Schools

Topic Title

Topic statement wouldgo here. Topic statementwould go here.

Teasermm/dd/yy at hh:mm, PM

Teasermm/dd/yy at hh:mm, PM

Teasermm/dd/yy at hh:mm, PM

Full Length Story Title

Topic Title Topic Title Topic Title Topic Title

Page 35: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 36: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 37: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 38: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

A

OURDESIGNTEAM

Collaboration Pairing:

Page 39: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 40: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

DRAW. DRAW QUICKLY.

Page 41: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

ITERATE RAPIDLY.

Page 42: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 43: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Rules need to be understood

TO BE BROKEN

Page 44: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Prepare bombing

CONTINGENCIES

Page 45: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

4

HAPPY COG

Page 46: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

CHALLENGE CULTURE‣ Agency got no blog!

‣ Strong existing

presence on the web

(ALA, AEA,

Zeldman.com)

‣ Happy Cog is more

than Jeffrey

‣ Given license, we’d like to

expand more than contract

‣ Three different offices with

different voices and

different design

approaches

‣ Everyone wants to be

involved

Page 47: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

ACollaboration Pairing:

THE BOSSES

Page 48: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

CAN WEUSE THE TWITTER?

Page 49: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Given the mandate

“use Twitter.”

‣ Experiment.

Try something different.

Project Definition/Information Architecture

Page 50: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 51: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 52: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Actual ProcessAs close to agile as Happy Cog is going to get.

Page 53: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 54: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

A

A FRONT-END DEVELOPER

Collaboration Pairing:

Page 55: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 56: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THIS IS BRIAN WARREN.

Page 57: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 58: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 59: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 60: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 61: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Use deliverables for

DISCUSSION

Page 62: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

That whole details and

DEVILS THING

Page 63: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

5

CITY OF PHILADELPHIA

Page 64: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

CHALLENGE CULTURE‣ We (need to re) build

this city (brand)!

‣ Content? We got it!

In fact, we got too

much!

‣ Who is this site for

again?

‣ Visual thinkers, with great

photography and content

‣ More prone to thinking

about ad campaigns than

websites

‣ Keeping up with the

Jonesez

Page 65: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

ACollaboration Pairing:

RESEARCHSUBJECTS (WHO ARE ALSODESIGNERS)

Page 66: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

GOALS Increase the number of people from outside

the Philadelphia area that choose to book a

weekend stay through one of the offered

hotel specials.

1

Page 67: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

GOALS Increase the number of people from outside

the Philadelphia area that choose to book a

weekend stay through one of the offered

hotel specials.

1Facilitate awareness of events, destinations,

and attractions to both Philadelphia residents

and non-residents equally.2

Page 68: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 69: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Things to Do

‣ Places to Stay

‣ Special Offers

‣ Travel Tools

‣ Philly Favorites

‣ Your Philadelphia

‣ What’s New

‣ Events Calendar

‣ Itineraries & Tours

‣ Countryside

‣ Photos & Multimedia

‣ Our Sponsors

Page 70: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Mental Models

• “Aligning Design Strategy with Human Behavior”

•by Indi Young, available at RosenfeldMedia.com or the books are sold on the internet

Page 71: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Where is the “context?”

Page 72: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Where is the “context?”

Page 73: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Constraint?

Page 74: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Limited research budget & predetermined scope.

SOLUTION?

Page 75: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Existing research +

USE DESIGN TEAMAS GUINEA PIGS

Page 76: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

What is your personal process

for planning a regional,weekend trip?

Page 77: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ How did it first occur to you to

take a weekend or overnight

trip?

‣ How did you select a

destination?

‣ What did you do to select your

mode of transportation/what

did you select?

‣ What did you do before you

left?

‣ What did you do on the way?

‣ What did you do when you

first arrived?

‣ What did you do while you

were there?

‣ What did you do before you

left?

‣ What did you do on the way

home?

‣ What did you do when you got

home, related to your trip?

RESEARCH QUESTIONS

Page 78: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Sticky Notes!

Page 79: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Alignment Diagram

Page 80: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Alignment Diagram

Page 81: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Alignment Diagram

Page 82: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line. Alignment Diagram

Page 83: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 84: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 85: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 86: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of

human behavior. For the purpose of this diagram, the human behavior we are exploring is the process

of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left

to right to be viewed in it's intended format.

The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,

the mental model for the task of planning and executing a weekend trip, exists above the horizon line,

and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental

space, you may or may not have additional Categories (4), which are then broken into granular,

component tasks. Color and visual coding noted in the legend denote the importance of tasks to the

research participants and whether or not the task can be performed online, respectively.

Beneath the horizon line are current and proposed web content and applications as well as third party/

external websites that align vertically to the specific mental spaces and categories of tasks described.

The primary purposes of this diagram are to

1. Reveal gaps where the web experience could better support human behavior.

2. Begin to explore issues of information architecture, functionality requirements, and labeling.

3. Build a framework for a mental model of the activities the web site is intended to support.

It is important to note that an alignment diagram is a living document - there should never be a

"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

To construct this model, the researcher used an exploratory design exercise where Happy Cog

staff were asked to revisit their mental processes for any recent weekend trips they had planned

and executed.

Each participant broke down each step of their individual process into it's most simple, granular

tasks, and then as a group they evaluated the importance of each task relative to the other tasks

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Choosing regional travel

‣ Research locations

‣ Attracted by destination

‣ Spontaneous choice

Choosing a destination

‣ Research amenities

‣ Attracted by destination

‣ Economizing

Page 87: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Things To Do

Choosing regional travel

‣ Research locations

‣ Attracted by destination

‣ Spontaneous choice

Choosing a destination

‣ Research amenities

‣ Attracted by destination

‣ Economizing

Page 88: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Sitemap

Page 89: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Wireframes

Page 90: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 91: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 92: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 93: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 94: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Balance classification

WITH CONTEXT.

Page 95: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

EXPLORE.Regardless of scope.

Page 96: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

A

OURCLIENT

Collaboration Pairing:

Page 97: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

http://visitphilly.com

Page 98: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

NOT ALL STORIES HAVE A HAPPY ENDING.

Page 99: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 100: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

SIMPLE IS BETTER.

Page 101: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

6

UNITED STATES HOLOCAUST MEMORIAL MUSEUM

Page 102: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

CHALLENGE CULTURE‣ This is a huge,

complex organization;

it has no peer

‣ International reach

and value

‣ Wealth of content and

powerful message(s);

learning is a goal

‣ Passionate and committed

staff; all of them, at all

levels

‣ Some tension between

aspirational goals and

actual operations

‣ Limited, dedicated web

resources

Page 103: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

ACollaboration Pairing:

LIKE,EVERYBODY. ALL THE PEOPLE.

Page 104: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Clarification of the site strategy

within the museum strategy

‣ Align information structures

with persona mental models

‣ Content strategy (learners)

‣ Meeting design!

Project Definition/Information Architecture

Page 105: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

1

WHY MEETINGS?

Page 106: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

1

MEETINGS SUCK.

Page 107: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 108: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

MEETINGS ARE TOXIC

Page 109: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

MEETINGSARETOXIC

AT 37 SIGNALS,TRADITIONAL

TO AGILESOFTWARE DEVELOPMENT.

Page 110: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

1#

DESIGNFRAMEWORK

MEETING

Page 111: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

GROUPDECISION-MAKING

THE DYNAMICS OF

Page 112: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THE DYNAMICS OF DECISION-MAKING

NEW TOPIC

DECISIONPOINT

Page 113: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

A UTOPIAN DYNAMIC OF GROUP DECISION-MAKING

LEADER IDEA GROUP MEMBER IDEA

NEW TOPIC

DECISIONPOINT

Page 114: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

NEW TOPIC

WTF?

WTF?

WTF?

WTF?

WTF?

WTF?

WTF?

Page 115: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

NEW TOPIC

DECISIONPOINT

Page 116: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

LEADER IDEA GROUP MEMBER IDEA

NEW TOPIC

DECISIONPOINT

DIVERGENTTHINKING

CONVERGENT THINKING

Page 117: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Generating a list of ideas

‣ Free-flowing open discussion

‣ Seeking diverse points of view

‣ Suspending judgement

DIVERGENTTHINKING

CONVERGENT THINKING

‣ Sorting ideas into categories

‣ Summarizing key points

‣ Coming to agreement

‣ Exercising judgment

THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

Page 118: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

NEW TOPIC

DECISIONPOINT

Page 119: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

NEW TOPIC

DECISIONPOINT

Page 120: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

“GROAN ZONE”

THE

THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

NEW TOPIC

DECISIONPOINT

Page 121: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

‣ Full participation

‣ Mutual understanding

‣ Inclusive solutions

‣ Shared responsibility

CORE VALUES

Page 122: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

MAKE IT REAL!

Page 123: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

MAKE IT REAL!

Page 124: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

PROCESSDESIGN

SOLUTION

SPACE

PROBLEM

SPACE

VISION SPACE

PATHWAYS TO ACTION MODEL

MAKE IT REAL!

Page 125: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 126: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 127: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone
Page 128: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

A

OURCLIENT

Collaboration Pairing:

Page 129: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

BStandard Design Processusually is...

CREATIVE CONCEPTS

CLIENTREVIEW

Page 130: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

WE ARE NOT DON DRAPER

Page 131: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

BCollaborative Design Processcan be...

CREATIVECONCEPTS

CLIENTREVIEW

Page 132: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

BCollaborative Design Processcan be...

CREATIVECONCEPTS

CLIENTREVIEW

SINGLE CONCEPTITERATION

Page 133: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

C

C I R C L E O N E N U M B E R F O R E A C H S C A L E .

“How close will the new design be visually and typographically to the current print materials and branding?”

21 3 4 5 6 7 8 9 1 0

“Should the homepage use lots of visuals such as photography to express ideas or focus more on typography and headlines?”

V I S U A L S

21 3 4 5 6 7 8

W O R D S

9 1 0

A.

B.

N A M E

C O M P A N Y

Design Characteristics

R I G I D L Y A D H E R E T O C U R R E N T

S T Y L E S N O T C L O S E A T A L L

Page 134: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

C

1 2 3 4 5 6 7 8 9 1 0

S O L E M N H O P E F U L

Should the new design feel solemn or hopeful?”“

Page 135: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

D

The new site will feel

by showing

Let’s Play MadLibs

adjective

noun

Page 136: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

7

YEAH, OK. SO WHAT?

Page 137: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

A

CAN YOU TELL A STORY ABOUT YOUR PROCESS?

“So, your process walks into a bar...”

Page 138: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

B

GOOD IDEAS COME FROM ANYWHEREEven project managers!

Page 139: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

C

COLLABORATION IS EXPENSIVEMake your meetings count!

Page 140: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

D

BEING DOGMATIC IS FOR THE BIRDS“Find” the unique process needs for each project

Page 141: An Army of One? A Nation of Millions? Collaboration is not the key, it's the keystone

Questions?

THANK YOU!