Dave Cortright design portfolio 10

43
Dave Cortright design portfolio http://davecortright.com [email protected] June 2010

description

 

Transcript of Dave Cortright design portfolio 10

Page 1: Dave Cortright design portfolio 10

Dave Cortrightdesign portfolio

http://davecortright.com [email protected]

June 2010

Page 2: Dave Cortright design portfolio 10

My Design Philosophy

First define the problem, Then design a solution.

Page 3: Dave Cortright design portfolio 10

If I had 20 days to solve a problem,

I would take 19 days to define it.

—Albert Einstein

Page 4: Dave Cortright design portfolio 10

Re-designing Yahoo Messenger First, a bit of context. The last two versions (which I didn’t own):

Yahoo Messenger 7.0 Top tabs for viewing the Address Book A toolbar for starting conversations A section for accessing other Yahoo services.

Yahoo Messenger 8.0 A single toolbar with both tabs and buttons An auto-complete field Yahoo services plug-ins A banner ad Yahoo web search

•  

• • • •

Page 5: Dave Cortright design portfolio 10

The elephant in the room The top reason people use Messenger is to see which friends are online and have conversations with them.

But only about ⅓ of the window real estate is devoted to friends!

The Yahoo “taxes” were getting out of hand.

Yahoo Messenger 7.0

Yahoo Messenger 8.0

UI 21%

Yahoo Services

42%

Friends 37%

UI 20%

Yahoo Services

+ a banner ad 49%

Friends 31%

Page 6: Dave Cortright design portfolio 10

Data that inspires design

· The number of friends is a power curve · The average number of friends is 10 · The mode (most common number) is 1 · Engagement increases markedly at ~6 friends.

1 2 3 4 5 6 7 8 9 10 Number of friends

Enga

gem

ent

% o

f Mes

seng

er u

sers

1 2 3 4 5 6 7 8 9 10 Number of friends

Page 7: Dave Cortright design portfolio 10

My vision for Yahoo Messenger 9 A holistic re-design of the main window to focus on friends and their recent online activity to increase engagement.

Every new feature added supported this new vision.

Working in concert with the PM, I created a design concept document.

Wireframe from my design concept ←

Page 8: Dave Cortright design portfolio 10

Details of my design concept •  Custom skin with Yahoo-branded title bar.

•  The “Me” panel—information, status, and actions relating to the user’s account.

•  Auto-complete bar filters against both the Friends List and the Address Book.

•  2-line contacts—bigger display image and more room for status messages.

•  Emoticons in the status message enables increased self-expression.

•  Show latest on-network activity if there is no custom status message (new feed).

•  Contextual toolbar on mouse-over shows actions for that friend.

•  Plug-ins closed by default.

• Unsold ad inventory drives engagement.

•  Yahoo-branded web search bar.

Page 9: Dave Cortright design portfolio 10

What was actually implemented • Yahoo-branded skin

• The “Me” panel

• Auto-complete bar

• 2-line contacts

• Emoticons in status

• Latest on-network activity

• Toolbar on mouse-over

• Plug-ins closed by default

• Yahoo-branded search bar

• Everything except my unsold ad inventory idea

• But most importantly, Friends list coverage is 60%

Previous version →

Page 10: Dave Cortright design portfolio 10

Why This Project Was Successful

· Design involved from the very beginning · Close partnership with PM · Clear, customer-focused vision · Quality of features, not quantity · Vision and design communicated clearly; the team bought in and was aligned

Page 11: Dave Cortright design portfolio 10

Spec: Re-designing the IM window

Page 12: Dave Cortright design portfolio 10

A typical mini-spec Add a contact flow for a social networking site

Page 13: Dave Cortright design portfolio 10

Another mini-spec Contrasting flows for 1-way vs. 2-way social network connections

Page 14: Dave Cortright design portfolio 10

More data that inspires design

· ⅓ of people surveyed weren’t aware that Yahoo had a web search service. · Of all the Yahoo toolbars installed, over ½ are never clicked. · Perhaps understandable considering the design:

Page 15: Dave Cortright design portfolio 10

