Dave Cortright
design examples
http://davecortright.com
davecortright@yahoo.com

The power of design concepts
As the team finished
the previous release
of Yahoo! Messenger,
I created a design
concept document
based on high-level
guidance from the pm.
The vision: a holistic
re-design of the main
UI focused on people
and their recent online
activity. It included few
new features, and every
one of them supported
the new vision.
< My design mock-up
from the concept doc
Working code one year later >

Messenger 9.0—concept & reality
Custom skin with Yahoo!-branded title.
“Me” panel—information, status, and
actions relating to my account.
Auto-complete filters against both the
Messenger List and Address Book.
2-line contacts—bigger display image
and more room for status messages.
Show latest on-network activity if
there is no custom status message.
(It’s not in the beta, but it is in the final release)
Contextual toolbar on mouse-over
shows actions for that contact.
Emoticons in the status message
enabling increased self-expression.
Plug-ins—secondary functionality
used by a minority—closed by default.
Yahoo!-branded web search bar.

New Messenger search bar design
Old design (through Nov. 06) New design (Dec 06–Feb 07)
6
$48,784
5 +85%
4 +30%
page views 3.022 million 3.883
× 1,000,000 million
3
revenue
× $10,000 $27,408
2
1.26¢
0.89¢ +42%
1
revenue/page view
0
11/06/06 11/20/06 12/04/06 12/18/06 01/01/07 01/15/07 01/29/07 02/12/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.

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 clearly-defined.
· It is visually distinctive
· It is uniquely Yahoo!-branded.
· It does exactly one thing.
This idea applied to the Yahoo! home page:

Yahoo! Messenger updater UI
Goal: increase uptake of additional Yahoo!
services when upgrading Yahoo! Messenger.
To keep it simple, I chose a
single window for the UI.
Additional services appear
in this sidebar. Opting-out
requires clicking on the
Customize your install button.
results
+12% in toolbar installs
+35% in home pages set
+20% in search engines set

Domain name registration for consumers

Design iteration 1
User searches for their social network profiles
Nombray
own your name on the web
7/%$7;'&7&:$:0$%G&-,1\"&,\"
&70()#&)-&F&#$%:-&F&4$$;0789
Step 1 of 4 !\"#$%&'()%&!\"#$%&#''(!))*
@ next »
*+,-&.,//&0$&'()%&-,1\"&,\"&23&4(%&#+$&-,#$5&6/$7-$&8/,89&#+$&/,\"9&,\"&#+$&
:$--71$&.$&-$\";&#(&'()&#(&<$%,4'&'()%&$:7,/&7;;%$--5
=$&.,//&7/-(&)-$&,#&#(&>\";&'()%&?%(>/$-&(\"&#+$&:(-#&?(?)/7%&-(8,7/&
\"$#.(%9,\"1&.$0&-,#$-5
Examples A+%,-B)\"#58(: 3%E\"\"$%);58(: CD+,//:7\"58(:

Design iteration 2
More explicit call-to-action of the value proposition
Nombray
\"0*)\"-1!\"!+)+#)*2!!'345!35
own your name on the web !\"#$%&!%'!(!&)*+'!(!,))-#\"./
Why should I do this?
6!7)08!.$5&*$0!9:\"&!.$+)'!%8!9:)5!8)$80)!')\"*.:!,$*!1$%
6!;0)<\"&)!1$%*')0,!\"#$<)!$&:)*'!93&:!&:)!'\"+)!$*!'3+30\"*!5\"+)'
6!=+8*$<)!&:)!8$'3&3$5!$,!1$%*!8\"4)!35!>$$40)!')\"*.:!*)'%0&'
6!?$5'$03-\"&)!1$%*!8*$@0)'!\"5-!.$5&)5&!$5&$!\"!'3540)!9)#!'3&)
Do it now before your name is gone!
get my name on the web
Examples !\"#$%&'()* 5#0&!\"#$%*$)4&6)).#(7 +,-.#*&/0&1\"$2234)
?:*3'A%5&B.$+ E*F55)*%-B.$+ C$#)*&D:300+\"5B.$+

