a redesign of visitphilly.com by happy cog

194
VISITPHILLY.COM A REDESIGN OF BY

Upload: kevin-hoffman

Post on 28-Jan-2015

110 views

Category:

Design


1 download

DESCRIPTION

With the redesign of Philadelphia’s premiere tourism website at VisitPhilly.com (formerly gophila.com), Happy Cog and it’s client the Greater Philadelphia Tourism Marketing Corporation (GPTMC) have made Philly appear as vibrant, as hip, and as engaging a city as it is in reality. This redesign resulted in a virtual representation of Philadelphia that is more emotionally compelling and immersive than ever before, yet still entirely credible and accurate to the endless possibilites of what you can do here. In a case study presented as a series of short, practical talks, Happy Cog’s Experience Director, Creative Director, and Development Directors will walk you their design and planning process to create this successful redesign, citing specific research techniques, conceptual approaches, and coding techniques as well as sharing examples of their works in progress that got them to this result.Speakers include:Kevin M. Hoffman - Experience DirectorChristopher Cashdollar - Creative DirectorJenn Lukas - Interactive Development DirectorMark Huot - Technology & Development DirectorGreg Hoy - PresidentThis presentation was designed by Chris Cashdollar.

TRANSCRIPT

Page 1: A Redesign of VisitPhilly.com by Happy Cog

VISITPHILLY.COM

A REDESIGN

OF

BY

Page 2: A Redesign of VisitPhilly.com by Happy Cog

DESIGN

INFORMATION

ARCHITECTURE

FRONT-END

CODINGBACK-END

CODING

Page 3: A Redesign of VisitPhilly.com by Happy Cog

DESIGN

INFORMATION

ARCHITECTURE

FRONT-END

CODINGBACK-END

CODING

Page 4: A Redesign of VisitPhilly.com by Happy Cog

What is IA?

Page 5: A Redesign of VisitPhilly.com by Happy Cog

Increase the number of people from outside the Philadelphia area that choose to book a weekend stay through one of the offered hotel specials.

Primary Goal

Page 6: A Redesign of VisitPhilly.com by Happy Cog

Facilitate awareness of events, destinations, and attractions to both Philadelphia residents and non-residents equally.

Secondary Goal

Page 7: A Redesign of VisitPhilly.com by Happy Cog

gophila.com (old site)

Page 8: A Redesign of VisitPhilly.com by Happy Cog

gophila.com (old site)

• What’s New

• Events Calendar

• Itineraries & Tours

• Countryside

• Photos & Multimedia

• Our Sponsors

• ings to Do

• Places to Stay

• Special Offers

• Travel Tools

• Philly Faorites

• Your Philadelphia

Page 9: A Redesign of VisitPhilly.com by Happy Cog

Mental Models

Page 10: A Redesign of VisitPhilly.com by Happy Cog

Mental Models

• “Aligning Design Strategy with Human Behavior”

Page 11: A Redesign of VisitPhilly.com by Happy Cog

Mental Models

• “Aligning Design Strategy with Human Behavior”

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

Page 12: A Redesign of VisitPhilly.com by Happy Cog

Where is the “context?”

Page 13: A Redesign of VisitPhilly.com by Happy Cog

Where is the “context?”

Page 14: A Redesign of VisitPhilly.com by Happy Cog

Constraint?

Page 15: A Redesign of VisitPhilly.com by Happy Cog

Limited research budget & predetermined scope...

Page 16: A Redesign of VisitPhilly.com by Happy Cog

Solution?

Limited research budget & predetermined scope...

Page 17: A Redesign of VisitPhilly.com by Happy Cog

Existing research + internal team project.

Limited research budget & predetermined scope...

Page 18: A Redesign of VisitPhilly.com by Happy Cog

What is your personal process

for planning a regional,

weekend trip?

Page 19: A Redesign of VisitPhilly.com by Happy Cog

Research Questions

Page 20: A Redesign of VisitPhilly.com by Happy Cog

Research Questions• How did it first occur to you to

take a weekend or overnight trip?

• How did you select a destination?

• What did you do to select your mode of transportation/what did you select?

• What did you do before you le?

• What did you do on the way?

• What did you do when you first arrived?

• What did you do while you were there?

• What did you do before you le?

• What did you do on the way home?

• What did you do when you got home, related to your trip?

Page 21: A Redesign of VisitPhilly.com by Happy Cog

