Collaboration is Key to City Branding

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

1

WHO IS HAPPY COG?
Small, dedicated teams

WHO IS HAPPY COG?
Innovation & Education

THE BOOK THAT STARTED IT ALL
Designing With Web Standards

PUBLISHING (MORE BOOKS)
A Book Apart

WHO IS HAPPY COG?
Collaboration

EST.
1972

KEVIN M. HOFFMAN
Experience Director
@kevinmhoffman

What I Do:
‣ Strategy
‣ Requirements
‣ User Research
‣ Information Architecture
‣ Write articles
‣ User Interface Design
‣ Speak at events and
‣ Heuristics (Best Practices) conferences
‣
(like this one)
Content Strategy
‣ Editorial Direction

What I Create:
‣ Communications
Briefs
‣ Meeting Agendas
‣ Content Inventory
‣ Sitemaps
‣ Editorial Guidelines
‣ Research Activities
and Reports ‣ User Flows
‣ Personas ‣ Business Process
‣ Wireframes ‣ UX Tweets from
@happycog every
‣ Usability Testing Tuesday
and Reports

EST.
1977

CHRISTOPHER J. CASHDOLLAR
Creative Director
@ccashdollar

What I Do:
‣ Lead the design team
‣ I make the pretty, too
‣ Team up with the client to set
the tone for the project
‣ Develop the creative strategy
‣ Write / speak / teach

What I Create:

‣ Design-focused workshops
‣ Creative Briefs
‣ Website Design ‣ Sketching / brainstorming
sessions
‣ User Interface Design
‣ Semi-coherent design-
‣ Logos related Tweets for
‣ Style Guides @happycog every Thursday

‣ Illustrations

A
Our Phases

PROJECT INFORMATION VISUAL DEVELOPMENT
DEFINITION ARCHITECTURE DESIGN

B
A Process
could be... DESIGN
BLITZ
KICKOFF QA &
WORKSHOP CREATIVE
“VIP” PAGE REFINEMENT
CONCEPTS
DESIGN
TEMPLATE &
CREATIVE SITEMAP & CMS
BRIEF WIREFRAMES TESTING
USER PROTOTYPE
RESEARCH

C
Our Process Values

COLLABORATIVE
ITERATIVE
FLEXIBLE

CHALLENGE CULTURE
‣ E-commerce ‣ Aggressive deadlines
‣ Highly customized, ‣ Bottom line driven
infinite variations decisions
‣ Endless pathways for ‣ Many vendors, but
upsell one project

Project Definition/
Information
Architecture
‣ Leadership involvement early in
process
‣ Extended “no meeting” work
periods in tight collaboration
‣ Collaborative, sprint based
design activities

CHALLENGE CULTURE
‣ Public (but also ‣ Political... but what does
internal) audiences that really mean?
‣ Strong, historic ‣ B-52 (bombers, not
identity in transition band): Powerful
stakeholders outside of
‣ Reengineer an the process
organizationally
based-site to a news ‣ Siloed information and
and messaging site solutions

A
Collaboration Pairing:

AUDIENCES
& CLIENTS

Project Definition/
Information
Architecture
‣ Early, open discussion with
focused meeting outcomes
‣ Guerilla, cross-sectional
audience research - what ties
them together?
‣ New solutions to old problems

What is a wireframe?

Wireframes provide a presentation of the hierarchy of
items present on the page, and an overview of what will
and won't have persistence throughout the site, when it
will persist, and why.
Wireframes are not meant to provide any strict guidelines
for visual design, and a visual designer will significantly
deviate from the visual appearance and layout when
executing them.

HIERARCHY
+
PERSISTENCE

NOT
VISUAL DESIGN

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

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

“SWISS” DESIGN
Practicing neutrality

A

OUR
DESIGN
TEAM

Rules need to be understood

TO BE BROKEN

Prepare bombing

CONTINGENCIES

CHALLENGE CULTURE
‣ Agency got no blog! ‣ Given license, we’d like to
expand more than contract
‣ Strong existing
presence on the web ‣ Three different offices with
(ALA, AEA, different voices and
Zeldman.com) different design
approaches
‣ Happy Cog is more
than Jeffrey ‣ Everyone wants to be
involved

A

THE BOSSES

Project Definition/
Information
Architecture
‣ Given the mandate
“use Twitter.”
‣ Experiment.
Try something different.

Actual Process
As close to agile as
Happy Cog is going to get.

A

A FRONT-
END
DEVELOPER

Use deliverables for

DISCUSSION

That whole details and

DEVILS THING

CHALLENGE CULTURE
‣ We (need to re) build ‣ Visual thinkers, with great
this city (brand)! photography and content
‣ Content? We got it! ‣ More prone to thinking
In fact, we got too about ad campaigns than
much! websites
‣ Who is this site for ‣ Keeping up with the
again? Jonesez

