Solving Business Problems for Our Clients, Each Step of the Way

welcome

Thursday, September 24, 2009

introductions

IN WHICH WE
AGREE UPON WHY WE ARE HERE


our founder: Jeffrey Zeldman
photo: Adrian Q | ﬂickr: aquan


his book(s)
DESIGNING WITH WEB STANDARDS
(1st, 2nd, & soon 3rd Editions, + a few others)


our website


AIGA Mozilla
Build-A-Bear United States Holocaust
Memorial Museum
Daily Kos
e Today Show
Georgetown University
omson Reuters
Greater Philadelphia
Tourism & Marketing W3C
Corporation
Wordpress
Krylon Paints
Zappos

our clients


our events


so what?


why us?


why us?
Mr. Cooksey asked us. We said yes.


why us?
Why not us? Why not you?


why us?
Why not us? Why not you?
Not a pitch, but a conversation.


ROBERT
sales

IN WHICH WE
EXPLORE THE ETHICS OF SEDUCTION
& BETTER LIVING THROUGH CHEMISTRY


ROBERT

basic sales process


ROBERT

basic sales process
Project Planner


ROBERT

basic sales process
Project Planner
Dialogue & Follow Up


ROBERT

basic sales process
Project Planner
Dialogue & Follow Up
Closing the Deal


the project planner
ROBERT


dialogue & follow up
ROBERT

It’s all about communication. And coordination.


closing
the deal

A always
B be
C closing


ROBERT

our values


ROBERT

our values
No spec work: nothing is free.


ROBERT

our values
We pitch our people, principles, and process.


ROBERT

our values
Talk is cheap: share ideas freely.


ROBERT

our values
Talk is cheap: share ideas freely.
One to one (or small group) conversation is priceless.


ROBERT

client vendor chemistry


ROBERT

Sometimes we say no (thank you).


ROBERT

Sometimes we say no (thank you).
Not every project is right for us. And vice-versa.


Carlisle Wide Plank Flooring

“...we’ll treat ya to some magical wood.”
- email from Client


ROBERT

Mozilla Foundation


ROBERT

Mozilla Foundation
We went big (in scope).


ROBERT

Mozilla Foundation
ey came back and said smaller.


ROBERT

Mozilla Foundation
We went smaller.


ROBERT

Mozilla Foundation
We went smaller.
ey said, “yes” but “involve the community in the process.”


DAVE
project management

IN WHICH WE
DECIDE HOW WHO WILL DO WHAT WHEN
& WHY


DAVE

our pm philosophy
Adapt classic project management approaches
to web projects
Waterfall can be agile
Add some personality to the mix!


DAVE

web project concepts
Open minds = successful projects
Dra timelines establish project timeframes
Manage milestones
“e Evolution Solution” - Focus on current phase +
four weeks beyond


on waterfall & agile
Predictability versus ﬂexibility DAVE

All you got to do is talk, talk


on waterfall & agile
Predictability versus ﬂexibility DAVE

All you got to do is talk, talk

Google Search: “Waterfall”

Google Search: “Agile”

DAVE

pm with personality
Build the expectation.
Become the consummate comedic professional.
“Hi Tina, Tom, Kim, John and all the ships at
sea. We’re nautical by nature ya know! :)”


DAVE

Carlisle Wide Plank Flooring
Established Communication, Mutual Trust and Respect
Home made muﬃns, ohh so warm & tasty
Change to planned technical assessment deliverable
Altered project plan to meet Client needs
Invited Tech lead to participate in CMS integration


DAVE

Mozilla Foundation
Open design process with Mozilla Community
Utilized elements of Agile, Rapid Design and Waterfall
to complete project tasks and maintain an “open” feel to
the project
Evolution of requirements vs. revolution of scope


KEVIN
project definition

IN WHICH WE
CHOOSE THE PROPER STARTING FOOT
& IN WHICH DIRECTION TO GO


project definition
100.00%

75.00%

50.00%

25.00%

0%

Potential Baggage


KEVIN

project definition: our goals


KEVIN

project definition: our goals
Identify the key players.
Explore the communications dynamic.
Immerse ourselves in the culture.
Deﬁne the project.


KEVIN

kickoff should establish...


KEVIN

kickoff should establish...
a high level of positive energy,
the appropriate conceptual depth,
a sense of humor,
& unanticipated delight at our approach.


KEVIN