Post-It Sticky Notes

Page 22: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Alignment Diagram

Page 23: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Alignment Diagram

Page 24: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Alignment Diagram

Page 25: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line. Alignment Diagram

Page 26: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 27: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 28: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 29: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Choosing regional travel

• Research locations

• Attracted by destination

• Spontaneous choice

Choosing a Destination

• Research amenities

• Attracted by destination

• Economizing

Page 30: A Redesign of VisitPhilly.com by Happy Cog

Choosing regional travel

• Research locations

• Attracted by destination

• Spontaneous choice

Choosing a Destination

• Research amenities

• Attracted by destination

• Economizing

Things to Do

Page 31: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 32: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 33: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Select Transportation

• Cost

• Comfort & conenience

Trip Preparation

• Secure lodging

• Schedule

• Packing

• Communications

Travel

• Meals

• Wayfinding

• Passing time

• Communications

Page 34: A Redesign of VisitPhilly.com by Happy Cog

Select Transportation

• Cost

• Comfort & conenience

Trip Preparation

• Secure lodging

• Schedule

• Packing

• Communications

Travel

• Meals

• Wayfinding

• Passing time

• Communications

Plan Your Trip

Page 35: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 36: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Page 37: A Redesign of VisitPhilly.com by Happy Cog

LEGEND

Alignment Diagram for GPTMC WideChoosing Mode of Transportation

Consider cost Consider comfort & convenience

How much stuff I needed to take

Parking costs and

convenience

Ease of getting around

Cost of gas Ease of public transportation

Price of airfare

Price of train

Price of car rental

Total travel time

Flight distance

Distance from home

Time duration of trip

Weather at destination

Flight distance

Parking costs and

convenience

Getting Here (Travel Tools)

Weather (Travel Tools)

Getting Here (Travel Tools)

Getting Around (Travel Tools)

Travel to Destination

Eating & sustenance

Travel & wayfinding

Found parking

Stop for meals

Stop for snacks/drinks

Stop at rest stops

Passing time

Used GPS

Read book

Caught up on work

Watched DVD online

Stopped at

unexpected

roadside attraction

Sending communications

Checked bag at airport

Parked at airport

Took train from airport

Stop for gas

Stop to use the restroom

Waited in a security line

Purchased road map

Check local traffic

Pick up rental car

Pay tolls

Text friends en route

Wayfinding

Travelling

View on Map (Itineraries)

Reminder e-mail for meetup

Mapping Social Networking

Plan Your Trip: Car Rentals

Arrival at Destination

Setup Orientation & wayfinding

Eating & sustenance

Planning & communications

Check into hotel

Unpacked bags

Changed clothes

Asked for bathroom

Pick up car

Took subway airport to city

Buy a snack

Contact my friend

to meet me

Waited in a security line

Read services book in hotel room

Took cab to an event

Asked concierge

for close by drug/

convenience store

Got directions to first destination

Used bathroomContacted home to

alert them of arrival

Stretch

Take of seat belt

Lie down

Take a nap

Tweet

Check e-mail

Attractions

Stopped at

unexpected

roadside attraction

View on Map (Itineraries)

Reminder e-mail for meetup

Social Networking

Getting Around (Travel Tools)

Things to Do

Plan Your Trip: Attractions

Mapping

Choosing Regional Travel

Research Attracted by destination

Invited by friend Interested in gallery opening

Interested in band/concert

Interested in broadway show

Had to go to a wedding

Wanted activity offered by that geography

Visit family

Revisit location enjoyed on previous trip

Suggested by friend

Saw magazine advertisement

Purchased a travel book

Read travel rel. local news

Researched local

destinations

Received email

recommendation

Recommendation

from trusted friend

Spontaneous choice

Spontaneously decided to travel

Interested in events

Interested in amenities

Friends, family & coworkers

Self-guided

Things to Do (E-mail)

Things to Do Events Calendar

Things to Do

Tours & Activities

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Newsletter Signup

Trip Preparation (continued)

Preparation & packing Life management

Contacted friends

at destinationMade lists of things to bring

Call friends to confirm meet up plans

Made a playlist on iPod

Contacted babysitter

Cleared digital camera

Bought new camera

Bought clothes Packed suitcase

Packed clothesPurchased toothpaste/toiletries

Packed diapers

Purchased snacks for car

Answered emails

Turned on out of office assistant

Planning Packing

Purchases

Work & family