A

RESEARCH
SUBJECTS
(WHO ARE ALSO
DESIGNERS)

GOALS
Increase the number of people from outside

1 the Philadelphia area that choose to book a
weekend stay through one of the offered
hotel specials.

GOALS
Increase the number of people from outside

1 the Philadelphia area that choose to book a
weekend stay through one of the offered
hotel specials.

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

‣ Things to Do ‣ What’s New
‣ Places to Stay ‣ Events Calendar
‣ Special Offers ‣ Itineraries & Tours
‣ Travel Tools ‣ Countryside
‣ Philly Favorites ‣ Photos & Multimedia
‣ Your Philadelphia ‣ Our Sponsors

• “Aligning
Design Strategy with
Human Behavior”
• by Indi Young,
available at
RosenfeldMedia.com or
the books are sold on
the internet

Mental Models

Limited research budget &
predetermined scope.

SOLUTION?

Existing research +

USE DESIGN TEAM
AS GUINEA PIGS

What is your
personal process
for planning a regional,
weekend trip?

RESEARCH QUESTIONS
‣ How did it first occur to you to ‣ What did you do when you
take a weekend or overnight first arrived?
trip?
‣ What did you do while you
‣ How did you select a were there?
destination?
‣ What did you do before you
‣ What did you do to select your left?
mode of transportation/what
‣ What did you do on the way
did you select?
home?
‣ What did you do before you
‣ What did you do when you got
left?
home, related to your trip?
‣ What did you do on the way?

LEGEND
Topic (2)

Mental space (3)
Category (4) Category (4)
Mental model for
Cannot be done Somewhat
planning and online important
executing a
weekend trip
Could be done Important
online

Only done Very Important
online

Alignment Diagram
Horizon Line (1)

Existing content Existing
application

Topic (2)

Mental space (3)
Category (4) Category (4)
Mental model for
Cannot be done Somewhat
planning and online important
executing a
weekend trip
Could be done Important
online

Only done Very Important
online
Horizon Line (1)

application

Alignment Diagram
Proposed and
existing web content Proposed Proposed
content application
and applications that

online
Horizon Line (1)

application

Proposed and
existing web content Proposed Proposed
content application
and applications that
align with the tasks
and categories listed Existing page
Secured
stack
application
above the line.

Proposed page
External
stack
Application

Alignment Diagram

Choosing Regional Travel Choosing a Destination

Research Attracted by destination Spontaneous Research Attracted by destination
choice Interested in
amenitites

Area renowned for
certain activity

Chose a speciﬁc
Friends, family & museum
coworkers

Had to go to a Looked for regional
wedding bed and breakfasts
Self-guided

Revisit location
Visit family enjoyed on Looked for
Friends, family &
previous trip urban location
coworkers

Wanted to see
Recommendation Saw magazine Interested in friends in the Looked for rural
from trusted friend advertisement location
events area

Invited by friend Read travel rel. Interested in Wanted to see Looked for
local news gallery opening family warm climate
Self-guided

Considered how
Suggested by Purchased a Interested in many people I Read travel rel. Looked for
Interested in Interested in
friend travel book broadway show know there* local news shopping
amenities events

Wanted activity Spontaneously
Received email Researched local Interested in offered by that decided to Number of friends' Research Wanted to see Family/couple
recommendation destinations band/concert recommendations information online certain exhibit activities
geography travel

Things to Do Events Things to Do Events
Things to Do Things to Do Things to Do Things to Do
(E-mail) Calendar (E-mail) Calendar

Plan Your Trip: Tours & Plan Your Trip: Plan Your Trip: Plan Your Trip:
Plan Your Trip:

Alignment Diagram
Attractions Activities Attractions Attractions Attractions
Attractions

Newsletter Plan Your Trip: Trip Advisor Newsletter Philly Fun Trip Advisor
Signup Attractions Reviews Signup Guide Reviews

Trip Advisor Philly Fun
Reviews Guide

Choosing Regional Travel Choosing a Destination

Research Attracted by destination Spontaneous Research Attracted by destination
choice Interested in
amenitites

Area renowned for
certain activity

Chose a speciﬁc
coworkers

Had to go to a Looked for regional
Self-guided

Revisit location
Visit family enjoyed on Looked for
Friends, family &
previous trip urban location
coworkers

Wanted to see
Recommendation Saw magazine Interested in friends in the Looked for rural
from trusted friend advertisement location
events area

Invited by friend Read travel rel. Interested in Wanted to see Looked for
local news gallery opening family warm climate
Self-guided

Considered how
Suggested by Purchased a Interested in many people I Read travel rel. Looked for
Interested in Interested in
friend travel book broadway show know there* local news shopping
amenities events

