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?


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.


sales

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

B be

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



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.

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

& 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

DAVE


on waterfall & agilePredictability versus flexibility

All you got to do is talk, talk

DAVE


on waterfall & agilePredictability versus flexibility

All you got to do is talk, talk

Google Search: “Waterfall”

DAVE

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

DAVE


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

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

DAVE


project definition

IN WHICH WECHOOSE THE PROPER STARTING FOOT

& IN WHICH DIRECTION TO GO

KEVIN


0%

25.00%

50.00%

75.00%

100.00%

Potential Baggage

project definition


project definition: our goals

KEVIN


project definition: our goals

Identify the key players.

Explore the communications dynamic.

Immerse ourselves in the culture.

Define 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 moing stakeholder interviews prior to kickoff, you can spend less time on unknowns during the kickoff and work at a better conceptual depth.

KEVIN


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.

KEVIN


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.

KEVIN


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

KEVIN


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.

KEVIN


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

KEVIN


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

KEVIN


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

KEVIN


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

KEVIN


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

KEVIN


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

KEVIN


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.

KEVIN


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

KEVIN


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

KEVIN


analysis

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

KEVIN


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



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

CHRIS


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

CHRIS


CHRISDiscoery

IA

Design • Initial visual design


benefits

Everyone is informed

Client understand functionality

Frees up teammates

CHRIS


drawbacks

Heavy burdern

Design = “Skinning”

Where’s the collaboration?

Clients find IA documentation scary & confusing

CHRIS


visual concepting

3 - 5 “uick Hit” visual designs

Solve specific problems

Cross-team effort

CHRIS

(Initial design concepts)


visual concepting

Share responsibility

Explore unique solutions

Provide a target

Cra a shared vision

CHRIS

(Initial design concepts)


Task: Redesigning Carlisle’s wideplankflooring.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?

CHRIS


• Brainstorming• Collaboration• Initial visual design

Discoery

IA

Design

CHRIS


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

IA

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=

[email protected]


mailto:[email protected]


(error page on forgot your password)

[email protected]




(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

Design

good upper limit

ux health check

collaborative visual thinking

kickoff activitiesice destroyers

valuesno spec work

share ideas freely

step 1in advance

initial design concepts