Sendingcommunications

Things to Do (E-mail)

Reminder e-mail for meetup

Social Networking

Topic (2)

Mental space (3)

Category (4) Category (4)

Could be done online

Only done online

Cannot be done online

Important

Very Important

Somewhat important

Proposed content

Existing content

Existing page stack

Proposed page stack

Existing application

Proposed application

External Application

Secured application

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

Trip Advisor Reviews

Philly Fun Guide

Trip Advisor Reviews

Choosing a Destination

Attracted by destination Economizing

Family/couple activities

Looked for shopping

Research

Interested in events

Friends, family & coworkers

Self-guided

Interested in amenitites

Research

information online

Number of friends'

recommendations

Considered how many people I know there*

Looked for rural location

Looked for urban location

Wanted to see family

Read travel rel. local news

Area renowned for

certain activity

Looked for regional

bed and breakfasts

Chose a specific

museum

Looked for warm climate

Wanted to see certain exhibit

Wanted to see friends in the area

Compared costsCan be reached

w/o travel time

affecting free time

Looked for train accessability

Save time

Save money

Things to Do (E-mail)

Events Calendar

Things to Do Special Offers

Hotel Packages (Places to Stay)

Things to Do

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Plan Your Trip: Attractions

Getting Around (Travel Tools)

Getting Here (Travel Tools)

Newsletter Signup

Trip Advisor Reviews

Philly Fun Guide

Trip Preparation

Travel & lodging Itinerary creation

Booked flight

Booked train ticket

Booked hotel

Researched plane fares

Booked rental car

Researched train fares

Compare prices on Expedia

Compare prices on Orbitz

Compare prices on Travelocity

Asked for friends'

recommendations

Read reviewsGet friend hotel

recommendation

Get friend food

recommendationPurchased event tickets

Checked weather

conditions

Researched

restaurants by hotel

Looked online for restaurants

Made restaurant reservations

Researched hotels

Researched bed

and breakfasts

Researched

parking near airport

Researched

parking near train

station

Read reviews

Research lodging

Research travel

Tickets & booking

Events Attractions

Dining

Read reviews

Read reviews

Asked for friends'

recommendations

Asked for friends'

recommendations

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)

Hotel Packages (Places to Stay)

Bed & Breakfasts

(Places to Stay)

Philadelphia Hotels (Places

to Stay)

Parking Information

(Travel Tools)

Hotel Packages (Places to Stay)

My Trip Itinerary Builder

Itineraries & Tours (Things to

Do)Plan Your Trip: Car Rentals

Plan Your Trip: Hotels

Plan Your Trip: Attractions

Dining & Food

Hotel Widget

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Trip Advisor Reviews

Open Table

Experiencing the Destination

Setting up"home base"

Unpacked bags

Changed clothes

Downloaded

pictures to laptop

Visiting attractions

Toured winderies

Shop Look up directions

on iPhone

Go to museum

Saw a musical/broadway show

Went bowling

Went dancing

Went snowboarding

Went gambling

Went surfing

Went swimming in ocean

Took a walk around the city

Went hiking

Went camping

Took a city tour

Went to art gallery

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Researched shoes online

Called a friend because I got lost

Took a cab ride

Wayfinding

Attractions

Attending events

Went to a concert

Attended event meeting

Attended after parties

Attended convention/conference

Spoke at conference

Look up directions

on iPhone

Got on subway to Brooklyn

Transferred to bus due to construction

Took subway back to hotel

Called a friend because I got lost

Took a cab ride

Wayfinding

ProfessionalEvents

LeisureEvents

View on Map (Itineraries)

Getting Around (Travel Tools)

Mapping

Events Calendar

Plan Your Trip: Attractions

Things to Do

Plan Your Trip: Attractions

Countryside (Travel Tools)

View on Map (Itineraries)

Getting Around (Travel Tools)

MappingPhilly Fun Guide

Experiencing the Destination (continued)

Passing time

Went swimming in pool

Played boardgames

Went to movie

Explore to take photos

Walked in Little Italy

Watched TV

Socializing

Text message

Met new people

Went to local bar

Talked on the phone

Met friend for coffee

Met friends

Met family

Tweet

Dining & sustenance

Sleep Eat meals

Researched

mexican restaurant

online

Ate at nearby deli

Went out to dinner

Take a shower

Shaved

Spoke to locals for

restaurant

recommendation

Shop for clothes we