Wanted activity Spontaneously
Received email Researched local Interested in offered by that decided to Number of friends' Research Wanted to see Family/couple
recommendation destinations band/concert recommendations information online certain exhibit activities
geography travel

Things to Do Events Things to Do Events
Things to Do Things to Do Things to Do Things to Do
(E-mail) Calendar (E-mail) Calendar

Plan Your Trip: Tours & Plan Your Trip: Plan Your Trip: Plan Your Trip:
Plan Your Trip:
Attractions Activities Attractions Attractions Attractions
Attractions

Newsletter Plan Your Trip: Trip Advisor Newsletter Philly Fun Trip Advisor
Signup Attractions Reviews Signup Guide Reviews

Trip Advisor Philly Fun
Reviews Guide

Post Trip Activities

Eating & resting Passing time Sharing Enjoying trip Return home business Recovery
ns information with items
friends

Personal business

Gave gifts
Recommended purchased on
restaurant to a
trip
friend.

Told friends Unpacked bags
about trip

Sleep Blog about trip Balanced Did laundry
checkbook

Stopped for Read a book Posted pictures Sent thank you
Professional Sleep
meal to Flickr card to host
business

Eat the food Slept at odd
Eat Catch up on Emailed friends purchased in Downloaded Reviewed notes times from
email pictures and from business
Little Italy jetlag
movies meeting

Dining & Food Social
(Things to Do) Networking

TripAdvisor
Reviews

Blogger,
LiveJournal, etc.

Flickr