stakeholder interviews
By moing stakeholder interviews prior to kickoﬀ, you
can spend less time on unknowns during the kickoﬀ and
work at a better conceptual depth.


KEVIN

priority card sorting game
An exercise that assesses information priorities for an
organization and quantiﬁes variations in priority
between a client and a vendor, two departments in the
same organization, two diﬀerent types of users, or any
two groups.


step 1 KEVIN

In advance, list all your topics on a set of index cards.
Create a set for each participant. 15 topics is a good
upper limit.


step 1 KEVIN

In advance, list all your topics on a set of index cards.
Create a set for each participant. 15 topics is a good
upper limit.

Topic 1 Topic 2 Topic 3 Topic 4



step 2 KEVIN
Arrange the group around the table so that a
representative from each group is in an alternating seat.
Ideally, no one should be sitting next to someone they
work with.


step 3 KEVIN

Ask each participant to sort their cards from highest to
lowest priority, with the highest priority on the top and
lowest priority on the bottom.




step 3 KEVIN

Ask each participant to sort their cards from highest to
lowest priority, with the highest priority on the top and
lowest priority on the bottom.

Topic 8
Topic 4
Topic 1
Topic 2
Topic 36
Topic
Topic 7
5


step 4 KEVIN

Each participant must remove their 3 lowest priority
cards from the group, place a hash mark in the corner of
the card, and pass them to the person on their le.

Topic 7 8
Topic 4
Topic
Topic 1
Topic 23
Topic
Topic 6
Topic 5


step 4 KEVIN

Each participant must remove their 3 lowest priority
cards from the group, place a hash mark in the corner of
the card, and pass them to the person on their le.

Topic 7

Topic 8 Topic 1
Topic 23
Topic
Topic 6
Topic 5
Topic 4


step 4, variation KEVIN

Prior to passing, allow each participant to “save” one
card that can’t be lost, and to discard one card that is the
least important. ese cards should then be designated
as “save” or “remove,” and then set aside from play.

Topic 7 8
Topic 4
Topic
Topic 1
Topic 23
Topic
Topic 6
Topic 5


step 4, variation KEVIN

Prior to passing, allow each participant to “save” one
card that can’t be lost, and to discard one card that is the
least important. ese cards should then be designated
as “save” or “remove,” and then set aside from play.

Topic 84
Topic
Topic 7 Topic 1 Topic 5
Topic 23
Topic
REMOVE Topic 6 SAVE


step 5 KEVIN
Repeat steps 3 and 4 up to 3 times, with each participant
prioritizing with their new set of cards, designating the 3
lowest priority, marking them with new or additional
hash marks, and passing them to the le.


step 6 KEVIN

Aer each participant puts the cards in order a ﬁnal
time, have them number the cards and place their
initials on each card. At this point, each card should
have a single set of initials, a number that represents the
participant’s priority, and between 0 and 4 has marks.



step 6 KEVIN

Aer each participant puts the cards in order a ﬁnal
time, have them number the cards and place their
initials on each card. At this point, each card should
have a single set of initials, a number that represents the
participant’s priority, and between 0 and 4 has marks.

1 2 3 4
KH KH KH KH


KEVIN

analysis
Analysis of the collected data assesses the priorities of
the combined group and variations in priorities between
the two represented groups.


Topic Passes Average Client Avg. Happy Cog Avg. Variation

Abstracts of Research Projects 2 1.38 1.88 0.83 1.05

Blogs or Articles Written by Doctors 3 1.46 1.86 1.33 0.53

Blogs or Newsletters Written by Clients 4 1 0.71 1.33 -0.62

Blogs or Newsletters Written by Leadership 8 0.54 0 1.33 -1.33

Corporate Volunteer Tracking Capabilities 15 0.23 0.42 0 0.42

Discussion Areas for Parents/Caregivers 5 0.77 0.14 1.5 -1.36

Donate to a Speciﬁc Program 8 1.31 1 1.67 -0.67

General Information About Low Vision 0 6.08 5.57 6.67 -1.1

Guidelines for Accessibility on the Web 6 0.07 0.14 0 0.14

How to Find Help Near You 1 5.23 5.42 5 0.42

Integrated Events Calendar 12 1 0.14 2 -1.86

Reviews of New Assistive Technology 2 3.38 4.71 1.83 2.88

Services Organized by Visual Condition 2 6 3.57 8.83 -5.26

Sign Up to be a Volunteer 0 1.53 1.28 1.83 -0.55

Vision Loss Simulations 0 2.31 3 0.33 2.67