Design iteration 3
Even more explicit; search form on the front page
\"0*)\"-1!\"!+)+#)*2!!'345!35
own your name on the web !\"#$%&!%'!(!&)*+'!(!,))-#\"./
Do it now before your name is gone!
2637 people own their name on the
web with Nombray, including:
A
!\"\"#$%%&'()*+',-./)*
@*'& 0\"'&
get your name on the web
?03./!:)*)!3,!1$%!\"0*)\"-1!$95!1$%*!5\"+)!$5!&:)!9)#
Why own your name on the web?
6!7)08!.$5&*$0!9:\"&!.$+)'!%8!9:)5!8)$80)!')\"*.:!,$*!1$%
6!;0)<\"&)!1$%*')0,!\"#$<)!$&:)*'!93&:!&:)!'\"+)!$*!'3+30\"*!5\"+)'
6!=+8*$<)!&:)!8$'3&3$5!$,!1$%*!8\"4)!35!>$$40)!')\"*.:!*)'%0&'
6!?$5'$03-\"&)!1$%*!8*$@0)'!\"5-!.$5&)5&!$5&$!\"!'3540)!9)#!'3&)
0\"!*12#*.#,*234(5627.)81'9
:&&8BCC?:*3'D%5&E.$+
:&&8BCCFG:300+\"5E5\"+)
:&&8BCCH*I55)*%-E.$+

Design iteration 4
De-clutter, polish the visuals, and simplify
\"0*)\"-1!\"!+)+#)*2!!'345!35
Claim Your Name
own your name on the web
on the Web!
6
7*'& 0\"'&
get your name on the web
803./!9)*)!3,!1$%!\"0*)\"-1!$:5!1$%*!5\"+)!$5!&9)!:)#
I am Today, your first impression
AmyBela.com is made on the web.
You need to control that.
Do it now before your name is gone!
!\"#$%&!%'!(!&)*+'!(!,))-#\"./

Next iteration: overview video

Back to the current home page...
Dave
Cortright

Search results

“What you get” overview

My super-clean payment form

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

LiveSpot
Concept for an in-car location-based service

Search UI
Search results are on top so they aren’t obscured
by the user’s hands when typing on the keyboard.
Restaurants Paul Reddick Remoulade more...
category contact restaurant
‹ back Re|
Gas 1 2 3 4 5 6 7 8 9 0
Food q w e r t y u i o p
Home a s d f g h j k l
Work z x c v b n m , .
School

Ambient view
During lulls in navigation, show location-based
information in an ambient, peripheral view.
R in 16 mi 27 min Crystal Springs Reservoir
Filled by water piped hundreds of miles from
Remolade Hetch Hetchy Valley in Yosemite National Park,
652 Polk St. the reservoir lies in the bottom of the San
San Francisco Andreas earthquake fault canyon.

Design insight: park, then walk
Navigating directly to the destination does not make
sense in dense urban areas. First, assist in parking.
< ! mi look for parking Street parking is now free (after 6pm)
Remolade
652 Polk St.
San Francisco
$12/day $5/hour
$10/day
$10/day
$4/hour $4/hour

Web site for airplane enthusiasts
Interactive glossy brochures; Richistan; Plane porn 
intoFlight SEARCH sign in
e.g. cessna ! 1998 ! light sport !172 ! aerobatic ! N724DE ! $100k
What’s New Cessna Skycatcher 162 Aeropro Eurofox
Cessna 172 SkyHawk
Summary updated.12:34pm
Cessna Citation CJ3
N357JD photos added.12:07pm
Own your own plane?
Show it off! Add it to this site.
Beechcraft Bonanza G36
N485FQ for sale.11:42pm Beech 350 Super King Air Cessna Caravan 675
Cirrus SR22
Comment added.10:358pm
Help make this site better!
Take a poll. It will only take 2 minutes.
Pilatus PC12
Plane added. yesterday
Cirrus SR20 Cessna Skylane 182

Make and model page
Large image slideshow, basic info, endless browse
intoFlight SEARCH sign in
e.g. cessna ! 1998 ! light sport !172 ! aerobatic ! N724DE ! $100k
Cessna 162 SkyCatcher edit this page
2 passengers $110–125k
100 hp @2750 RPM Continental O-200D
490 lbs max useful load
15,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 Cessna 182 Eurofox Cirrus SR20 Pilatus PC12
SIMILAR PLANES

