Upload
christopher-cashdollar
View
104
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Happy Cog directors Kevin M. Hoffman and Christopher Cashdollar explore how they collaborate with each other, their clients, and their team to create custom processes to best design their award-winning web sites.
Citation preview
ARMY OF ONE?NATION OF MILLIONS?Collaboration is not the key, it’s the keystone
1
WHO IS HAPPY COG?Small, dedicated teams
WHO IS HAPPY COG?Innovation & Education
THE BOOK THAT STARTED IT ALLDesigning With Web Standards
WRITINGA List Apart
CONFERENCEAn Event Apart
PUBLISHING (MORE BOOKS)A Book Apart
WHO IS HAPPY COG?Collaboration
Experience Director@kevinmhoffman
KEVIN M. HOFFMAN
EST.1972
‣ Strategy
‣ Requirements
‣ User Research
‣ Information Architecture
‣ User Interface Design
‣ Heuristics (Best Practices)
‣ Content Strategy
‣ Editorial Direction
What I Do:
‣ Write articles
‣ Speak at events and
conferences
(like this one)
‣ Communications
Briefs
‣ Meeting Agendas
‣ Sitemaps
‣ Research Activities
and Reports
‣ Personas
‣ Wireframes
‣ Usability Testing
and Reports
What I Create:
‣ Content Inventory
‣ Editorial Guidelines
‣ User Flows
‣ Business Process
‣ UX Tweets from
@happycog every
Tuesday
Creative Director@ccashdollar
CHRISTOPHER J. CASHDOLLAR
EST.1977
‣ Lead the design team
‣ I make the pretty, too
‣ Team up with the client to set
the tone for the project
‣ Develop the creative strategy
‣ Write / speak / teach
What I Do:
‣ Design-focused workshops
‣ Creative Briefs
‣ Sketching / brainstorming
sessions
‣ Semi-coherent design-
related Tweets for
@happycog every Thursday
What I Create:
‣ Website Design
‣ User Interface Design
‣ Logos
‣ Style Guides
‣ Illustrations
1
OUR PROCESS
AOur Phases
PROJECTDEFINITION
INFORMATIONARCHITECTURE
VISUALDESIGN DEVELOPMENT
BA Processcould be...
CREATIVEBRIEF
SITEMAP &WIREFRAMES
PROTOTYPE
“VIP” PAGEDESIGN
TEMPLATE &CMS
CREATIVE CONCEPTS
TESTING
QA & REFINEMENT
USER RESEARCH
KICKOFFWORKSHOP
DESIGNBLITZ
COLLABORATIVE
FLEXIBLEITERATIVE
COur Process Values
COLLABORATIVE
FLEXIBLEITERATIVE
COur Process Values
COLLABORATIVE
FLEXIBLEITERATIVE
COur Process Values
CHALLENGE CULTURE‣ E-commerce
‣ Highly customized,
infinite variations
‣ Endless pathways for
upsell
‣ Aggressive deadlines
‣ Bottom line driven
decisions
‣ Many vendors, but
one project
ACollaboration Pairing:
‣ Leadership involvement early in
process
‣ Extended “no meeting” work
periods in tight collaboration
‣ Collaborative, sprint based
design activities
Project Definition/Information Architecture
Fast results
HAVE A COST
3
GEORGETOWNUNIVERSITY
CHALLENGE CULTURE‣ Public (but also
internal) audiences
‣ Strong, historic
identity in transition
‣ Reengineer an
organizationally
based-site to a news
and messaging site
‣ Political... but what does
that really mean?
‣ B-52 (bombers, not
band): Powerful
stakeholders outside of
the process
‣ Siloed information and
solutions
ACollaboration Pairing:
AUDIENCES & CLIENTS
‣ Early, open discussion with
focused meeting outcomes
‣ Guerilla, cross-sectional
audience research - what ties
them together?
‣ New solutions to old problems
Project Definition/Information Architecture
What is a wireframe?
Wireframes provide a presentation of the hierarchy of
items present on the page, and an overview of what will
and won't have persistence throughout the site, when it
will persist, and why.
Wireframes are not meant to provide any strict guidelines
for visual design, and a visual designer will significantly
deviate from the visual appearance and layout when
executing them.
HIERARCHYPERSISTENCE
NOTVISUAL DESIGN
+
“
—ELLIOT JAY STOCKS, DESIGNER
Honestly, I'm shocked that in 2010 I'm still coming across 'web designers' who can't code their own designs. No excuse.”
—RYAN CARSON, ENTREPRENEUR
'UX Professional' is a bullshit job title. It's just a way to over-charge naive clients. All web designers should be UX pros”
“
“
“SWISS” DESIGNPracticing neutrality
Georgetown University Wireframes Version 3.0.graffleHome Page
Creator: Happy Cog | Modified: Wed Sep 15 2010 | Page 2/29
Logo/branding (link to home page)
Suggested topic Search
Photograph browser/video/audio player
Welcome to Georgetown University
About | Academics | Admissions & Financial Aid | Campus Life | Research | News
Events Calendar | Faculty & Office Directory | Maps & Directions | Latest Sports Scores
Plan a Visit | Make a Gift | Contact Us | Work For Us
Our Schools
Topic Title
Topic statement wouldgo here. Topic statementwould go here.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce tristique. Lorem ipsum dolor sit amet,.
Teasermm/dd/yy at hh:mm, PM
Teasermm/dd/yy at hh:mm, PM
Teasermm/dd/yy at hh:mm, PM
Related Department
Related Office
Upcoming Events
Event Title at hh:mm, PM
Read the Full Story
Find Information Just For You What's this?
Full Length Story Title
Topic Title Topic Title Topic Title Topic Title
Close
Choose one of the options provided to keep instant access to information and the parts of the Georgetown web site you need most.
Privacy Policy | Copyright InformationGeorgetown University 37th and O Streets, NW Washington D.C. 20057
Our Schools
Georgetown CollegeThe Law Center (etc.)
University News
Event Title at hh:mm, PM
h:mm TT - h:mm TTLocation
MONTH DATE, YYYY Teaser TitlePosted on mm/dd/yy Lorem ipsum dolor sit amet
Teaser Titlemm/dd/yy at hh:mm, PM
Find Information Just For You
Prospective Undergraduate StudentsProspective Graduate StudentsParents, Family, & FriendsCurrent StudentsFaculty & StaffAlumni (cont., see page 3)
Logo/branding (link to home page)
Suggested topic Search
Photograph browser/video/audio player
Welcome to Georgetown University
About | Academics | Admissions & Financial Aid | Campus Life | Research | News
Events Calendar | Faculty & Office Directory | Maps & Directions | Latest Sports Scores
Plan a Visit | Make a Gift | Contact Us | Work For Us
Our Schools
Topic Title
Topic statement wouldgo here. Topic statementwould go here.
Teasermm/dd/yy at hh:mm, PM
Teasermm/dd/yy at hh:mm, PM
Teasermm/dd/yy at hh:mm, PM
Full Length Story Title
Topic Title Topic Title Topic Title Topic Title
A
OURDESIGNTEAM
Collaboration Pairing:
DRAW. DRAW QUICKLY.
ITERATE RAPIDLY.
Rules need to be understood
TO BE BROKEN
Prepare bombing
CONTINGENCIES
4
HAPPY COG
CHALLENGE CULTURE‣ Agency got no blog!
‣ Strong existing
presence on the web
(ALA, AEA,
Zeldman.com)
‣ Happy Cog is more
than Jeffrey
‣ Given license, we’d like to
expand more than contract
‣ Three different offices with
different voices and
different design
approaches
‣ Everyone wants to be
involved
ACollaboration Pairing:
THE BOSSES
CAN WEUSE THE TWITTER?
‣ Given the mandate
“use Twitter.”
‣ Experiment.
Try something different.
Project Definition/Information Architecture
Actual ProcessAs close to agile as Happy Cog is going to get.
A
A FRONT-END DEVELOPER
Collaboration Pairing:
THIS IS BRIAN WARREN.
Use deliverables for
DISCUSSION
That whole details and
DEVILS THING
5
CITY OF PHILADELPHIA
CHALLENGE CULTURE‣ We (need to re) build
this city (brand)!
‣ Content? We got it!
In fact, we got too
much!
‣ Who is this site for
again?
‣ Visual thinkers, with great
photography and content
‣ More prone to thinking
about ad campaigns than
websites
‣ Keeping up with the
Jonesez
ACollaboration Pairing:
RESEARCHSUBJECTS (WHO ARE ALSODESIGNERS)
GOALS Increase the number of people from outside
the Philadelphia area that choose to book a
weekend stay through one of the offered
hotel specials.
1
GOALS Increase the number of people from outside
the Philadelphia area that choose to book a
weekend stay through one of the offered
hotel specials.
1Facilitate awareness of events, destinations,
and attractions to both Philadelphia residents
and non-residents equally.2
‣ Things to Do
‣ Places to Stay
‣ Special Offers
‣ Travel Tools
‣ Philly Favorites
‣ Your Philadelphia
‣ What’s New
‣ Events Calendar
‣ Itineraries & Tours
‣ Countryside
‣ Photos & Multimedia
‣ Our Sponsors
Mental Models
• “Aligning Design Strategy with Human Behavior”
•by Indi Young, available at RosenfeldMedia.com or the books are sold on the internet
Where is the “context?”
Where is the “context?”
Constraint?
Limited research budget & predetermined scope.
SOLUTION?
Existing research +
USE DESIGN TEAMAS GUINEA PIGS
What is your personal process
for planning a regional,weekend trip?
‣ How did it first occur to you to
take a weekend or overnight
trip?
‣ How did you select a
destination?
‣ What did you do to select your
mode of transportation/what
did you select?
‣ What did you do before you
left?
‣ What did you do on the way?
‣ What did you do when you
first arrived?
‣ What did you do while you
were there?
‣ What did you do before you
left?
‣ What did you do on the way
home?
‣ What did you do when you got
home, related to your trip?
RESEARCH QUESTIONS
Sticky Notes!
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line.
Alignment Diagram
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line.
Alignment Diagram
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line.
Alignment Diagram
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line. Alignment Diagram
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line.
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line.
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line.
LEGEND
Alignment Diagram for GPTMC WideChoosing Mode of Transportation
Consider cost Consider comfort & convenience
How much stuff I needed to take
Parking costs and
convenience
Ease of getting around
Cost of gas Ease of public transportation
Price of airfare
Price of train
Price of car rental
Total travel time
Flight distance
Distance from home
Time duration of trip
Weather at destination
Flight distance
Parking costs and
convenience
Getting Here (Travel Tools)
Weather (Travel Tools)
Getting Here (Travel Tools)
Getting Around (Travel Tools)
Travel to Destination
Eating & sustenance
Travel & wayfinding
Found parking
Stop for meals
Stop for snacks/drinks
Stop at rest stops
Passing time
Used GPS
Read book
Caught up on work
Watched DVD online
Stopped at
unexpected
roadside attraction
Sending communications
Checked bag at airport
Parked at airport
Took train from airport
Stop for gas
Stop to use the restroom
Waited in a security line
Purchased road map
Check local traffic
Pick up rental car
Pay tolls
Text friends en route
Wayfinding
Travelling
View on Map (Itineraries)
Reminder e-mail for meetup
Mapping Social Networking
Plan Your Trip: Car Rentals
Arrival at Destination
Setup Orientation & wayfinding
Eating & sustenance
Planning & communications
Check into hotel
Unpacked bags
Changed clothes
Asked for bathroom
Pick up car
Took subway airport to city
Buy a snack
Contact my friend
to meet me
Waited in a security line
Read services book in hotel room
Took cab to an event
Asked concierge
for close by drug/
convenience store
Got directions to first destination
Used bathroomContacted home to
alert them of arrival
Stretch
Take of seat belt
Lie down
Take a nap
Tweet
Check e-mail
Attractions
Stopped at
unexpected
roadside attraction
View on Map (Itineraries)
Reminder e-mail for meetup
Social Networking
Getting Around (Travel Tools)
Things to Do
Plan Your Trip: Attractions
Mapping
Choosing Regional Travel
Research Attracted by destination
Invited by friend Interested in gallery opening
Interested in band/concert
Interested in broadway show
Had to go to a wedding
Wanted activity offered by that geography
Visit family
Revisit location enjoyed on previous trip
Suggested by friend
Saw magazine advertisement
Purchased a travel book
Read travel rel. local news
Researched local
destinations
Received email
recommendation
Recommendation
from trusted friend
Spontaneous choice
Spontaneously decided to travel
Interested in events
Interested in amenities
Friends, family & coworkers
Self-guided
Things to Do (E-mail)
Things to Do Events Calendar
Things to Do
Tours & Activities
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Newsletter Signup
Trip Preparation (continued)
Preparation & packing Life management
Contacted friends
at destinationMade lists of things to bring
Call friends to confirm meet up plans
Made a playlist on iPod
Contacted babysitter
Cleared digital camera
Bought new camera
Bought clothes Packed suitcase
Packed clothesPurchased toothpaste/toiletries
Packed diapers
Purchased snacks for car
Answered emails
Turned on out of office assistant
Planning Packing
Purchases
Work & family
Sendingcommunications
Things to Do (E-mail)
Reminder e-mail for meetup
Social Networking
Topic (2)
Mental space (3)
Category (4) Category (4)
Could be done online
Only done online
Cannot be done online
Important
Very Important
Somewhat important
Proposed content
Existing content
Existing page stack
Proposed page stack
Existing application
Proposed application
External Application
Secured application
Title: Alignment Diagram for GPTMC Wide | Modified: Thu Jan 08 2009 | Page 1/8
Trip Advisor Reviews
Philly Fun Guide
Trip Advisor Reviews
Choosing a Destination
Attracted by destination Economizing
Family/couple activities
Looked for shopping
Research
Interested in events
Friends, family & coworkers
Self-guided
Interested in amenitites
Research
information online
Number of friends'
recommendations
Considered how many people I know there*
Looked for rural location
Looked for urban location
Wanted to see family
Read travel rel. local news
Area renowned for
certain activity
Looked for regional
bed and breakfasts
Chose a specific
museum
Looked for warm climate
Wanted to see certain exhibit
Wanted to see friends in the area
Compared costsCan be reached
w/o travel time
affecting free time
Looked for train accessability
Save time
Save money
Things to Do (E-mail)
Events Calendar
Things to Do Special Offers
Hotel Packages (Places to Stay)
Things to Do
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Plan Your Trip: Attractions
Getting Around (Travel Tools)
Getting Here (Travel Tools)
Newsletter Signup
Trip Advisor Reviews
Philly Fun Guide
Trip Preparation
Travel & lodging Itinerary creation
Booked flight
Booked train ticket
Booked hotel
Researched plane fares
Booked rental car
Researched train fares
Compare prices on Expedia
Compare prices on Orbitz
Compare prices on Travelocity
Asked for friends'
recommendations
Read reviewsGet friend hotel
recommendation
Get friend food
recommendationPurchased event tickets
Checked weather
conditions
Researched
restaurants by hotel
Looked online for restaurants
Made restaurant reservations
Researched hotels
Researched bed
and breakfasts
Researched
parking near airport
Researched
parking near train
station
Read reviews
Research lodging
Research travel
Tickets & booking
Events Attractions
Dining
Read reviews
Read reviews
Asked for friends'
recommendations
Asked for friends'
recommendations
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)
Hotel Packages (Places to Stay)
Bed & Breakfasts
(Places to Stay)
Philadelphia Hotels (Places
to Stay)
Parking Information
(Travel Tools)
Hotel Packages (Places to Stay)
My Trip Itinerary Builder
Itineraries & Tours (Things to
Do)Plan Your Trip: Car Rentals
Plan Your Trip: Hotels
Plan Your Trip: Attractions
Dining & Food
Hotel Widget
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Trip Advisor Reviews
Open Table
Experiencing the Destination
Setting up"home base"
Unpacked bags
Changed clothes
Downloaded
pictures to laptop
Visiting attractions
Toured winderies
Shop Look up directions
on iPhone
Go to museum
Saw a musical/broadway show
Went bowling
Went dancing
Went snowboarding
Went gambling
Went surfing
Went swimming in ocean
Took a walk around the city
Went hiking
Went camping
Took a city tour
Went to art gallery
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Researched shoes online
Called a friend because I got lost
Took a cab ride
Wayfinding
Attractions
Attending events
Went to a concert
Attended event meeting
Attended after parties
Attended convention/conference
Spoke at conference
Look up directions
on iPhone
Got on subway to Brooklyn
Transferred to bus due to construction
Took subway back to hotel
Called a friend because I got lost
Took a cab ride
Wayfinding
ProfessionalEvents
LeisureEvents
View on Map (Itineraries)
Getting Around (Travel Tools)
Mapping
Events Calendar
Plan Your Trip: Attractions
Things to Do
Plan Your Trip: Attractions
Countryside (Travel Tools)
View on Map (Itineraries)
Getting Around (Travel Tools)
MappingPhilly Fun Guide
Experiencing the Destination (continued)
Passing time
Went swimming in pool
Played boardgames
Went to movie
Explore to take photos
Walked in Little Italy
Watched TV
Socializing
Text message
Met new people
Went to local bar
Talked on the phone
Met friend for coffee
Met friends
Met family
Tweet
Dining & sustenance
Sleep Eat meals
Researched
mexican restaurant
online
Ate at nearby deli
Went out to dinner
Take a shower
Shaved
Spoke to locals for
restaurant
recommendation
Shop for clothes we
forgot to pack
Order breakfast from room service
Bought beer from bodega
Ate at local favorite restaurant
Rest and hygiene
Eating & dining
Getting Around On Foot (Travel
Tools)
Dining & Food (Things to Do)
Nightlife (Things to Do)
Things to DoOpen Table Twitter
AIM/SMS
Leaving the Destination
Departure business
Checked out
Called taxi
Passing time
Bought magazine for trip
Returned rental car
Packed bags
Checked bags
Checked into flight
Travel & wayfinding
Took cab to train station
Took cab to airport
Went to the airport
Turned on GPS for trip
Visiting attractions
Planned mini-exit
trip with Google
maps
Went back to shop to buy that thing
Checked under hotel bed
Printed flight boarding pass
Purchased gift for son
Eating & hygiene
Grabbed food for trip
Grabbed coffee and bagels
Ate breakfast
Had business lunch
Sending communications
Called friends to
alert them of return
Called family to
alert them of return
Said goodbye to a friend
Dining & Food (Things to Do)
Mapping
Getting Around (Travel Tools)
Mapping
Getting Around (Travel Tools)
Things to Do Social Networking
Open Table AIM/SMS
Return trip from destination
Travel & wayfinding
Visiting attractions
Sending communications
Monitored GPS while driving
Called homeListened to local traffic on radio
Tried not to fall asleep while driving
Called friends on
the way home
Stopped at place
we passed on the
way
Got a cab
Eating & resting
Sleep
Stopped for meal
Eat
Passing time
Read a book
Catch up on email
Mapping
Getting Around (Travel Tools)
Social Networking
Dining & Food (Things to Do)
AIM/SMS
Post Trip Activities
Sharing information with friends
Enjoying trip items
Return home business Recovery
Slept at odd times from jetlag
Sleep
Did laundryBalanced checkbook
Sent thank you card to host
Unpacked bagsTold friends about trip
Blog about trip
Reviewed notes
from business
meeting
Downloaded
pictures and
movies
Posted pictures to Flickr
Eat the food purchased in Little Italy
Recommended
restaurant to a
friend.
Emailed friends
Gave gifts purchased on trip
Personal business
Professional business
Social Networking
TripAdvisor Reviews
Flickr
Blogger, LiveJournal, etc.
What is an alignment diagram?
An alignment diagram is a tool that allows us to "align" our design strategy to specific aspects of
human behavior. For the purpose of this diagram, the human behavior we are exploring is the process
of deciding to take a weekend trip, and then executing that trip. The entire diagram can be laid out left
to right to be viewed in it's intended format.
The diagram consists of two major elements divided by an implied Horizon Line (1). The first element,
the mental model for the task of planning and executing a weekend trip, exists above the horizon line,
and is composed of Topics (2), which are then broken into Mental spaces (3). Within each mental
space, you may or may not have additional Categories (4), which are then broken into granular,
component tasks. Color and visual coding noted in the legend denote the importance of tasks to the
research participants and whether or not the task can be performed online, respectively.
Beneath the horizon line are current and proposed web content and applications as well as third party/
external websites that align vertically to the specific mental spaces and categories of tasks described.
The primary purposes of this diagram are to
1. Reveal gaps where the web experience could better support human behavior.
2. Begin to explore issues of information architecture, functionality requirements, and labeling.
3. Build a framework for a mental model of the activities the web site is intended to support.
It is important to note that an alignment diagram is a living document - there should never be a
"finished version." It's not unusual for an organization to revisit it's alignment diagram on a cyclical
basis to evaluate the fit of new content and functionality.
Is it done yet?
Research ProcessHorizon Line (1)
To construct this model, the researcher used an exploratory design exercise where Happy Cog
staff were asked to revisit their mental processes for any recent weekend trips they had planned
and executed.
Each participant broke down each step of their individual process into it's most simple, granular
tasks, and then as a group they evaluated the importance of each task relative to the other tasks
listed.
Mental model for
planning and
executing a
weekend trip
Proposed and
existing web content
and applications that
align with the tasks
and categories listed
above the line.
Choosing regional travel
‣ Research locations
‣ Attracted by destination
‣ Spontaneous choice
Choosing a destination
‣ Research amenities
‣ Attracted by destination
‣ Economizing
Things To Do
Choosing regional travel
‣ Research locations
‣ Attracted by destination
‣ Spontaneous choice
Choosing a destination
‣ Research amenities
‣ Attracted by destination
‣ Economizing
Sitemap
Wireframes
Balance classification
WITH CONTEXT.
EXPLORE.Regardless of scope.
A
OURCLIENT
Collaboration Pairing:
NOT ALL STORIES HAVE A HAPPY ENDING.
SIMPLE IS BETTER.
6
UNITED STATES HOLOCAUST MEMORIAL MUSEUM
CHALLENGE CULTURE‣ This is a huge,
complex organization;
it has no peer
‣ International reach
and value
‣ Wealth of content and
powerful message(s);
learning is a goal
‣ Passionate and committed
staff; all of them, at all
levels
‣ Some tension between
aspirational goals and
actual operations
‣ Limited, dedicated web
resources
ACollaboration Pairing:
LIKE,EVERYBODY. ALL THE PEOPLE.
‣ Clarification of the site strategy
within the museum strategy
‣ Align information structures
with persona mental models
‣ Content strategy (learners)
‣ Meeting design!
Project Definition/Information Architecture
1
WHY MEETINGS?
1
MEETINGS SUCK.
MEETINGS ARE TOXIC
MEETINGSARETOXIC
AT 37 SIGNALS,TRADITIONAL
TO AGILESOFTWARE DEVELOPMENT.
1#
DESIGNFRAMEWORK
MEETING
GROUPDECISION-MAKING
THE DYNAMICS OF
THE DYNAMICS OF DECISION-MAKING
NEW TOPIC
DECISIONPOINT
A UTOPIAN DYNAMIC OF GROUP DECISION-MAKING
LEADER IDEA GROUP MEMBER IDEA
NEW TOPIC
DECISIONPOINT
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
NEW TOPIC
WTF?
WTF?
WTF?
WTF?
WTF?
WTF?
WTF?
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
NEW TOPIC
DECISIONPOINT
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
LEADER IDEA GROUP MEMBER IDEA
NEW TOPIC
DECISIONPOINT
DIVERGENTTHINKING
CONVERGENT THINKING
‣ Generating a list of ideas
‣ Free-flowing open discussion
‣ Seeking diverse points of view
‣ Suspending judgement
DIVERGENTTHINKING
CONVERGENT THINKING
‣ Sorting ideas into categories
‣ Summarizing key points
‣ Coming to agreement
‣ Exercising judgment
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
NEW TOPIC
DECISIONPOINT
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
NEW TOPIC
DECISIONPOINT
“GROAN ZONE”
THE
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING
NEW TOPIC
DECISIONPOINT
‣ Full participation
‣ Mutual understanding
‣ Inclusive solutions
‣ Shared responsibility
CORE VALUES
MAKE IT REAL!
MAKE IT REAL!
PROCESSDESIGN
SOLUTION
SPACE
PROBLEM
SPACE
VISION SPACE
PATHWAYS TO ACTION MODEL
MAKE IT REAL!
A
OURCLIENT
Collaboration Pairing:
BStandard Design Processusually is...
CREATIVE CONCEPTS
CLIENTREVIEW
WE ARE NOT DON DRAPER
BCollaborative Design Processcan be...
CREATIVECONCEPTS
CLIENTREVIEW
BCollaborative Design Processcan be...
CREATIVECONCEPTS
CLIENTREVIEW
SINGLE CONCEPTITERATION
C
C I R C L E O N E N U M B E R F O R E A C H S C A L E .
“How close will the new design be visually and typographically to the current print materials and branding?”
21 3 4 5 6 7 8 9 1 0
“Should the homepage use lots of visuals such as photography to express ideas or focus more on typography and headlines?”
V I S U A L S
21 3 4 5 6 7 8
W O R D S
9 1 0
A.
B.
N A M E
C O M P A N Y
Design Characteristics
R I G I D L Y A D H E R E T O C U R R E N T
S T Y L E S N O T C L O S E A T A L L
C
1 2 3 4 5 6 7 8 9 1 0
S O L E M N H O P E F U L
Should the new design feel solemn or hopeful?”“
D
The new site will feel
by showing
“
Let’s Play MadLibs
”
adjective
noun
7
YEAH, OK. SO WHAT?
A
CAN YOU TELL A STORY ABOUT YOUR PROCESS?
“So, your process walks into a bar...”
B
GOOD IDEAS COME FROM ANYWHEREEven project managers!
C
COLLABORATION IS EXPENSIVEMake your meetings count!
D
BEING DOGMATIC IS FOR THE BIRDS“Find” the unique process needs for each project
Questions?
THANK YOU!