Choosing Regional Travel Choosing a Destination Choosing Mode of Transportation Trip Preparation Trip Preparation (con

Research Attracted by destination Spontaneous Research Attracted by destination Economizing Consider cost Consider comfort & convenience Travel & lodging Itinerary creation Preparation & packing
choice Interested in Research travel
amenitites

Read reviews
Area renowned for
certain activity

Compare prices
Chose a speciﬁc on Expedia
Dining
coworkers

Compare prices Read reviews
Had to go to a Looked for regional Price of airfare
on Orbitz
Self-guided

Revisit location Distance from Compare prices Asked for friends'
enjoyed on Looked for Price of train home recommendations
Visit family on Travelocity
Friends, family & urban location Tickets & booking Purc
previous trip
coworkers

Wanted to see How much stuff Researched Booked rental Researched Pur
Recommendation Saw magazine Looked for rural Cost of gas Ease of public restaurants by hotel
Interested in friends in the I needed to take Research lodging
parking near airport car Events Attractions sna
from trusted friend advertisement location transportation
events area Planning

Pu
Wanted to see
Get friend hotel Researched Booked ﬂight Read reviews Read reviews Made restaurant Cleared digital
Invited by friend Read travel rel. Interested in Looked for Price of car Parking costs and Total travel time recommendation too
family convenience train fares reservations camera
local news gallery opening warm climate rental toil
Self-guided Save time

Considered how Researched Booked train Asked for friends' Asked for friends'
Suggested by Purchased a Interested in Read travel rel. Looked for Looked for train Parking costs and Time duration of Ease of getting Researched Looked online Made a playlist Bo
Interested in many people I Interested in plane fares ticket
recommendations recommendations
friend travel book broadway show local news shopping accessability convenience trip around hotels for restaurants on iPod cam
amenities know there* events Save money

Wanted activity Spontaneously Can be reached
Received email Researched local Weather at Flight distance Researched bed Researched Booked hotel Purchased Checked weather Get friend food Made lists of Bo
Interested in offered by that decided to Number of friends' Research Wanted to see Family/couple w/o travel time Compared costs Flight distance
recommendation destinations recommendations information online and breakfasts parking near train event tickets conditions recommendation
band/concert geography travel certain exhibit activities affecting free time destination station
things to bring

Philadelphia Parking
Events Getting Here Getting Here Weather Getting Around Hotels (Places Hotel Packages
Things to Do Things to Do Events Things to Do Things to Do Things to Do Special Offers Information My Trip My Trip Dining & Food
Things to Do Calendar (Travel Tools) (Travel Tools) (Travel Tools) (Travel Tools) (Places to Stay)
(E-mail) Calendar (E-mail) to Stay) (Travel Tools) Itinerary Builder Itinerary Builder

Bed & Itineraries & Itineraries &
Plan Your Trip: Tours & Plan Your Trip: Plan Your Trip: Plan Your Trip: Getting Around Hotel Packages Getting Here Breakfasts Plan Your Trip: Tours (Things to Tours (Things to Open Table
Plan Your Trip:
Attractions Activities Attractions Attractions Attractions (Travel Tools) (Places to Stay) (Travel Tools) (Places to Stay) Car Rentals Do) Do)
Attractions

Hotel Packages Plan Your Trip: Plan Your Trip: Trip Advisor
Newsletter Plan Your Trip: Trip Advisor Newsletter Philly Fun Trip Advisor Trip Advisor
(Places to Stay) Hotels Attractions Reviews
Signup Attractions Reviews Signup Guide Reviews Reviews

Trip Advisor Philly Fun Hotel Widget Trip Advisor
Reviews Guide Reviews

Trip Advisor
Reviews

Choosing regional travel Choosing a destination
‣ Research locations ‣ Research amenities
‣ Attracted by destination ‣ Attracted by destination
‣ Spontaneous choice ‣ Economizing

Choosing regional travel Choosing a destination
‣ Research locations ‣ Research amenities
‣ Attracted by destination ‣ Attracted by destination
‣
Things To Do
Spontaneous choice ‣
Economizing

Balance classiﬁcation

WITH CONTEXT.

A

OUR
CLIENT

NOT ALL STORIES HAVE
A HAPPY ENDING.

6

UNITED STATES
HOLOCAUST MEMORIAL
MUSEUM

CHALLENGE CULTURE
‣ This is a huge, ‣ Passionate and committed
complex organization; staff; all of them, at all
it has no peer levels
‣ International reach ‣ Some tension between
and value aspirational goals and
actual operations
‣ Wealth of content and
powerful message(s); ‣ Limited, dedicated web
learning is a goal resources

A

LIKE,
EVERYBODY.
ALL THE
PEOPLE.

Project Definition/
Information
Architecture
‣ Clarification of the site strategy
within the museum strategy
‣ Align information structures
with persona mental models
‣ Content strategy (learners)
‣ Meeting design!

AT 37 SIGNALS,
TRADITIONAL
MEETINGS
ARE
TOXIC
TO AGILE
SOFTWARE
DEVELOPMENT.

THE DYNAMICS OF

GROUP
DECISION-MAKING

NEW DECISION
TOPIC POINT

THE DYNAMICS OF DECISION-MAKING

LEADER IDEA GROUP MEMBER IDEA

NEW DECISION
TOPIC POINT

A UTOPIAN DYNAMIC OF GROUP DECISION-MAKING

WTF?

WTF?

WTF?
NEW
TOPIC WTF?

WTF?

WTF?

WTF?
THE ACTUAL DYNAMIC OF GROUP DECISION-MAKING

NEW DECISION
TOPIC POINT


LEADER IDEA GROUP MEMBER IDEA

DIVERGENT CONVERGENT
THINKING THINKING
NEW DECISION
TOPIC POINT


DIVERGENT CONVERGENT
THINKING THINKING
‣ Generating a list of ‣ Sorting ideas into
ideas categories
‣ Free-flowing open ‣ Summarizing key
discussion points
‣ Seeking diverse ‣ Coming to
points of view agreement
‣ Suspending ‣ Exercising
judgement judgment


THE
“GROAN
ZONE”
NEW DECISION
TOPIC POINT


‣ Full participation

CORE ‣ Mutual understanding

VALUES
‣ Inclusive solutions
‣ Shared responsibility

VISION
SPACE
PROCESS SOLUTION MAKE IT
DESIGN SPACE REAL!

PROBLEM
SPACE
PATHWAYS TO ACTION MODEL

B
Standard Design Process
usually is...

CREATIVE CLIENT
CONCEPTS REVIEW

B
Collaborative Design Process
can be...

CREATIVE CLIENT
CONCEPTS REVIEW

B
Collaborative Design Process
can be...

CREATIVE CLIENT SINGLE
CONCEPT
CONCEPTS REVIEW ITERATION

C

Design NAME

Characteristics COMPANY

CIRCLE ONE NUMBER FOR EACH SCALE.

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

R I G I D LY A D H E R E
TO CURRENT N O T C L O S E AT A L L
STYLES

1 2 3 4 5 6 7 8 9 10

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

V I S UA L S WORDS

1 2 3 4 5 6 7 8 9 10

C

“ Should the new design feel solemn or hopeful?”

SOLEMN HOPEFUL

1 2 3 4 5 6 7 8 9 10

D

Let’s Play MadLibs

“ The new site will feel
adjective

by showing ”
noun

A

CAN YOU TELL A STORY
ABOUT YOUR PROCESS?
“So, your process walks into a bar...”

B

GOOD IDEAS COME
FROM ANYWHERE
Even project managers!

C

COLLABORATION IS
EXPENSIVE
Make your meetings count!

D

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

Collaboration is Key to City Branding

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a Collaboration is Key to City Branding

Similar a Collaboration is Key to City Branding (20)

Último

Último (20)

Collaboration is Key to City Branding