solving business problems for our clients, each step of the way

welcome

Thursday, September 24, 2009

introductions

IN WHICH WEAGREE UPON WHY WE ARE HERE

our founder: Jeffrey Zeldman

photo: Adrian Q | flickr: aquan

his book(s)

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

our website

our clients

AIGA Build-A-Bear

Daily KosGeorgetown University

Greater Philadelphia Tourism & Marketing

Corporation Krylon Paints

MozillaUnited States Holocaust Memorial Museume Today Show

omson Reuters W3CWordpress

Zappos

our website

our events

so what?

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.

IN WHICH WEEXPLORE 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

ROBERT

the project plannerROBERT

dialogue & follow up

It’s all about communication. And coordination.

ROBERT

closing the deal

A always

C closing

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

One to one (or small group) conversation is priceless.

ROBERT

our values

One to one (or small group) conversation is priceless.

ROBERT

client vendor chemistry

ROBERT

Sometimes we say no (thank you).

ROBERT

Not every project is right for us. And vice-versa.

ROBERT

Not every project is right for us. And vice-versa.

ROBERT

Carlisle Wide Plank Flooring

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

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.”

ROBERT

project management

IN WHICH WEDECIDE HOW WHO WILL DO WHAT WHEN

our pm philosophy

Adapt classic project management approaches to web projects

Waterfall can be agile

Add some personality to the mix!

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 & agilePredictability versus flexibility

All you got to do is talk, talk

on waterfall & agilePredictability versus flexibility

All you got to do is talk, talk

Google Search: “Waterfall”

Google Search: “Agile”Thursday, September 24, 2009

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! :)”

Carlisle Wide Plank Flooring

Established Communication, Mutual Trust and Respect

Home made muffins, 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

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

project definition

IN WHICH WECHOOSE THE PROPER STARTING FOOT

& IN WHICH DIRECTION TO GO

25.00%

50.00%

75.00%

100.00%

Potential Baggage

project definition

project definition: our goals

Identify the key players.

Explore the communications dynamic.

Immerse ourselves in the culture.

Define the project.

kickoff should establish...

a high level of positive energy,

the appropriate conceptual depth,

a sense of humor,

& unanticipated delight at our approach.

stakeholder interviews

By moing stakeholder interviews prior to kickoff, you can spend less time on unknowns during the kickoff and work at a better conceptual depth.

priority card sorting game

An exercise that assesses information priorities for an organization and quantifies variations in priority between a client and a vendor, two departments in the same organization, two different types of users, or any two groups.

step 1

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

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

Topic 5 Topic 6 Topic 7 Topic 8

step 2Arrange 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.

Topic 7 Topic 8

Topic 4

step 3

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 1 Topic 2 Topic 3

Topic 6Topic 5

Topic 7

Topic 8Topic 4

step 3

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 1Topic 2Topic 3Topic 6Topic 5

step 4

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 7Topic 8Topic 4Topic 1Topic 2Topic 3Topic 6Topic 5

step 4

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 4

Topic 1Topic 2Topic 3Topic 6Topic 5

step 4, variation

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 7Topic 8Topic 4Topic 1Topic 2Topic 3Topic 6Topic 5

step 4, variation

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 7Topic 8Topic 4Topic 1Topic 2Topic 3Topic 6

Topic 5

SAVEREMOVE

step 5Repeat 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

Aer each participant puts the cards in order a final 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.

Topic 5 Topic 6Topic 7 Topic 8

step 6

Aer each participant puts the cards in order a final 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.

Topic 5 Topic 6Topic 7 Topic 8KH KH KH KH

1 2 3 4

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 Specific 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 Specific 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

Prototyping exercise (Zaki Warfel)

Ice Destroyers

UX Health Check (Labate & Govella)

Ice Destroyers

Ask “What Have We Done at Sucks?”

Ice Destroyers

Ask “What Have We Done at Sucks?”

Establish a social relationship

design

IN WHICH WEMAKE THE PRETTY SMARTER

& MAKE THE SMARTER PRETTIER

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

CHRISDiscoery

Design • Initial visual design

benefits

Everyone is informed

Client understand functionality

Frees up teammates

drawbacks

Heavy burdern

Design = “Skinning”

Where’s the collaboration?

Clients find IA documentation scary & confusing

visual concepting

3 - 5 “uick Hit” visual designs

Solve specific problems

Cross-team effort

(Initial design concepts)

visual concepting

Share responsibility

Explore unique solutions

Provide a target

Cra a shared vision

(Initial design concepts)

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

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

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

• Brainstorming• Collaboration• Initial visual design

Discoery

Design

development

IN WHICH WEPUT OUR $ WHERE OUR ) IS

MARKJENN

hello!

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

Jenn Lukas Lead Developer and avid Phillies Fan, Woo!

MARKJENN

(confused development cat)

IA Design Development

Design

Development

Waterfall

Improved Waterfall

(getting answers)(confused cat)

(inventory file)

(screen shot of login form)

(screen shot of inventory with just

“login” page showing)

(screen shot of login form)

(screen shot of login form with forgot password link)

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

your password)

(screen shot of login form with forgot password link)

(screen shot of the reset your password

email form)

email is entered wrong=

mark@markh.ut.com

(error page on forgot your password)

mark@markhuot.com

(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

confirmation)

(screen shot of login page)

markhot

••••••••

(screen shot of login page with an error)

markhot

••••••••

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

AND error page)

(screen shot of login page)

markhuot

••••••••

(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 file)

the BIG IDEA

IN WHICH WEASSEMBLE,

& TAKE THE FORM OF A BUCKET OF WATER

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 flexibility.

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.

the BIG IDEA

thank you

uestions & comments?

happycog.com

@iamjolly@dtderu@kevinmhoffman@ccashdollar@jennlukas@markhuot

solving business problems for our clients, each step of the way

good upper limit

ux health check

collaborative visual thinking

kickoff activitiesice destroyers

valuesno spec work

share ideas freely

step 1in advance

initial design concepts

Design

wicked problems: problems worth solving

solving physics problems with multiple representations ·...

esp solving-problems

michigan’s problem-solving courts solving problems saving...

solving percents problems

solving stoichiometry problems

solving flood problems

solving manufacturing problems

percent problems solving simple percent problems

solving word problems

solving sentence problems

solving genetics problems

solving social problems

solving kinetics problems

solving problems using problem solving

solving big problems

aix solving problems

solving problems

solving problems in social–ecological systems: deﬁnition...

solving genetic problems