My Big Idea

· Why not brand the toolbar like a banner ad?

· or a bit more subtly:

· Even if users don’t engage, we get impressions. · The Toolbar team wasn’t interested, so I convinced the Messenger PM to try it.

Page 16: Dave Cortright design portfolio 10

0

1

2

3

4

5

6

11/06/06 11/20/06 12/04/06 12/18/06 01/01/07 01/15/07 01/29/07 02/12/07

New Messenger search bar design Old design (through Nov 06) New design (Dec 06–Feb 07)

$1.1 million estimated additional revenue/year Note that this data is U.S. traffic only, and only ¾ of U.S. users have the new design. It can only get better.

page views × 1,000,000

revenue × $10,000

revenue/page view

0.89¢ 1.26¢

3.022 million 3.883 million

$27,408

$48,784

+30%

+85%

+42%

Page 17: Dave Cortright design portfolio 10

Why this design is so effective

· It is clearly labeled as Yahoo Web Search. All three words are critically important. People need to know exactly what it does; It searches the web using Yahoo. · It is bigger, bolder, and more clearly-defined. · It is visually distinctive from other UI. · It is uniquely Yahoo-branded. · It does exactly one thing.

Page 18: Dave Cortright design portfolio 10

To keep it simple, I chose a single window for the UI. Additional services appear in this sidebar. Opting-out requires clicking Customize your install, and then unchecking the options.

Yahoo Messenger updater UI Goal: increase uptake of additional Yahoo services when upgrading Yahoo Messenger.

+12% in toolbar installs +35% in home pages set +20% in search engines set

Page 19: Dave Cortright design portfolio 10

Web site for airplane enthusiasts

intoFlight sign in

Cessna Skylane 182Cirrus SR20

an intoFlight affiliate

What’s New

Cessna 172 SkyHawkSummary updated.12:34pm

Cessna Citation CJ3N357JD photos added.12:07pm

Beechcraft Bonanza G36N485FQ for sale.11:42pm

Cirrus SR22Comment added.10:358pm

Own your own plane? Show it off! Add it to this site.

Pilatus PC12Plane added. yesterday

Help make this site better!Take a poll. It will only take 2 minutes.

Cessna Caravan 675Beech 350 Super King Air

Cessna Skycatcher 162 Aeropro Eurofox

e.g. cessna ! 1998 ! light sport !172 ! aerobatic ! N724DE ! $100k

SEARCH

Inspiration: Glossy brochures and The Robb Report

Page 20: Dave Cortright design portfolio 10

•  Block-based layout allows content to rewrap easily on wide monitors. • Custom font (rendered with SIFR) creates a stylish magazine look. • Advertising requirements integral to the design framework.

Design features

Page 21: Dave Cortright design portfolio 10

Make and model page

2 passengers $110–125k100 hp @2750 RPM Continental O-200D

490 lbs max useful load15,500 ft service ceiling full stats

Cessna’s entry in the light sport category, the 162 SkyCatcher was officially launched in the summer of 2007. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus pede. Duis eget nibh in neque.

sollicitudin. Integer pharetra laoreet. Sed molestie. Ut ornare facilisis massa. Nulla porttitor ante in pede. Phasellus bibendum odio at tortor. Quisque sit amet elit ut diam vulputate nonummy. Proin pulvinar. Cras eu augue. Sed molestie. Ut nunc massa, sagittis vehicula, hendrerit vitae, laoreet eget, mauris. Fusce magna turpis, cursus.

Sed dictum sem non odio. Vestibulum iaculis. Fusce

dolor. Vivamus in orci. Vestibulum rhoncus sem at

nisi. Duis in nisl eu nisl sodales sodales. Praesent

fringilla. Cras tempus consequat justo.

Suspendisse eget nisl eget mi posuere malesuada.

Class aptent taciti sociosqu ad litora torquent per

conubia nostra, per inceptos hymenaeos. Aliquam

nisl tellus, condimentum ut, elementum eget,

viverra quis, nisi.

Cessna 172 Pilatus PC12Cirrus SR20EurofoxCessna 182

