Primary Goal: Increase the number of people from outside the Philadelphia area that choose to book a weekend stay through one of the offered hotel specials. Secondary Goal: Facilitate awareness of events, destinations, and attractions to both Philadelphia residents and nonresidents equally. What is your personal process for planning a regional, weekend trip? 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 transportationwhat 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?
Trang 2INFORMA
TION ARCHITECTURE
FRONT-END
BACK-END
Trang 3INFORMA
TION ARCHITECTURE
FRONT-END
BACK-END
Trang 4What is
IA?
Trang 5Increase 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
Trang 6Facilitate awareness of events, destinations, and attractions to both Philadelphia residents
and non-residents equally.
Secondary Goal
Trang 7gophila.com (old site)
Trang 8gophila.com (old site)
Trang 9Mental Models
Trang 10• “Aligning
Design Strategy with Human Behavior”
Trang 11Mental Models
• “Aligning Design Strategy with Human Behavior”
available at RosenfeldMedia.com or the books are sold on
the internet
Trang 12Where is the “context?”
Trang 14Constraint?
Trang 15Limited research budget
& predetermined scope
Trang 16Limited research budget
& predetermined scope
Trang 17Existing research + internal team project.
Limited research budget
& predetermined scope
Trang 18What is your personal process
for planning a
regional, weekend trip?
Trang 19Research Questions
Trang 20• 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?
Trang 21Post-It Sticky Notes
Trang 22Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation Consider cost Consider comfort & convenience
How much stuff
I needed to take
Parking costs and convenience
Ease of getting around
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)
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 mail for meetup
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 bathroom
Contacted 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 mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
Attractions Mapping
Choosing Regional Travel
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
Trip Preparation (continued)
Contacted friends
at destination
Made 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 clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
Proposed content Existing content
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
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can 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)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
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
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
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
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Philly 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
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
service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
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
Mapping
Getting Around
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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) Networking Social
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Slept at odd times from jetlag
Sleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told 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
Proposed and existing web content and applications that align with the tasks and categories listed above the line.
Alignment Diagram
Trang 23Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation Consider cost Consider comfort & convenience
How much stuff
I needed to take
Parking costs and convenience
Ease of getting around
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)
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 mail for meetup
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 bathroom
Contacted 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 mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
Attractions Mapping
Choosing Regional Travel
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
Trip Preparation (continued)
Contacted friends
at destination
Made 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 clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
Proposed content Existing content
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
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can 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)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
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
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
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
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Philly 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
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
service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
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
Mapping
Getting Around
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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) Networking Social
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Slept at odd times from jetlag
Sleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told 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
Proposed and existing web content and applications that align with the tasks and categories listed above the line.
Alignment Diagram
Trang 24Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation Consider cost Consider comfort & convenience
How much stuff
I needed to take
Parking costs and convenience
Ease of getting around
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)
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 mail for meetup
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 bathroom
Contacted 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 mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
Attractions Mapping
Choosing Regional Travel
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
Trip Preparation (continued)
Contacted friends
at destination
Made 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 clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
Proposed content Existing content
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
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can 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)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
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
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
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
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Philly 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
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
service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
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
Mapping
Getting Around
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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) Networking Social
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Slept at odd times from jetlag
Sleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told 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
Proposed and existing web content and applications that align with the tasks and categories listed above the line.
Alignment Diagram
Trang 25Alignment Diagram for GPTMC Wide
Choosing 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 airfarePrice of train
Price of car rental
Total travel timeFlight distance
Distance from home
Time duration of trip
Weather at destinationFlight distance
Parking costs and convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
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 mail for meetup
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 bathroom
Contacted home to alert them of arrival
Stretch
Take of seat belt
Lie downTake a nap
TweetCheck e-mail
Attractions
Stopped at unexpected roadside attraction
View on Map (Itineraries)
Reminder mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
AttractionsMapping
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
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destination
Made lists of things to bring
Call friends to confirm meet up plans
Made a playlist
on iPod
Contacted babysitter
Cleared digital camera
Bought new cameraBought clothes Packed suitcase
Packed clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can be reached w/o travel time affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events
Hotel Packages (Places to Stay)
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
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
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
Itineraries &
Tours (Things to Do)
Plan Your Trip:
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor ReviewsOpen Table
Experiencing the Destination
Setting up
"home base"
Unpacked bags
Changed clothes
Downloaded pictures to laptop
Visiting attractions
Toured winderies
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/
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun
Went to movie
Explore to take photos
Walked in Little Italy
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
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)
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 bagelsAte breakfast
Had business lunch
Sending communications
Called friends to alert them of return
Called family to alert them of return
Mapping
Getting Around
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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
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 jetlagSleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told friends about tripBlog 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 Process
Horizon 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
Trang 26Alignment Diagram for GPTMC Wide
Choosing 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 airfarePrice of train
Price of car rental
Total travel timeFlight distance
Distance from home
Time duration of trip
Weather at destinationFlight distance
Parking costs and convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
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 mail for meetup
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 bathroom
Contacted home to alert them of arrival
Stretch
Take of seat belt
Lie downTake a nap
TweetCheck e-mail
Attractions
Stopped at unexpected roadside attraction
View on Map (Itineraries)
Reminder mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
AttractionsMapping
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
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destination
Made lists of things to bring
Call friends to confirm meet up plans
Made a playlist
on iPod
Contacted babysitter
Cleared digital camera
Bought new cameraBought clothes Packed suitcase
Packed clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can be reached w/o travel time affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events
Hotel Packages (Places to Stay)
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
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
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
Itineraries &
Tours (Things to Do)
Plan Your Trip:
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor ReviewsOpen Table
Experiencing the Destination
Setting up
"home base"
Unpacked bags
Changed clothes
Downloaded pictures to laptop
Visiting attractions
Toured winderies
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/
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun
Went to movie
Explore to take photos
Walked in Little Italy
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
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)
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 bagelsAte breakfast
Had business lunch
Sending communications
Called friends to alert them of return
Called family to alert them of return
Mapping
Getting Around
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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
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 jetlagSleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told friends about tripBlog 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 Process
Horizon 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.
Trang 27Alignment Diagram for GPTMC Wide
Choosing 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 airfarePrice of train
Price of car rental
Total travel timeFlight 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)
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 mail for meetup
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 bathroom
Contacted home to alert them of arrival
Stretch
Take of seat belt
Lie downTake a nap
TweetCheck e-mail
Attractions
Stopped at unexpected
roadside attraction
View on Map (Itineraries)
Reminder mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
AttractionsMapping
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
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destination
Made 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 clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the
area
Compared costs
Can be reached w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events
Hotel Packages (Places to Stay)
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
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
Itineraries &
Tours (Things to Do)
Hotel Packages (Places to Stay)
Bed &
Breakfasts (Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
Plan Your Trip:
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Downloaded pictures to laptop
Visiting attractions
Toured winderies
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
Attended event meeting
Attended after parties
Attended convention/
construction
Took subway back to hotel
Called a friend because I got
lost
Took a cab ride
Wayfinding
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun
Went to movie
Explore to take photos
Walked in Little Italy
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Researched mexican restaurant
online
Ate at nearby deli
Went out to dinner
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)
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
Mapping
Getting Around
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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
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 jetlagSleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told friends about tripBlog 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 Process
Horizon 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.
Trang 28Alignment Diagram for GPTMC Wide
Choosing 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 airfarePrice of train
Price of car rental
Total travel timeFlight distance
Distance from home
Time duration of trip
Weather at destinationFlight distance
Parking costs and convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
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 mail for meetup
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 bathroom
Contacted home to alert them of arrival
Stretch
Take of seat belt
Lie downTake a nap
TweetCheck e-mail
Attractions
Stopped at unexpected roadside attraction
View on Map (Itineraries)
Reminder mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
AttractionsMapping
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
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destination
Made lists of things to bring
Call friends to confirm meet up plans
Made a playlist
on iPod
Contacted babysitter
Cleared digital camera
Bought new cameraBought clothes Packed suitcase
Packed clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can be reached w/o travel time affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events
Hotel Packages (Places to Stay)
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
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
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
Itineraries &
Tours (Things to Do)
Plan Your Trip:
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor ReviewsOpen Table
Experiencing the Destination
Setting up
"home base"
Unpacked bags
Changed clothes
Downloaded pictures to laptop
Visiting attractions
Toured winderies
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/
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun
Went to movie
Explore to take photos
Walked in Little Italy
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
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)
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 bagelsAte breakfast
Had business lunch
Sending communications
Called friends to alert them of return
Called family to alert them of return
Mapping
Getting Around
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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
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 jetlagSleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told friends about tripBlog 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 Process
Horizon 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.
Trang 29Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff
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) (Travel Tools)Weather
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
Purchased road map
Check local traffic
Pick up rental car Pay tolls
Text friends en route
Wayfinding Travelling
View on Map (Itineraries)
Reminder mail for meetup Mapping Social
communications
Check into hotel
Unpacked bags Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Took cab to an event
Asked concierge convenience store
Got directions to first destination Used bathroom
Contacted 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
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
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 DoTours &
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 destination
Made 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 clothes Purchased
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can 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:
Getting Here (Travel Tools)
Newsletter Signup Philly Fun Guide Trip Advisor Reviews
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
Checked weather conditions
Researched restaurants by hotel
Looked online
Made restaurant reservations Researched
hotels
Researched bed and breakfasts
Researched parking near airport
Researched parking near train station
Asked for friends'
Asked for friends'
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 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/
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping Philly Fun
Went to movie
Explore to take photos
Walked in Little Italy
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) (Things to Do)Nightlife
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
Mapping
Getting Around (Travel Tools) Things to Do NetworkingSocial
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding Visiting attractions Sending communications
Monitored GPS while driving
Called home Listened 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) NetworkingSocial 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 laundry
Balanced checkbook Sent thank you card to host
Unpacked bags
Told friends about trip Blog about trip
Reviewed notes from business meeting Downloaded 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 Process Horizon 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
Trang 30Choosing regional travel
Trang 31Alignment Diagram for GPTMC Wide
Choosing 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 airfarePrice of train
Price of car rental
Total travel timeFlight distance
Distance from home
Time duration of trip
Weather at destinationFlight distance
Parking costs and convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
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 mail for meetup
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 bathroom
Contacted home to alert them of arrival
Stretch
Take of seat belt
Lie downTake a nap
TweetCheck e-mail
Attractions
Stopped at unexpected roadside attraction
View on Map (Itineraries)
Reminder mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
AttractionsMapping
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
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destination
Made lists of things to bring
Call friends to confirm meet up plans
Made a playlist
on iPod
Contacted babysitter
Cleared digital camera
Bought new cameraBought clothes Packed suitcase
Packed clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can be reached w/o travel time affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events
Hotel Packages (Places to Stay)
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
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
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
Itineraries &
Tours (Things to Do)
Plan Your Trip:
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor ReviewsOpen Table
Experiencing the Destination
Setting up
"home base"
Unpacked bags
Changed clothes
Downloaded pictures to laptop
Visiting attractions
Toured winderies
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/
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun
Went to movie
Explore to take photos
Walked in Little Italy
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
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)
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 bagelsAte breakfast
Had business lunch
Sending communications
Called friends to alert them of return
Called family to alert them of return
Mapping
Getting Around
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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
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 jetlagSleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told friends about tripBlog 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 Process
Horizon 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.
Trang 32Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff
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) (Travel Tools)Weather
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
Purchased road map
Check local traffic
Pick up rental car Pay tolls
Text friends en route
Wayfinding Travelling
View on Map (Itineraries)
Reminder mail for meetup Mapping Social
communications
Check into hotel
Unpacked bags Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Took cab to an event
Asked concierge convenience store
Got directions to first destination Used bathroom
Contacted 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
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
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 destination
Made 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 clothes Purchased
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the
area
Compared costs
Can 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:
Getting Here (Travel Tools)
Newsletter Signup Philly Fun Guide Trip Advisor Reviews
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
Checked weather conditions
Researched restaurants by hotel
Looked online
Made restaurant reservations Researched
hotels
Researched bed and breakfasts
Researched parking near airport
Researched parking near train station
Asked for friends'
Asked for friends'
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 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/
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping Philly Fun
Went to movie
Explore to take photos
Walked in Little Italy
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) (Things to Do)Nightlife
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
Mapping
Getting Around (Travel Tools) Things to Do NetworkingSocial
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding Visiting attractions Sending communications
Monitored GPS while driving
Called home Listened 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) NetworkingSocial 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 laundry
Balanced checkbook Sent thank you card to host
Unpacked bags
Told friends about trip Blog about trip
Reviewed notes from business meeting Downloaded 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 Process Horizon 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.
Trang 33Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff
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) (Travel Tools)Weather
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
Purchased road map
Check local traffic
Pick up rental car Pay tolls
Text friends en route
Wayfinding Travelling
View on Map (Itineraries)
Reminder mail for meetup Mapping Social
communications
Check into hotel
Unpacked bags Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Took cab to an event
Asked concierge convenience store
Got directions to first destination Used bathroom
Contacted 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
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
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 destination
Made 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 clothes Purchased
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the
area
Compared costs
Can 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:
Getting Here (Travel Tools)
Newsletter Signup Philly Fun Guide Trip Advisor Reviews
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
Checked weather conditions
Researched restaurants by hotel
Looked online
Made restaurant reservations Researched
hotels
Researched bed and breakfasts
Researched parking near airport
Researched parking near train station
Asked for friends'
Asked for friends'
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 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/
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping Philly Fun
Went to movie
Explore to take photos
Walked in Little Italy
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) (Things to Do)Nightlife
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
Mapping
Getting Around (Travel Tools) Things to Do NetworkingSocial
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding Visiting attractions Sending communications
Monitored GPS while driving
Called home Listened 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) NetworkingSocial 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 laundry
Balanced checkbook Sent thank you card to host
Unpacked bags
Told friends about trip Blog about trip
Reviewed notes from business meeting Downloaded 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 Process Horizon 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.
Trang 35Alignment Diagram for GPTMC Wide
Choosing 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 airfarePrice of train
Price of car rental
Total travel timeFlight distance
Distance from home
Time duration of trip
Weather at destinationFlight distance
Parking costs and convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
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 mail for meetup
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 bathroom
Contacted home to alert them of arrival
Stretch
Take of seat belt
Lie downTake a nap
TweetCheck e-mail
Attractions
Stopped at unexpected roadside attraction
View on Map (Itineraries)
Reminder mail for meetup
e-Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip:
AttractionsMapping
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
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destination
Made lists of things to bring
Call friends to confirm meet up plans
Made a playlist
on iPod
Contacted babysitter
Cleared digital camera
Bought new cameraBought clothes Packed suitcase
Packed clothes
Purchased toothpaste/
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sending communications
Things to Do (E-mail)
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costs
Can be reached w/o travel time affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events
Hotel Packages (Places to Stay)
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
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
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
Itineraries &
Tours (Things to Do)
Plan Your Trip:
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor ReviewsOpen Table
Experiencing the Destination
Setting up
"home base"
Unpacked bags
Changed clothes
Downloaded pictures to laptop
Visiting attractions
Toured winderies
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/
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun
Went to movie
Explore to take photos
Walked in Little Italy
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
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)
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 bagelsAte breakfast
Had business lunch
Sending communications
Called friends to alert them of return
Called family to alert them of return
Mapping
Getting Around
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called home
Listened 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
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 jetlagSleep
Did laundry
Balanced checkbook
Sent thank you card to host
Unpacked bags
Told friends about tripBlog 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 Process
Horizon 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.
Trang 36Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff
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) (Travel Tools)Weather
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
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding Travelling
View on Map (Itineraries)
Reminder mail for meetup Mapping Social
communications
Check into hotel
Unpacked bags Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Took cab to an event
Asked concierge convenience store
Got directions to first destination Used bathroom
Contacted 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
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
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 destination
Made 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 clothes Purchased
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the
area
Compared costs
Can 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)
Getting Here (Travel Tools)
Newsletter Signup Philly Fun Guide Trip Advisor Reviews
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
Checked weather conditions
Researched restaurants by hotel
Looked online
Made restaurant reservations
Researched hotels
Researched bed and breakfasts
Researched parking near airport
Researched parking near train
Asked for friends'
Asked for friends'
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
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 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/
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping Philly Fun
Went to movie
Explore to take photos
Walked in Little Italy
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) (Things to Do)Nightlife
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
Mapping
Getting Around (Travel Tools) Things to Do NetworkingSocial
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding Visiting attractions Sending communications
Monitored GPS while driving
Called home Listened 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) NetworkingSocial 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 laundry
Balanced checkbook Sent thank you card to host
Unpacked bags
Told friends about trip Blog about trip
Reviewed notes from business meeting Downloaded 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 Process Horizon 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.
Trang 37Alignment Diagram for GPTMC Wide
Choosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff
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) (Travel Tools)Weather
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
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding Travelling
View on Map (Itineraries)
Reminder mail for meetup Mapping Social
communications
Check into hotel
Unpacked bags Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Took cab to an event
Asked concierge convenience store
Got directions to first destination Used bathroom
Contacted 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
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
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 destination
Made 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 clothes Purchased
toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Reminder mail for meetup
e-Social Networking
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
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the
area
Compared costs
Can 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)
Getting Here (Travel Tools)
Newsletter Signup Philly Fun Guide Trip Advisor Reviews
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
Checked weather conditions
Researched restaurants by hotel
Looked online
Made restaurant reservations
Researched hotels
Researched bed and breakfasts
Researched parking near airport
Researched parking near train
Asked for friends'
Asked for friends'
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
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 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/
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
Professional Events
Leisure Events
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip:
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping Philly Fun
Went to movie
Explore to take photos
Walked in Little Italy
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) (Things to Do)Nightlife
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
Mapping
Getting Around (Travel Tools) Things to Do NetworkingSocial
Open Table AIM/SMS
Return trip from destination
Travel &
wayfinding Visiting attractions Sending communications
Monitored GPS while driving
Called home Listened 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) NetworkingSocial 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 laundry
Balanced checkbook Sent thank you card to host
Unpacked bags
Told friends about trip Blog about trip
Reviewed notes from business meeting Downloaded 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 Process Horizon 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
Experience the Destination
• Create “Home base”
Trang 38Arrive at the Destination
Experience the Destination
• Create “Home base”
Trang 39Sitemap
Trang 40Wireframes