forgot to pack

Order breakfast from room service

Bought beer from bodega

Ate at local favorite restaurant

Rest and hygiene

Eating & dining

Getting Around On Foot (Travel

Tools)

Dining & Food (Things to Do)

Nightlife (Things to Do)

Things to DoOpen Table Twitter

AIM/SMS

Leaving the Destination

Departure business

Checked out

Called taxi

Passing time

Bought magazine for trip

Returned rental car

Packed bags

Checked bags

Checked into flight

Travel & wayfinding

Took cab to train station

Took cab to airport

Went to the airport

Turned on GPS for trip

Visiting attractions

Planned mini-exit

trip with Google

maps

Went back to shop to buy that thing

Checked under hotel bed

Printed flight boarding pass

Purchased gift for son

Eating & hygiene

Grabbed food for trip

Grabbed coffee and bagels

Ate breakfast

Had business lunch

Sending communications

Called friends to

alert them of return

Called family to

alert them of return

Said goodbye to a friend

Dining & Food (Things to Do)

Mapping

Getting Around (Travel Tools)

Mapping

Getting Around (Travel Tools)

Things to Do Social Networking

Open Table AIM/SMS

Return trip from destination

Travel & wayfinding

Visiting attractions

Sending communications

Monitored GPS while driving

Called homeListened to local traffic on radio

Tried not to fall asleep while driving

Called friends on

the way home

Stopped at place

we passed on the

way

Got a cab

Eating & resting

Sleep

Stopped for meal

Eat

Passing time

Read a book

Catch up on email

Mapping

Getting Around (Travel Tools)

Social Networking

Dining & Food (Things to Do)

AIM/SMS

Post Trip Activities

Sharing information with friends

Enjoying trip items

Return home business Recovery

Slept at odd times from jetlag

Sleep

Did laundryBalanced checkbook

Sent thank you card to host

Unpacked bagsTold friends about trip

Blog about trip

Reviewed notes

from business

meeting

Downloaded

pictures and

movies

Posted pictures to Flickr

Eat the food purchased in Little Italy

Recommended

restaurant to a

friend.

Emailed friends

Gave gifts purchased on trip

Personal business

Professional business

Social Networking

TripAdvisor Reviews

Flickr

Blogger, LiveJournal, etc.

What is an alignment diagram?

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

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

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

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

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

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

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

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

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

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

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

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

The primary purposes of this diagram are to

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

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

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

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

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

basis to evaluate the fit of new content and functionality.

Is it done yet?

Research ProcessHorizon Line (1)

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

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

and executed.

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

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

listed.

Mental model for

planning and

executing a

weekend trip

Proposed and

existing web content

and applications that

align with the tasks

and categories listed

above the line.

Arrive at the Destination

• Setup

• Communications

• Wayfinding

• Meals

• Attractions

Experience the Destination

• Create “Home base”

• Attending events

• Visiting attractions

• Meals

• Socializing

• Passing time

Page 38: A Redesign of VisitPhilly.com by Happy Cog

Arrive at the Destination

• Setup

• Communications

• Wayfinding

• Meals

• Attractions

Experience the Destination

• Create “Home base”

• Attending events

• Visiting attractions

• Meals

• Socializing

• Passing time

Philly Now

Page 39: A Redesign of VisitPhilly.com by Happy Cog

Sitemap

Page 40: A Redesign of VisitPhilly.com by Happy Cog

Wireframes

Page 41: A Redesign of VisitPhilly.com by Happy Cog

Wireframes

Page 42: A Redesign of VisitPhilly.com by Happy Cog
Page 43: A Redesign of VisitPhilly.com by Happy Cog
Page 44: A Redesign of VisitPhilly.com by Happy Cog
Page 45: A Redesign of VisitPhilly.com by Happy Cog
Page 46: A Redesign of VisitPhilly.com by Happy Cog

Bridging classification and context with a larger taxonomy.

When is something navigation, and when is it interface?

Clumping of objects: itineraries, top 10 lists, etc.

Search engine optimization, as it affects both label choices and legacy page rankings.

Other IA Considerations

Page 47: A Redesign of VisitPhilly.com by Happy Cog

Balance classificationwith context.

Page 48: A Redesign of VisitPhilly.com by Happy Cog

Explore.Regardless of scope.

Page 49: A Redesign of VisitPhilly.com by Happy Cog

DESIGN

INFORMATION