Cessna 162 SkyCatcher

SIMILAR PLANES

edit this page

intoFlight sign in

e.g. cessna ! 1998 ! light sport !172 ! aerobatic ! N724DE ! $100k

SEARCH

Large image slideshow · basic info · endless browse

Page 22: Dave Cortright design portfolio 10

Concept map for flying

!"#$

"%&'%(&$()

!"#$% !#&'(

)$*(#

)&'+,&-%+.(.

*+!,()

-&.!/$

,#"/0%

.!0$

,#"/0%1

0$+.2

)//1#2$-$))+'"%31

(4('%2

2%$."(25

-$))('%25

$!"'"$'2

/1..$

$%0(.1!"#$%2

)$$!'&)/1$("&/%

/1..$

*.&1$

!#()

34$%5!$%6

%)$

2!(-2

!"-%+.(2151

4"*($2

%)$

%)$

&".!$.%

$/!+12()/

,#"/0%1!#&'

6(&%0(.1

,$.(-&2%+178&+1$

+178&+1$

/!()#!/%1+

,#"/0%1

"'2%.+-%$.

%&+1$

0&91$ #(22$'&#9!.91$

:+!"$1$

:8;$

)&'&/(.

%)$

*(&#(.

*+!,*+!,

+1#/$

&--(22$."(2

:8;$

&)('"%"(2

%)$

#112$(/!(5#!"

.+#(2171

.(/+#&%"$'2

%)$()(+1.)/&!#$%&-

%)$

%)$

-.)#1$

)&+-!+/$

*.&0%/$

-&.!/$

<( )#;/%&#0(!#(

/%&$(-)01

):!8/

!.$,"#(1"',$

%)$

#"-('2(

#112$

+178&+1$

+178&+1$

%)$

+&21$($%!/08#

.&51

%)$()(3%!,16

8"#$%!2!(-","-1-$'-(!%1)&!

Page 23: Dave Cortright design portfolio 10

Generic concept map

!"#$

"%&'%(&$()

!"#$%&'#()*

+,")-,(#

)./#

(0-""

*+!,()

-.+&/0$1

!"-1#*

+,")-,(#

2!3$

#2/#$+#,(#

)440#.$(%33!,+).*

#4#,)"

")%$+#"5

(%33#,)"5

%/+,+%,"

4022$

%)6#$*!"#$"

)$$!'&)40$("&4%

4022$

5$0$

!#()

%)$

/$%/#$)+#"

/+()!$#"*5*

4+7#%"

%)$

%)$

")%$-1#*

8-(+0+).

$4!+0.()4

0%(-)+%,

+,8%$3-)+%,+065&+0$

+065&+0$

4!()#!4%0++,")$!()%$

%&+0$

3&/0$ 0#""%,&#/!2/0$

7+!"$0$

758$

3-,-1#$

%)$

"#00#$

*+!,*+!,

+0#4$

-((#""%$+#"

758$

-3#,+)+#"

%)$

#00.$(4!(9#!"

$!0#"*9*

$#1!0-)+%,"

%)$()(+02)4&!#$%&:

%)$

%)$

;)#84%&#3(!#(4%&$(:)30

)7!54

/$%8+0#*+,8%

%)$

0+(#,"#

#00.$

+065&+0$

+065&+0$

%)$