Where I Hang (a Facebook application)
Destination recommendations for friends and FOAFs in their 20s
!\"#$%&'&\"()* !\"#$%&'()$'#'&#*+),-.
+'0($,-0+5*(7.$32
!\"#$%&'%(\"\"$)*+,- I did both interaction
+,-.&&&&/0&12)*3,45&&&&/0&6$7%)85&&&&(88&2&12)*3,4&&&&')974%&6$7%)85&&&&1%:; and visual design
!\"#$%&$'()*+%+,-.%
Basic layout & colors
C*>$)067 !\"#$\"%&'()#*+, consistent with the
!\"#$%&'()*+$,-.$/01*$21-*.$32
=0CJ'$6-X)$9('0-$5*($9>C).$J>-$[$80-'$J'6+9$
**91'7$JC$-8'$7(>+A$5(0-$J*C)Q 4$5(6'+7)$80+9$8'(' main Facebook UI
\\'+7C )067$C')-'(70C
-,)&-()$&.\"/*)
!\"#$%&# :;\"$<6110$,-.$=*>+-06+$<6'?.$32 Orange color added
P')-$J>((6-*$*+$-8'$G'+6+)>10Q$2+7$
@'A'$B>)-$077'7$6-$C')-'(70C
for a younger look
H8'0G'($-80+$N0$3*)-'R0S
-,)&01*(*
T0U6'($)067$EV$70C)$09* D\"E$%1$30&6+*$F'01.$='+1*$/0(A.$32
!\"#$%&# G*G>10($6+$-8'$,-0+5*(7$+'-?*(A Distressed fonts
W('0-$G10H'$-*$9*$5*($0$86A'$-80-$ reinforce the look
7*')+X-$6+U*1U'$9'--6+9$6+$0$H0(Q while maintaining
YU*++'$)067$10)-$Z8>()70C
=6H80'1$I0H*J) lightweight visuals
!\"#$%&# 4$80+9*>-)$6+$H*&&*+
K0-0)80$L'M-'( Column widths use
D$80+9*>-)$6+$H*&&*+ the golden ratio
@'A'$077'7$0$?''A$09*
N0+H'$O0&61-*+
C*>$)067 E$80+9*>-$6+$H*&&*+ Main column shows
W*-$)6HA$05-'($'0-6+9$8'('Q$K*-$9*6+9$J0HAQ friend feed; right
T0U6'($)067$0$?''A$09*$ column shows
]$G('U6*>) ! D$ 4$ \"$ ;$ !$ ^$ _$ :$$$+'M- ` recommendations

AskMeGo
1:1 real-time chat on a shared topic of interest
+,7'(1/(? +,7'(,'
!\"#$%&' !\"#$%&%'(%&%)*$\"%#%+('),-./-#0,-1%2#33*'(#$-%2-43'(%'(%24#5$*5#,,6%#(6%$'2*57
(%')*%+,-*.-%+/'0
8*$+(? 8*>#$*+(? +/&$-+(? I%/#(-)#(-&/,8(%&1(5*'-(-&(8)*-(*@&1-J !\"#$%&'#()*+(,'-#$#+-+(*'.(/*++,&'+(0 #\"#'(%&12(
+8$*/@&&4,'7(? \"*8*-,&'+( 3)*$#(%&1(4'&56#.7#(5,-)(/#&/6#(+##4,'7(*.\",8#9
? \",.#&(7*>#+(? ,D&.(?
D3E(? /*$#'-,'7(? &/#'(
+&1$8#(? @&*$.(7*>#+(? -./(&01&2&)#\",+&3$0,&1\")).$(%
*+,*'(8&&4,'7(? S>#$,8*'( !\"#$%\"&'(#&./)&(\"%$&+#,
:.&6(? @&'+*,(? TA
.,7,-*6(8*>#$*+ 456 /&+9(;##.@*84 :;(%&1(1+#(!\"#$$%&'()*+,)<(=&,'(1+(*'.(8*$$%(
*66 !\"#$%&\"'($)*&\"+\",-.\"/0)0&+1\"2+3-4+\"5(4\"36\" &\"#$(%&1$($#/1-*-,&'(;$&>(-)#$#(&'-&(-),+(+,-#9
*$-+(H()1>*',-,#+ 75402+,\"8+2+&0(,\"+5&-4\"/(0,)\"+\"&(,\"(5\"4-%-+42*9
@#*1-%(H(+-%6#
@1+,'#++(H(;,'*'8# ;*>,6%(\"*8*-,&'+ !\"#$%\"&'(#&)\"\"*&+#,-&(\"%$
8*$+(H(-$*'+/&$-*-,&' !\"*+8-\"+\"=\"3(,&*\"(1/\"/+$)*&-4\"+,/\"36\"
8&>/1-#$+(H(,'-#$'#- 5+3016\"#$%&\")(&\"'+2>\"54(3\"+\"&40;\"&(\"?+.+009 .,7,-*6(8*>#$*+ AB(>,'1-#+(*7&
8&'+1>#$(#6#8-$&',8+ !@3\"&+>0,)\"+\"8+2+&0(,\"&(\"G(%&+\"H02+\"0,\"+\"
.,','7(&1- 5&$6.(&;(5*$8$*;- 576&/&+9(;##.@*84 2($;1-\"(5\"3(,&*%E\"+,/\"!\".+,&\"+\")((/\"2+3-4+\"
#.18*-,&'(H($#;#$#'8# !@3\"+//02&-/\"&(\"A(A9\"!\"%;-,/\"+'($&\"BCD\" 5(4\"&+>0,)\";02&$4-%\"(5\"&*-\"4+0,\"5(4-%&\"-&29
#'-#$-*,'>#'-(H(>1+,8 *($4%\"+\"/+6\"(,\"0&E\"+,/\"*+8-\"'--,\";1+60,)F CDE(/6*%#$+ FG(>,'1-#+(*7&
#'\",$&'>#'- 0M(/E\"N$,-E\":+,I0%>P\"A*02*\"%*($1/\"!\"'$6P\"
;*>,6%(H($#6*-,&'+),/+ 8*$($#/*,$
!@3\",(&\"%$4-9\"?-1;9
;&&.(H(.$,'4 :(\"!\"*+/\"+,\"+220/-,&9\"7,/\"!\"%*(;;-/\"+4($,/\"
7*>#+(H($#8$#*-,&' 5(4\"+\"'(/6\"%*(;\"0,\"&*-\":+,\"<(%-\"+4-+9
8*>#$*+ A()&1$(*7&
)#*6-)
)&>#(H(7*$.#' CDE(/6*%#$+ Q;)4+/0,)\"&(\"+,\":RH9\"S(&\"%$4-\"05\"!\"%*($1/\"
!@8-\"(.,-/\"(,-\"%0,2-\"I0+3(,/\"J$1&03-/0+\" )(\".0&*\"+\"5013\"2+3-4+\"(4\"/0)0&+19
6&8*6(@1+,'#++#+
'#5+(H(#\"#'-+ '+2>\"0,\"&*-\"=K%L\"0M(/%E\"N-,%E\"O\",(.\"+\"N$,-9
/#-+ K(/$#\",&1+ 8 L( E( F( G( M( N( O( P((('#Q- R K(/$#\",&1+ 8 L( E( F( G( M( N( O( P((('#Q- R
/&6,-,8+(H(7&\"#$'>#'-
/$#7'*'8%(H(/*$#'-,'7
+8,#'8#(H(>*-)#>*-,8+ 8&>>1',-%(71,.#6,'#+ ?(-#$>+(&;(+#$\",8# ?(/$,\"*8%(/&6,8% ?(*@&1-(1+
+&8,*6(+8,#'8#
+&8,#-%(H(816-1$#
+/&$-+

Rated Best (http://rated-best.org)
Ratings simplified: A single recommendation per category

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

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

Re-designing the IM window

Pitching several design alternatives
A. Insider and Plug-ins are each independent drawers Design B
Insider is open on every sign in, plug-ins are closed to
ensure that we get an unobstructed ad impression.
B. Insider in a drawer; Plug-ins in a separate window
Plug-ins are a separate floating window, with a
button at the bottom of the main Messenger list to
open the window.
C. Pane, not drawer
Insider is shown in a second column of a widened
main window. There is a button in the menu bar to
show/hide. Plug-ins are in a separate window, as in
design B.
D. Collapsible plug-in area (similar to the current design)
Default state is collapsed. After that, it is sticky.
E. Dual drawers
Drawers on both sides of the main window. Plug-ins
on one side and Insider on the other.
F. No tab plug-ins
Remove tab plug-ins from the product and leave it to
Yahoo! Widgets to provide this type of functionality.
Focus solely on other means of extending our product
that are more closely tied to real-time conversations,
like shared activity plug-ins.

Conference room maps YAHOO!
HACK
problem solution
Cleaner visual design, direct
DAY
It is difficult to find conference rooms—
especially when not in your home building labels, and rotated versions
or on your home floor. mounted in obvious locations:
stairwell and elevator exits.
· Maps aren’t in obvious locations
· Maps aren’t rotated to account for And massive, highly-visible
the direction they are mounted room labels too!
· Labeling is indirect, via a legend
· Labels are too small
· Maps are visually cluttered

Two more Hack Day designs YAHOO!
HACK
DAY
problem
Aside from the basics, like :‐) and ;‐)
emoticon shortcuts are difficult to both
remember and type. Often the shortcut
doesn’t map well to the concept.
<:‐P is the shortcut for
solution
Mnemonic shortcuts embody the concept.
shortcut is now !party
! reinforces brand and it’s consistent with
Yahoo! Open Shortcuts:
http://shortcuts.search.yahoo.com
Get my Emoticon Shortcuts utility from:
http://tinyurl.com/2efh4q

Design concept – Messenger Desktop
×
Kurt Hamilton
Type a name or phone number
I am Available 
Jessica Green Nicole Heffley Jeff Hasslehoff
Local: Amarin Thai Blog: What an amazing game! a-ha – Take on Me
IM Call PC Video more IM Call PC Video more IM Call PC Video more
montecristosandwitch Larry W futbolluvr
Answers: Why is the sky blue? Let’s have a video call! Photos: Flickr photostream
IM Call PC Video more IM Call PC Video more IM Call PC Video more
Free 2 Rhyme Lara Sampson Becky Chapman
Young MC – Bust a Move Idle Homework
IM Call PC Video more IM Call PC Video more IM Call PC Video more
more 
Design concept—Messenger Desktop
Click a button or press a shortcut key to bring up a full-screen
overlay UI. It shows who is currently online arranged by importance
to the user, based on previous communication history. The UI is fully
keyboard accessible. Typing filters the contacts shown.

Writing great design bugs
Written by me for Yahoo!’s internal design pattern library
problem
Design issues always come up after the spec has been 6. Justify. Include the reasons why this bug needs to be
completed but before the product ships. During this fixed if it’s not implicitly clear. When in doubt, over-
time, bugs are the best tool to drive design changes in communicate the justification. This is especially
the product. A well-written bug can mean the important for enhancements and more controversial
difference between getting an issue fixed and not. bugs. Include as much real data and links to backup
materials as possible.
solution
1. Choose your bugs wisely. Make sure you only write 7. Include one or more screenshots. Use circles and call
up bugs that you really think need to be fixed. Don’t outs to focus attention and add context.
waste the team’s time with trivial stuff, especially In Windows, press Alt+Print Screen to capture the front-
when there are much bigger issues out there. most window to the clipboard; paste into Paint. Save
2. Search for duplicates or related bugs. Someone may out as a png. On the Mac press Cmd+Shift+4 and then
have already written up this bug or one like it. If so, the space bar to capture the front window to a pdf file.
either add your content to that bug, or at least refer to Open it and re-save out to a png.
it in yours. 8. Fill in all fields accurately. Product, Component,
3. Include the build number at the start of the Summary Version, Browser, os, and especially Severity and
field. This should be a separate field, but until it is, Priority. It's a good way to earn the respect of the
include it at the start of the Summary field. product managers and developers on your team. And if
you do it poorly, it's a good way to lose their respect.
4. State the desired behavior in the Summary field. If
you state what’s wrong here, that leaves things wide 9. CC wisely. Choose the appropriate audience to include
open for devs interpreting what the fix should be. It on the CC of the bug (pm, dev lead, your manager…).
doesn't matter if the solution is in the body of the bug; But don’t overdo it.
Devs spend much more time reading bug lists than 10. Drive your bugs to closure. If the bug is languishing
they do the body of each bug. Make it so they can pending a decision from pm, dev, or bug council, go
successfully fix the bug without looking at the body. make sure that person is working to make the decision
5. Include three sections in the Description field— and move the bug to closure. The longer a bug sits
steps to reproduce, actual result, and desired result. around untouched, the less likely it will get fixed.

Excerpts from my Yahoo! design blog
I saw the documentary March of the Penguins about a year “It turns out hammers aren’t used for driving
ago… And the whole time—while I’m marveling at this amazing nails anymore. They’re mainly used for
and beautiful process of nature—in the back of my mind I’m bashing and ripping; a handheld tool of
thinking “These penguins have a lot of unmet needs.” They are destruction. This was the key insight from
hungry, cold, and tired; they need to keep their egg safe, gather the Stanley Discovery Team, and it spurred
food for their chick, and meet up with their mate again after an the design of the new Fubar (Functional
extended separation. So many unmet needs, out of which fall so Utility Bar), which recently won a Popular
many possible solutions… (4/7/07) Science 2006 Best of What’s New award. So
the old hammer has been replaced by two
This is an inspired use of lateral thinking to solve tools that do the job better: the pneumatic
the problem of traffic safety. Researchers created nail driver and the utility bar. (12/14/06)
an array of brake lights that expands the longer
they are on; The tail lights appear to widen and
the middle brake light rises. This give the illusion I wouldn’t say that SeeqPod has a great interface. It’s OK.
that the car is approaching more quickly than it But it’s simple. And the value proposition for the site itself is
actually is. It caused test subject to brake 0.1–0.3 equally simple—a search engine for MP3 files. It is
seconds more quickly than a control group, which remarkable in that it just works. Think of a song, search for
would lead to fewer rear-end crashes. (8/23/07) it, click a result and hear it, all in less than a minute. (8/3/07)
“Toyota’s chief engineers consider it their responsibility to begin a design by going out and seeing for themselves—
the term within Toyota is genchi genbutsu—what customers want in a car or a truck and how any current versions
come up short… In August 2002, Obu [chief engineer for Toyota’s new Tundra pick-up] and his team began visiting
different regions of the U.S.; they went to logging camps, horse farms, factories, and construction sites to meet with
truck owners. By asking them face-to-face about their needs, [the team] sought to understand preferences for towing
capacity and power; by silently observing them at work, they learned things about the ideal placement of the gear
shifter, for instance, or that the door handle and radio knobs should be extra large, because pickup owners often
wear work gloves all day. When the team discerned that the pickup has now evolved into a kind of mobile office for
many contractors, the engineers sought to create a space for a laptop and hanging files next to the driver…” (3/19/07)

Single page product vision
Great design cannot happen without a great 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) Assumptions
1. Add basic pstn (public switched telephone 1. This is a date-driven release
network) functionality into Yahoo! Messenger 2. pstn user experience not integrated with im or pc calls
2. Release a public beta by 11/28/2005 3. Part of the team will work in parallel on Lucy
3. Increase mindshare and thought leadership in the (the version of Messenger after Postman)
emerging VOIP market 4. psi will be used for premium service billing
4. Increase pc-to-pc and pstn voice usage through 5. The new service will replace Dialpad’s service
Yahoo! Messenger 6. No automated migration; existing Dialpad customers
5. Increase number of premium subscribers to the will have to manually sign up for the new service.
Yahoo! network
Pstn Out Pstn In Signup and Other Features (priority 2)
Account Management
Allow users to call pstn Allow users to received calls Advertise the new premium OpenTalk
phone numbers from within to their own phone number services of pstn Out and pstn Users set their status so
Yahoo! Messenger. within Yahoo! Messenger. In within the UI. friends can connect and start
Allow users to sign up for the talking immediately.
premium services via a web- More 360° support
based flow. Add a button to go to the
Allow users to manage their user’s 360° page.
account on the web: Podcasting support
· View account balance Record a call and publish it to
· Add/remove services your blog.
· View billing history
· Get help & support

My Day design concept—Microsoft Office:mac
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.

Simplifying the MSN contact card
This was the existing
contact card from
MSN for Windows.
Please note I did
not design this!
In addition to the
poor aesthetics and
use of space, there
hides an insidious
usability issue…
There are more fields
below the fold, but
the only indication of
this is the nearly
invisible scroll bar.

Contact card—MSN for Mac OS X
My design for the
contact card uses
subtle shading and
left margin labels,
which clearly
delineates logical
groups of fields
without taking up
vertical space.
The fields are also
not much wider than
the expected data.
So it all fits neatly
into a single dialog,
with room enough
left for a picture too!

Design aphorisms
Sayings I’ve either heard or written over the years
to help me focus and inspire my work
· First define the problem, then design a solution
· People want outcomes, not artifacts
· Make it easy to do the right thing and difficult to do the wrong thing
· Without clear goals, design is either art or gambling
· Communication is always the primary goal
· Communicate—concisely, candidly, consistently
· Just because you can doesn't mean you should
· Ask why; know why · Identify all assumptions
· Crave data · Question all assumptions
· Optimize · Know all of your options
· Be pragmatic · Doing nothing is always an option
· Iterate, iterate, iterate · Learn from the past