ARCHITECTURE

FRONT-END

CODINGBACK-END

CODING

Page 50: A Redesign of VisitPhilly.com by Happy Cog

SomeBACKGROUND

Page 51: A Redesign of VisitPhilly.com by Happy Cog

AREVOLUTION

Page 52: A Redesign of VisitPhilly.com by Happy Cog

What Needed Fixing

• A modern CMS

• Simplified management

• Improed hosting

• Wider support channels

Page 53: A Redesign of VisitPhilly.com by Happy Cog

The Constraints

• Limited timeline

• Public launch

• A lot of content

• A new system

Page 54: A Redesign of VisitPhilly.com by Happy Cog

WorkingWithin Constraints

Page 55: A Redesign of VisitPhilly.com by Happy Cog

UsingExpressionEngine

Page 56: A Redesign of VisitPhilly.com by Happy Cog

Frameworks

Page 57: A Redesign of VisitPhilly.com by Happy Cog

Gems…

Page 58: A Redesign of VisitPhilly.com by Happy Cog

Gems… have issues

Page 59: A Redesign of VisitPhilly.com by Happy Cog

EE has fewer issues

Page 60: A Redesign of VisitPhilly.com by Happy Cog

Why EE?

Page 61: A Redesign of VisitPhilly.com by Happy Cog

Engagingthe Client

Page 62: A Redesign of VisitPhilly.com by Happy Cog
Page 63: A Redesign of VisitPhilly.com by Happy Cog
Page 64: A Redesign of VisitPhilly.com by Happy Cog
Page 65: A Redesign of VisitPhilly.com by Happy Cog
Page 66: A Redesign of VisitPhilly.com by Happy Cog
Page 67: A Redesign of VisitPhilly.com by Happy Cog

Planningfor the Future

Page 68: A Redesign of VisitPhilly.com by Happy Cog

DESIGN

INFORMATION

ARCHITECTURE

FRONT-END

CODINGBACK-END

CODING

Page 69: A Redesign of VisitPhilly.com by Happy Cog

Baseball!!

Page 70: A Redesign of VisitPhilly.com by Happy Cog
Page 71: A Redesign of VisitPhilly.com by Happy Cog

JavaScript Off

Page 72: A Redesign of VisitPhilly.com by Happy Cog

Letting PhiladelphiaBE THE STAR

Page 73: A Redesign of VisitPhilly.com by Happy Cog

Choose Your h1’s WISELY

Page 74: A Redesign of VisitPhilly.com by Happy Cog
Page 75: A Redesign of VisitPhilly.com by Happy Cog
Page 76: A Redesign of VisitPhilly.com by Happy Cog
Page 77: A Redesign of VisitPhilly.com by Happy Cog
Page 78: A Redesign of VisitPhilly.com by Happy Cog

{if segment_1}

<strong class="logo"><a href="{path=/}" title="Home">Philadelphia and the Countryside&reg; Beta</a></strong>

{if:else}

<h1 class="logo"><a href="{path=/}" title="Home">Philadelphia and the Countryside&reg; Beta</a></h1>

{/if}

Header Include

Text

Page 79: A Redesign of VisitPhilly.com by Happy Cog
Page 80: A Redesign of VisitPhilly.com by Happy Cog
Page 81: A Redesign of VisitPhilly.com by Happy Cog
Page 82: A Redesign of VisitPhilly.com by Happy Cog
Page 83: A Redesign of VisitPhilly.com by Happy Cog
Page 84: A Redesign of VisitPhilly.com by Happy Cog
Page 85: A Redesign of VisitPhilly.com by Happy Cog

Give Your Links aHOME

Page 86: A Redesign of VisitPhilly.com by Happy Cog
Page 87: A Redesign of VisitPhilly.com by Happy Cog
Page 88: A Redesign of VisitPhilly.com by Happy Cog
Page 89: A Redesign of VisitPhilly.com by Happy Cog
Page 90: A Redesign of VisitPhilly.com by Happy Cog
Page 91: A Redesign of VisitPhilly.com by Happy Cog
Page 92: A Redesign of VisitPhilly.com by Happy Cog
Page 93: A Redesign of VisitPhilly.com by Happy Cog
Page 94: A Redesign of VisitPhilly.com by Happy Cog
Page 95: A Redesign of VisitPhilly.com by Happy Cog
Page 96: A Redesign of VisitPhilly.com by Happy Cog
Page 97: A Redesign of VisitPhilly.com by Happy Cog