+&.0$($%!435#

%)$()(-%!,01

:#,#$+(*(%,(#/)*3-/

A framework that can scale to other domains

cer$fica$on

Page 24: Dave Cortright design portfolio 10

LiveSpot: in-car connected service Explorations of use cases via design wireframes

Page 25: Dave Cortright design portfolio 10

Search UI Search results are on top so they aren’t obscured by the user’s hands when typing on the keyboard.

‹ back Re|

q w e r t y u i o p

a s d f g h j k l

z x c v b n m

1 2 3 4 5 6 7 8 9 0

, .

Gas

School

Work

Home

Food

Restaurantscategory

Paul Reddickcontact

Remouladerestaurant more...

Page 26: Dave Cortright design portfolio 10

Ambient view

Crystal Springs ReservoirFilled by water piped hundreds of miles from Hetch Hetchy Valley in Yosemite National Park, the reservoir lies in the bottom of the San Andreas earthquake fault canyon.

Remolade652 Polk St.San Francisco

R in 16 mi 27 min

During lulls in navigation, show location-based information in an ambient, peripheral view.

Page 27: Dave Cortright design portfolio 10

Design insight: park first, then walk

< ! mi look for parking Street parking is now free (after 6pm)

$4/hour

$10/day

$12/day $5/hour

$4/hour

$10/day

Remolade652 Polk St.San Francisco

Navigating directly to the destination does not make sense in dense urban areas. First, assist in parking.

Page 28: Dave Cortright design portfolio 10

Where I Hang (a Facebook application) Destination recommendations for friends and FOAFs in their 20s

  I did both the visual & interaction design.

  Basic layout & colors consistent with the Facebook’s UI.

  Orange color added for a younger look.

  Distressed fonts add character while maintaining lightweight visuals.

  Column widths use the golden ratio.

  Main column shows friend feed; right column shows recommendations.

!"#$%&'&"()*

+,-.&&&&/0&12)*3,45&&&&/0&6$7%)85&&&&(88&2&12)*3,4&&&&')974%&6$7%)85&&&&1%:;

!"#$"%&'()#*+,!"#$%&'()*+$,-.$/01*$21-*.$32

4$5(6'+7)$80+9$8'('

-,)&-()$&."/*):;"$<6110$,-.$=*>+-06+$<6'?.$32

@'A'$B>)-$077'7$6-$C')-'(70C

