a redesign of visitphilly.com by happy cog
DESCRIPTION
With the redesign of Philadelphia’s premiere tourism website at VisitPhilly.com (formerly gophila.com), Happy Cog and it’s client the Greater Philadelphia Tourism Marketing Corporation (GPTMC) have made Philly appear as vibrant, as hip, and as engaging a city as it is in reality. This redesign resulted in a virtual representation of Philadelphia that is more emotionally compelling and immersive than ever before, yet still entirely credible and accurate to the endless possibilites of what you can do here. In a case study presented as a series of short, practical talks, Happy Cog’s Experience Director, Creative Director, and Development Directors will walk you their design and planning process to create this successful redesign, citing specific research techniques, conceptual approaches, and coding techniques as well as sharing examples of their works in progress that got them to this result.Speakers include:Kevin M. Hoffman - Experience DirectorChristopher Cashdollar - Creative DirectorJenn Lukas - Interactive Development DirectorMark Huot - Technology & Development DirectorGreg Hoy - PresidentThis presentation was designed by Chris Cashdollar.TRANSCRIPT
VISITPHILLY.COM
A REDESIGN
OF
BY
DESIGN
INFORMATION
ARCHITECTURE
FRONT-END
CODINGBACK-END
CODING
DESIGN
INFORMATION
ARCHITECTURE
FRONT-END
CODINGBACK-END
CODING
What is IA?
Increase the number of people from outside the Philadelphia area that choose to book a weekend stay through one of the offered hotel specials.
Primary Goal
Facilitate awareness of events, destinations, and attractions to both Philadelphia residents and non-residents equally.
Secondary Goal
gophila.com (old site)
gophila.com (old site)
• What’s New
• Events Calendar
• Itineraries & Tours
• Countryside
• Photos & Multimedia
• Our Sponsors
• ings to Do
• Places to Stay
• Special Offers
• Travel Tools
• Philly Faorites
• Your Philadelphia
Mental Models
Mental Models
• “Aligning Design Strategy with Human Behavior”
Mental Models
• “Aligning Design Strategy with Human Behavior”
• by Indi Young, available at RosenfeldMedia.com or the books are sold on the internet
Where is the “context?”
Where is the “context?”
Constraint?
Limited research budget & predetermined scope...
Solution?
Limited research budget & predetermined scope...
Existing research + internal team project.
Limited research budget & predetermined scope...
What is your personal process
for planning a regional,
weekend trip?
Research Questions
Research Questions• 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 le?
• 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 le?
• What did you do on the way home?
• What did you do when you got home, related to your trip?
Post-It Sticky Notes
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
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
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
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
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.
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.
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.
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
Choosing regional travel
• Research locations
• Attracted by destination
• Spontaneous choice
Choosing a Destination
• Research amenities
• Attracted by destination
• Economizing
Things to Do
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.
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.
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.
Select Transportation
• Cost
• Comfort & conenience
Trip Preparation
• Secure lodging
• Schedule
• Packing
• Communications
Travel
• Meals
• Wayfinding
• Passing time
• Communications
Select Transportation
• Cost
• Comfort & conenience
Trip Preparation
• Secure lodging
• Schedule
• Packing
• Communications
Travel
• Meals
• Wayfinding
• Passing time
• Communications
Plan Your Trip
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.
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.
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.
Arrive at the Destination
• Setup
• Communications
• Wayfinding
• Meals
• Attractions
Experience the Destination
• Create “Home base”
• Attending events
• Visiting attractions
• Meals
• Socializing
• Passing time
Arrive at the Destination
• Setup
• Communications
• Wayfinding
• Meals
• Attractions
Experience the Destination
• Create “Home base”
• Attending events
• Visiting attractions
• Meals
• Socializing
• Passing time
Philly Now
Sitemap
Wireframes
Wireframes
Bridging classification and context with a larger taxonomy.
When is something navigation, and when is it interface?
Clumping of objects: itineraries, top 10 lists, etc.
Search engine optimization, as it affects both label choices and legacy page rankings.
Other IA Considerations
Balance classificationwith context.
Explore.Regardless of scope.
DESIGN
INFORMATION
ARCHITECTURE
FRONT-END
CODINGBACK-END
CODING
SomeBACKGROUND
AREVOLUTION
What Needed Fixing
• A modern CMS
• Simplified management
• Improed hosting
• Wider support channels
The Constraints
• Limited timeline
• Public launch
• A lot of content
• A new system
WorkingWithin Constraints
UsingExpressionEngine
Frameworks
Gems…
Gems… have issues
EE has fewer issues
Why EE?
Engagingthe Client
Planningfor the Future
DESIGN
INFORMATION
ARCHITECTURE
FRONT-END
CODINGBACK-END
CODING
Baseball!!
JavaScript Off
Letting PhiladelphiaBE THE STAR
Choose Your h1’s WISELY
{if segment_1}
<strong class="logo"><a href="{path=/}" title="Home">Philadelphia and the Countryside® Beta</a></strong>
{if:else}
<h1 class="logo"><a href="{path=/}" title="Home">Philadelphia and the Countryside® Beta</a></h1>
{/if}
Header Include
Text
Give Your Links aHOME
The Keyboard IsNOT YOUR ENEMY
Don’t Hide thePRETTY PICTURES
JavaScript Off
JavaScript Off
JavaScript Off
JavaScript Off
JavaScript Off
JavaScript Off
Don’t AlienateYOUR USERS
Don’t AlienateYOUR CUSTOMERS
w3schools.comJavaScript Statistics
thecounter.comJavaScript False: 4393090 (6%)
100 Visitors6 users without JS
100,000 Visitors6,000 users without JS
96% of Statistics areMADE UP ON
THE SPOT
Pat YourselvesON THE BACK
DESIGN
INFORMATION
ARCHITECTURE
FRONT-END
CODINGBACK-END
CODING
ReinterpretingPHILADELPHIA
CATALYST
CATALYST
CATALYST
CATALYST
We went looking elsewhere.
Where else?
UncoveringTHE CONCEPT
DISCOVERY IA DESIGN
PROCESS
DISCOVERY IA DESIGN
PROCESS
DISCOVERY IA DESIGN
PROCESS
DESIGN
UNIFIED
APPROACH
UNIFIED
APPROACH
UNIFIED
APPROACH
UNIFIED
APPROACH
1
UNIFIED
APPROACH
1 2
UNIFIED
APPROACH
1 2
3
CONTEMPORARYDISTINCTIVENOSTALGIC FASHIONABLE
ART DIRECTION
THEMES
gophila.com (old site)
CONTEMPORARYDISTINCTIVENOSTALGIC FASHIONABLE
ART DIRECTION
THEMES
CONTEMPORARYDISTINCTIVENOSTALGIC FASHIONABLE
ART DIRECTION
THEMES
Forming Voltron
The TRICKY BITS
(This.)
Simple is better.
In CONCLUSION
Thank you...
RefreshPhilly!Comcast!
MissionStaff!Philadelphia Citizens!