The Keyboard IsNOT YOUR ENEMY

Page 98: A Redesign of VisitPhilly.com by Happy Cog
Page 99: A Redesign of VisitPhilly.com by Happy Cog
Page 100: A Redesign of VisitPhilly.com by Happy Cog
Page 101: A Redesign of VisitPhilly.com by Happy Cog
Page 102: A Redesign of VisitPhilly.com by Happy Cog
Page 103: A Redesign of VisitPhilly.com by Happy Cog

Don’t Hide thePRETTY PICTURES

Page 104: A Redesign of VisitPhilly.com by Happy Cog
Page 105: A Redesign of VisitPhilly.com by Happy Cog

JavaScript Off

Page 106: A Redesign of VisitPhilly.com by Happy Cog
Page 107: A Redesign of VisitPhilly.com by Happy Cog

JavaScript Off

Page 108: A Redesign of VisitPhilly.com by Happy Cog
Page 109: A Redesign of VisitPhilly.com by Happy Cog

JavaScript Off

Page 110: A Redesign of VisitPhilly.com by Happy Cog

JavaScript Off

Page 111: A Redesign of VisitPhilly.com by Happy Cog

JavaScript Off

Page 112: A Redesign of VisitPhilly.com by Happy Cog

JavaScript Off

Page 113: A Redesign of VisitPhilly.com by Happy Cog

Don’t AlienateYOUR USERS

Page 114: A Redesign of VisitPhilly.com by Happy Cog
Page 115: A Redesign of VisitPhilly.com by Happy Cog
Page 116: A Redesign of VisitPhilly.com by Happy Cog
Page 117: A Redesign of VisitPhilly.com by Happy Cog

Don’t AlienateYOUR CUSTOMERS

Page 118: A Redesign of VisitPhilly.com by Happy Cog

w3schools.comJavaScript Statistics

thecounter.comJavaScript False: 4393090 (6%)

100 Visitors6 users without JS

100,000 Visitors6,000 users without JS

Page 119: A Redesign of VisitPhilly.com by Happy Cog

96% of Statistics areMADE UP ON

THE SPOT

Page 120: A Redesign of VisitPhilly.com by Happy Cog
Page 121: A Redesign of VisitPhilly.com by Happy Cog
Page 122: A Redesign of VisitPhilly.com by Happy Cog
Page 123: A Redesign of VisitPhilly.com by Happy Cog

Pat YourselvesON THE BACK

Page 124: A Redesign of VisitPhilly.com by Happy Cog

DESIGN

INFORMATION

ARCHITECTURE

FRONT-END

CODINGBACK-END

CODING

Page 125: A Redesign of VisitPhilly.com by Happy Cog

ReinterpretingPHILADELPHIA

Page 126: A Redesign of VisitPhilly.com by Happy Cog
Page 127: A Redesign of VisitPhilly.com by Happy Cog

CATALYST

Page 128: A Redesign of VisitPhilly.com by Happy Cog

CATALYST

Page 129: A Redesign of VisitPhilly.com by Happy Cog

CATALYST

Page 130: A Redesign of VisitPhilly.com by Happy Cog

CATALYST

Page 131: A Redesign of VisitPhilly.com by Happy Cog

We went looking elsewhere.

Page 132: A Redesign of VisitPhilly.com by Happy Cog
Page 133: A Redesign of VisitPhilly.com by Happy Cog
Page 134: A Redesign of VisitPhilly.com by Happy Cog
Page 135: A Redesign of VisitPhilly.com by Happy Cog
Page 136: A Redesign of VisitPhilly.com by Happy Cog
Page 137: A Redesign of VisitPhilly.com by Happy Cog
Page 138: A Redesign of VisitPhilly.com by Happy Cog
Page 139: A Redesign of VisitPhilly.com by Happy Cog

Where else?

Page 140: A Redesign of VisitPhilly.com by Happy Cog
Page 141: A Redesign of VisitPhilly.com by Happy Cog
Page 142: A Redesign of VisitPhilly.com by Happy Cog

UncoveringTHE CONCEPT

Page 143: A Redesign of VisitPhilly.com by Happy Cog

DISCOVERY IA DESIGN

PROCESS

Page 144: A Redesign of VisitPhilly.com by Happy Cog

DISCOVERY IA DESIGN

PROCESS