Volunteer for a Speciﬁc Program 1 0.46 0 1 -1
Out of 10, n=13 Out of 10, n = 7 Out of 10, n = 6


other kickoff activities


Ice Destroyers


Ice Destroyers
Prototyping exercise
(Zaki Warfel)


Ice Destroyers
(Zaki Warfel)

UX Health Check
(Labate & Govella)


Ice Destroyers
(Zaki Warfel)

UX Health Check
(Labate & Govella)

Ask “What Have We Done at Sucks?”


Ice Destroyers
(Zaki Warfel)

UX Health Check
(Labate & Govella)

Ask “What Have We Done at Sucks?”
Establish a social relationship


CHRIS
design

IN WHICH WE
MAKE THE PRETTY SMARTER
& MAKE THE SMARTER PRETTIER


CHRIS

So, what’s wrong with the
“IA to Design” waterfall process?


CHRIS
Discoery

IA

Design • Initial visual design


CHRIS

benefits
Everyone is informed
Client understand functionality
Frees up teammates


CHRIS

drawbacks
Heavy burdern
Design = “Skinning”
Where’s the collaboration?
Clients ﬁnd IA documentation scary & confusing


CHRIS

visual concepting
(Initial design concepts)
3 - 5 “uick Hit” visual designs
Solve speciﬁc problems
Cross-team eﬀort


CHRIS

visual concepting
(Initial design concepts)
Share responsibility
Explore unique solutions
Provide a target
Cra a shared vision


CHRIS

Task: Redesigning Carlisle’s
wideplankﬂooring.com
capitalizing on the unique
Carlisle story & selling process


CHRIS

Task: Redesigning
the Mozilla website while
keeping the content
& structure intact


CHRIS

So what does this process
(basically) look like, then?


Discoery
CHRIS

• Brainstorming
• Collaboration
• Initial visual design

IA

Design

JENN MARK
development

IN WHICH WE
PUT OUR $ WHERE OUR ) IS


JENN MARK

hello!
Mark Huot
Lead Developer and avid Red Sox Fan, Boo!

Jenn Lukas
Lead Developer and avid Phillies Fan, Woo!


(confused development cat)


Waterfall
IA Design Development

Improved Waterfall
IA

Design

Development


(getting answers)
(confused cat)


(inventory ﬁle)


(screen shot of login
form)


(screen shot of
inventory with just
“login” page showing)


form with forgot
password link)


(screen shot of inventory with just
“login” page showing AND forgot
your password)


(screen shot of the
reset your password
email form)


mark@markh.ut.com

email is entered
wrong=


mark@markhuot.com

(error page on forgot
your password)


(screen shot of password has
been successfully reset page)


(screen shot of inventory with just “login” page showing
AND forgot your password AND reset form AND reset
conﬁrmation)


markhot

••••••••

page)


markhot

••••••••

page with an error)


(screen shot of inventory with just “login”
page showing AND forgot your password
AND reset form AND reset conﬁrmation
AND error page)


markhuot

••••••••

page)


(screen shot of success
login page)


(screen shot of
inventory with full login
items)


Poppycock!


(screen shot/movie of ajax login
form—apple.com rip off,
web2.0 rip)


“Uhh ohh” pages


404 Pages


(example 1 of forgotten
pages with bland
developer speak)


No Search Results


(separate screen shot
of no search results)


(screen shot of full
inventory ﬁle)


the BIG IDEA

IN WHICH WE
ASSEMBLE,
& TAKE THE FORM OF
A BUCKET OF WATER


the BIG IDEA


the BIG IDEA
We choose and treat our clients
like we choose and treat our friends.


the BIG IDEA
We (attempt to) manage
our projects with ﬂexibility.


the BIG IDEA
We start our projects with engagement, depth, & energy.


the BIG IDEA
We sometimes lead with collaborative visual thinking.


the BIG IDEA
We sometimes lead with collaborative visual thinking.
We insure our ideas are fully considered and developed to
provide a consistent experience.


thank you
happycog.com

@iamjolly uestions & comments?
@dtderu
@kevinmhoﬀman
@ccashdollar
@jennlukas
@markhuot


Solving Business Problems for Our Clients, Each Step of the Way

More Related Content

Viewers also liked (16)

Similar to Solving Business Problems for Our Clients, Each Step of the Way (20)

Recently uploaded (20)

Solving Business Problems for Our Clients, Each Step of the Way