-,)&01*(*D"E$%1$30&6+*$F'01.$='+1*$/0(A.$32

G*G>10($6+$-8'$,-0+5*(7$+'-?*(A

=6H80'1$I0H*J)

4$80+9*>-)$6+$H*&&*+

K0-0)80$L'M-'(

D$80+9*>-)$6+$H*&&*+

N0+H'$O0&61-*+

E$80+9*>-$6+$H*&&*+

!"#$%&'()$'#'&#*+),-.!"#$%&'%(""$)

*+,-

P')-$J>((6-*$*+$-8'$G'+6+)>10Q$2+7$H8'0G'($-80+$N0$3*)-'R0S

T0U6'($)067$EV$70C)$09*

W('0-$G10H'$-*$9*$5*($0$86A'$-80-$7*')+X-$6+U*1U'$9'--6+9$6+$0$H0(Q

YU*++'$)067$10)-$Z8>()70C

=0CJ'$6-X)$9('0-$5*($9>C).$J>-$[$80-'$J'6+9$**91'7$JC$-8'$7(>+A$5(0-$J*C)Q

\'+7C )067$C')-'(70C

@'A'$077'7$0$?''A$09*

W*-$)6HA$05-'($'0-6+9$8'('Q$K*-$9*6+9$J0HAQ

T0U6'($)067$0$?''A$09*$

]$G('U6*>) ! D$ 4$ "$ ;$ !$ ^$ _$ :$$$+'M- `

!"#$%&$'()*+%+,-.%

+'0($,-0+5*(7.$32

C*>$)067

!"#$%&#

!"#$%&#

C*>$)067

!"#$%&#

Page 29: Dave Cortright design portfolio 10

RockYou Super Wall: Requirements Super Wall Re-design

Overview • Video hyper-aggregation across multiple hosting providers • Social distribution - discovery and interaction through FB communication channels • Better recommendations - social and demographic data • One click access - direct nav from Facebook portal • Better UI than YouTube =)

Goals • Reduce dependence on spam for engagement • Increase unique visits • Increase pageviews/visit • Increase page RPM

UI changes • New streamlined header to increase page content above the fold • New ad space for 300x250 placements

User features • Subscriptions - user subscribes to video channel they want to follow, we send app to

user notifs to update the user when subscribed channels have new videos available • Comments - users can comment on videos and respond to other users' comments,

noti!cations will abound • Comprehensive feed - capture all user events and expose them to drive increased

engagement

Best bet for a progress thermometer: in a banner above the nav bar.

Next step: receive emailSuper Wall setup: 70% complete

Super Wall by RockYou!

My Posts Videos Photos More ! Promo Item!Videos Settings Help Search Videos !

or another, easier!to!use "More" menu with bigger click targets.

Gra!ti Photos Comments

“.. .. .... .... .. .. ....

Photos More ! Promo Item! Photos More ! Promo Item!

Photos

Gra!ti

Comments

"More" menu

Page 30: Dave Cortright design portfolio 10

News feed view

Top Videos My Subscriptions Friend Feed

RECT AD

300 ! 250

Deirdre Marie O’Tierneyfavorited a video.2 days ago

Paulus Trisnadi watched a video.2 hours ago

Rebecca Fieldman posted a video.1 day ago

Jenny Lin wrote a comment.4 days ago

Title of Videoby SomeUploader

Comment

Title of Videoby SomeUploader

Title of Videoby SomeUploader

Title of Videoby SomeUploader

1 2 3 4 5 6 Next

Three column format in the feed reduces the height of each entry, optimizing the number shown per screen.

Comment

Comment

Comment

Super Wall by RockYou!

My Posts Videos Photos More " Promo Item!Videos Settings Help Search Videos !

Other videos you might enjoy...

Title of Video

Longer title of when it wraps to 2 lines

Title of Video

Longer title of when it wraps to 2 lines

7 new videos in your subscribed channels View them now

Super Wall Re-design

Overview • Video hyper-aggregation across multiple hosting providers • Social distribution - discovery and interaction through FB communication channels • Better recommendations - social and demographic data • One click access - direct nav from Facebook portal • Better UI than YouTube =)

Goals • Reduce dependence on spam for engagement • Increase unique visits • Increase pageviews/visit • Increase page RPM

UI changes • New streamlined header to increase page content above the fold • New ad space for 300x250 placements

User features • Subscriptions - user subscribes to video channel they want to follow, we send app to

user notifs to update the user when subscribed channels have new videos available • Comments - users can comment on videos and respond to other users' comments,

noti!cations will abound • Comprehensive feed - capture all user events and expose them to drive increased

engagement

Best bet for a progress thermometer: in a banner above the nav bar.

Next step: receive emailSuper Wall setup: 70% complete

Super Wall by RockYou!

My Posts Videos Photos More ! Promo Item!Videos Settings Help Search Videos !

or another, easier!to!use "More" menu with bigger click targets.

Gra!ti Photos Comments

“.. .. .... .... .. .. ....

Photos More ! Promo Item! Photos More ! Promo Item!

Photos

Gra!ti

Comments

"More" menu

Page 31: Dave Cortright design portfolio 10

Video page with new compact header

Reply ! Report Spam

Deirdre O’Tierney 2 days ago

Phasellus a nibh ut neque posuere suscipit. In excelcius massa.

EMBEDED VIDEO

425 " 344

RECT AD

300 " 250

Title of Videoby UploaderDude

Send this video to...

Send

start typing a friend's name...

Paulus Trisnadi

Kathleen Watkins

Rebecca Fieldman

Jenny Lin

Deirdre O'Tierney

Todd Beaupre

None selected

Select All

Friends’ Comments

Paulus Trisnadi 2 hours ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper massa sed eros. Nam a urna ut sapien imperdiet dapibus.

Rebecca Fieldman 1 day ago

Morbi leo felis, tincidunt quis, cursus sed, hendrerit et, mauris. In hac habitasse platea dictumst. Nulla egestas eleifend libero. Sed elit.

Jenny Lin 4 days ago

Vestibulum ac nibh id odio posuere dignissim. Sed varius turpis quis felis. Nunc et leo. Pellentesque porta tellus at dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1 2 3 4 5 6 Next

!"go back to Top Videos

Search results UploaderDude videos

Favorite

Super Wall by RockYou!

My Posts Videos Photos More # Promo Item!Videos Settings Help Search Videos !

90 " 70Title of Video

Longer title of when it wraps to 2 lines

Title of Video

Longer title of when it wraps to 2 lines

add your own comment here... Comment

All Comments

Subscribe

1 2 3 4 5 6 Next

Page 32: Dave Cortright design portfolio 10

Super Pets: Increase engagement Super Pets from RockYou!

Home Playground Battleground Dressing Room Shopping Coins Home Get More Friends Help

Consistent header design across all new RY apps (like Super Wall)

2365"Pengo"This is my status..." 12

In context with the app

Super Pets from RockYou!

Home Playground Battleground Dressing Room Shopping Coins Home Get More Friends Help

Note the pet status bar that appears above the app header, which shows key pet stats and money.

2365"Pengo"This is my status..." 12

Each of these red areas is a click target that brings up an overlay...

2365"Pengo"This is my status..." 12

"Pengo"This is my status..." 236512Enter a new status message...

This is my status...

Save Cancel

Health

Buttercup is healthy, but she always appreciates a snack!

Feed Pengo close

2365"Pengo"This is my status..." 12

2365"Pengo"This is my status..." 12Happiness

Buttercup is happy, but she always a good hug!

Hug Pengo close

Health

Buttercup is clean, but she always appreciates a scrub!

Clean Pengo close

Alert the user when one of the stats drops too low.

If you want to be more aggressive, don't require a click. Pop the overlays up on mouse!over (after a delay perhaps);

2365"Pengo"This is my status..." 12

Battle

Buttercup is looking to mess someone up!

Random Battle close

HP: 23Atk: 10Def: 12Spd: 11

Exp: 565W: 18L: 3

12

2365"Pengo"This is my status..." 12

This is how many coins you have right now. get more 2365

no, thanks

Pengo would love to have the "Sunny Day" background.

Buy it now for 200 coins

2365"Pengo"This is my status..." 12

Super Pets from RockYou!

Home Playground Battleground Dressing Room Shopping Coins Home Get More Friends Help

Your pet is feeling a bit grungy. Wash your pet now!

Page 33: Dave Cortright design portfolio 10

Domain name registration for consumers

Page 34: Dave Cortright design portfolio 10

My design wireframe

Claim Your Name on the Web!

!"#$%&!%'!(!&)*+'!(!,))-#"./

"0*)"-1!"!+)+#)*2!!'345!35

Today, your first impression is made on the web.

You need to control that.

Do it now before your name is gone!

get your name on the web

6

7*'& 0"'&

803./!9)*)!3,!1$%!"0*)"-1!$:5!1$%*!5"+)!$5!&9)!:)#

own your name on the web

I amAmyBela.com

This version given to a visual designer for final polish.

Page 35: Dave Cortright design portfolio 10

Home page with clear call-to-action

Dave Cortright

Page 36: Dave Cortright design portfolio 10

Search results with Buy It Now CTA

Page 37: Dave Cortright design portfolio 10

My super-clean payment form

Page 38: Dave Cortright design portfolio 10

Me signed in showing admin bar Dashboard on the left; admin actions on the right

Page 39: Dave Cortright design portfolio 10

My Day design concept—Microsoft Mac Office

A persistent strip along the side of the screen gives a peripheral view of the day’s activities.

Clicking brings up a detailed view. You can print it to take it offline.

Page 40: Dave Cortright design portfolio 10

Single page product vision

Add basic pstn In, Out and Voicemail features to Yahoo Messenger by integrating our acquired Dialpad technology. Release as a premium service in beta by 11/28/05.

Goals (in priority order)

1.  Add basic pstn (public switched telephone network) functionality into Yahoo Messenger

2.  Release a public beta by 11/28/2005 3.  Increase mindshare and thought leadership in the

emerging VOIP market 4.  Increase pc-to-pc and pstn voice usage through

Yahoo Messenger 5.  Increase number of premium subscribers to the

Yahoo network

Assumptions 1.  This is a date-driven release 2.  pstn user experience not integrated with im or pc calls 3.  Part of the team will work in parallel on Lucy

(the version of Messenger after Postman) 4.  psi will be used for premium service billing 5.  The new service will replace Dialpad’s service 6.  No automated migration; existing Dialpad customers

will have to manually sign up for the new service.

Pstn Out Pstn In Signup and Account Management

Other Features (priority 2)

Allow users to call pstn phone numbers from within Yahoo Messenger.

Allow users to received calls to their own phone number within Yahoo Messenger.

Advertise the new premium services of pstn Out and pstn In within the UI. Allow users to sign up for the premium services via a web-based flow. Allow users to manage their account on the web: ·  View account balance ·  Add/remove services ·  View billing history ·  Get help & support

OpenTalk Users set their status so friends can connect and start talking immediately. More 360° support Add a button to go to the user’s 360° page. Podcasting support Record a call and publish it to your blog.

Great design cannot happen without a great vision

Page 41: Dave Cortright design portfolio 10

Writing great design bugs problem Design issues always come up after the spec has been completed but before the product ships. During this time, bugs are the best tool to drive design changes in the product. A well-written bug can mean the difference between getting an issue fixed and not.

solution 1. Choose your bugs wisely. Make sure you only write up

bugs that you really think need to be fixed. Don’t waste the team’s time with trivial stuff, especially when there are much bigger issues out there.

2. Search for duplicates or related bugs. Someone may have already written up this bug or one like it. If so, either add your content to that bug, or at least refer to it in yours.

3. Include the build number at the start of the Summary field. This should be a separate field, but until it is, include it at the start of the Summary field.

4. State the desired behavior in the Summary field. If you state what’s wrong here, that leaves things wide open for devs interpreting what the fix should be. It doesn't matter if the solution is in the body of the bug; Devs spend much more time reading bug lists than they do the body of each bug. Make it so they can successfully fix the bug without looking at the body.

5. Include three sections in the Description field— steps to reproduce, actual result, and desired result.

6. Justify. Include the reasons why this bug needs to be fixed if it’s not implicitly clear. When in doubt, over-communicate the justification. This is especially important for enhancements and more controversial bugs. Include as much real data and links to backup materials as possible.

7. Include one or more screenshots. Use circles and call outs to focus attention and add context.

In Windows, press Alt+Print Screen to capture the front-most window to the clipboard; paste into Paint. Save out as a png. On the Mac press Cmd+Shift+4 and then the space bar to capture the front window to a pdf file. Open it and re-save out to a png.

8. Fill in all fields accurately. Product, Component, Version, Browser, os, and especially Severity and Priority. It's a good way to earn the respect of the product managers and developers on your team. And if you do it poorly, it's a good way to lose their respect.

9. CC wisely. Choose the appropriate audience to include on the CC of the bug (pm, dev lead, your manager…). But don’t overdo it.

0. Drive your bugs to closure. If the bug is languishing pending a decision from pm, dev, or bug council, go make sure that person is working to make the decision and move the bug to closure. The longer a bug sits around untouched, the less likely it will get fixed.

Written by me for Yahoo’s internal design pattern library

1

Page 42: Dave Cortright design portfolio 10

Conference room maps problem It is difficult to find conference rooms—especially when not in your home building or on your home floor. · Maps aren’t in obvious locations · Maps aren’t rotated to account for

the direction they are mounted ·  Labeling is indirect, via a legend ·  Labels are too small · Maps are visually cluttered

solution Cleaner visual design, direct labels, and rotated versions mounted in obvious locations: stairwell and elevator exits.

And massive, highly-visible room labels too!

Yahoo! DAY HACK

Page 43: Dave Cortright design portfolio 10

Design aphorisms

· Ask why; know why · Crave data · Optimize ·  Be pragmatic ·  Iterate, iterate, iterate

·  Identify all assumptions · Question all assumptions ·  Know all of your options · Doing nothing is always an option ·  Learn from the past

·  First define the problem, then design a solution · Make it easy to do the right thing and difficult to do the wrong thing ·  People want outcomes, not artifacts · Without clear goals, design is either art or gambling · Communicate—concisely, candidly, consistently · Communication is always the primary goal ·  Just because you can doesn't mean you should

Sayings I’ve either written or heard over the years to help me focus and inspire my work