Page 145: A Redesign of VisitPhilly.com by Happy Cog

DISCOVERY IA DESIGN

PROCESS

DESIGN

Page 146: A Redesign of VisitPhilly.com by Happy Cog

UNIFIED

APPROACH

Page 147: A Redesign of VisitPhilly.com by Happy Cog

UNIFIED

APPROACH

Page 148: A Redesign of VisitPhilly.com by Happy Cog

UNIFIED

APPROACH

Page 149: A Redesign of VisitPhilly.com by Happy Cog

UNIFIED

APPROACH

1

Page 150: A Redesign of VisitPhilly.com by Happy Cog

UNIFIED

APPROACH

1 2

Page 151: A Redesign of VisitPhilly.com by Happy Cog

UNIFIED

APPROACH

1 2

3

Page 152: A Redesign of VisitPhilly.com by Happy Cog

CONTEMPORARYDISTINCTIVENOSTALGIC FASHIONABLE

ART DIRECTION

THEMES

Page 153: A Redesign of VisitPhilly.com by Happy Cog

gophila.com (old site)

Page 154: A Redesign of VisitPhilly.com by Happy Cog
Page 155: A Redesign of VisitPhilly.com by Happy Cog
Page 156: A Redesign of VisitPhilly.com by Happy Cog
Page 157: A Redesign of VisitPhilly.com by Happy Cog
Page 158: A Redesign of VisitPhilly.com by Happy Cog
Page 159: A Redesign of VisitPhilly.com by Happy Cog
Page 160: A Redesign of VisitPhilly.com by Happy Cog
Page 161: A Redesign of VisitPhilly.com by Happy Cog
Page 162: A Redesign of VisitPhilly.com by Happy Cog
Page 163: A Redesign of VisitPhilly.com by Happy Cog
Page 164: A Redesign of VisitPhilly.com by Happy Cog
Page 165: A Redesign of VisitPhilly.com by Happy Cog
Page 166: A Redesign of VisitPhilly.com by Happy Cog
Page 167: A Redesign of VisitPhilly.com by Happy Cog

CONTEMPORARYDISTINCTIVENOSTALGIC FASHIONABLE

ART DIRECTION

THEMES

Page 168: A Redesign of VisitPhilly.com by Happy Cog

CONTEMPORARYDISTINCTIVENOSTALGIC FASHIONABLE

ART DIRECTION

THEMES

Page 169: A Redesign of VisitPhilly.com by Happy Cog

Forming Voltron

Page 170: A Redesign of VisitPhilly.com by Happy Cog
Page 171: A Redesign of VisitPhilly.com by Happy Cog
Page 172: A Redesign of VisitPhilly.com by Happy Cog
Page 173: A Redesign of VisitPhilly.com by Happy Cog
Page 174: A Redesign of VisitPhilly.com by Happy Cog
Page 175: A Redesign of VisitPhilly.com by Happy Cog
Page 176: A Redesign of VisitPhilly.com by Happy Cog
Page 177: A Redesign of VisitPhilly.com by Happy Cog

The TRICKY BITS

Page 178: A Redesign of VisitPhilly.com by Happy Cog
Page 179: A Redesign of VisitPhilly.com by Happy Cog
Page 180: A Redesign of VisitPhilly.com by Happy Cog

(This.)

Page 181: A Redesign of VisitPhilly.com by Happy Cog
Page 182: A Redesign of VisitPhilly.com by Happy Cog
Page 183: A Redesign of VisitPhilly.com by Happy Cog
Page 184: A Redesign of VisitPhilly.com by Happy Cog
Page 185: A Redesign of VisitPhilly.com by Happy Cog
Page 186: A Redesign of VisitPhilly.com by Happy Cog
Page 187: A Redesign of VisitPhilly.com by Happy Cog
Page 188: A Redesign of VisitPhilly.com by Happy Cog
Page 189: A Redesign of VisitPhilly.com by Happy Cog
Page 190: A Redesign of VisitPhilly.com by Happy Cog
Page 191: A Redesign of VisitPhilly.com by Happy Cog

Simple is better.

Page 192: A Redesign of VisitPhilly.com by Happy Cog

In CONCLUSION

Page 193: A Redesign of VisitPhilly.com by Happy Cog
Page 194: A Redesign of VisitPhilly.com by Happy Cog

Thank you...

RefreshPhilly!Comcast!

MissionStaff!Philadelphia Citizens!