The document outlines Dave Cortright's design portfolio and philosophy, including a redesign he led of the Yahoo Messenger interface to focus more on friends and recent online activity. It describes the data and research that informed the redesign, details of the new design concept, and why the project was successful including bringing design in from the beginning and having a clear, customer-focused vision.

1. Dave Cortright
design portfolio
http://davecortright.com
davecortright@yahoo.com
June 2010

2. My Design Philosophy
First define the problem,
Then design a solution.

3. If I had 20 days
to solve a problem,
I would take 19 days
to define it.
—Albert Einstein

4. 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 •

5. The elephant in the room
The top reason people
UI use Messenger is to see UI
21% which friends are online
and have conversations 20%
with them.
But only about ⅓ of the Friends
Friends window real estate is
37% devoted to friends! 31%
The Yahoo “taxes” were
getting out of hand.
Yahoo
Yahoo ← Yahoo Messenger 7.0
Services
Services + a banner ad
42% Yahoo Messenger 8.0 → 49%

6. 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.
% of Messenger users
Engagement
1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10
Number of friends Number of friends

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

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

9. 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 →

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

11. Spec: Re-designing the IM window

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

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

14. 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:

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

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

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

18. 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 Customize
your install, and then
unchecking the options.
+12% in toolbar installs
+35% in home pages set
+20% in search engines set

19. Web site for airplane enthusiasts
Inspiration: Glossy brochures and The Robb Report
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

20. Design features
• 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.

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

22. Concept map for flying
8"#$%!2!(-","-1-$'-(!%1)&!
,#"/0%1!#&'
,#"/0%1
0$+.2 6(&%0(.1
,$.(-&2%
+178&+1$
+178&+1$ .!0$ &)('"%"(2
+178&+1$
%)$ )&'&/(.
0&91$ #(22$' &#9!.91$ %)$
,#"/0%1
,#"/0% %)$
"'2%.+-%$. +178&+1$
/!()#!/%1+
#"-('2( &".!$.% %)$
+&21$($%!/08#
.+#(2171 %&+1$
-&.!/$ %)$()(3%!,16 !"-%+.(2151
.(/+#&%"$'2 #112$ !#() $/!+12()/
4"*($2
#112$(/!(5#!" *.&1$
%)$
!"#$ 2!(-2
34$%5!$%6
-$))+'"%31 )//1#2$
.&51
(4('%2 !"#$% +1#/$ !#&'( %)$
:+!"$1$ %)$
:8;$ %)$ :8;$ "%&'%(&$()
/1..$ %)$
*+!,
)$*(#
&--(22$."(2 !.$,"#(1"',$ )$$!'&)/1$("&/% *+!,
2%$."(25
-$))('%25
$!"'"$'2 *(&#(. *+!,()
$%0(.1!"#$%2 /1..$
):!8/ %)$()(+1.)/&!#$%&-
-.)#1$ )&'+,&-%+.(.
)&+-!+/$
*.&0%/$
-&.!/$
<( )#;/%&#0(!#(
/%&$(-)01

23. Generic concept map
A framework that can scale to other domains
:#,#$+(*(%,(#/)*3-/
0%(-)+%,
#2/#$+#,(#
+,8%$3-)+%,
+065&+0$
+065&+0$ 2!3$ -3#,+)+#"
+065&+0$
%)$ 3-,-1#$
3&/0$ 0#""%, &#/!2/0$ !"-1#* %)$
+,")$!()%$ %)$
+065&+0$ +,")-,(# 4!()#!4%0+
")%$-1#*
cer$fica$on
0+(#,"# +&.0$($%!435# 8-(+0+). %)$
$!0#"*9* %&+0$
-.+&/0$1 %)$()(-%!,01 /+()!$#"*5*
$#1!0-)+%," #00.$ !#() $4!+0.()4
4+7#%"
#00.$(4!(9#!" 5$0$
%)$
!"#$ /$%/#$)+#"
(%33!,+).* )440#.$ %&'#()*
#4#,)" !"#$ +0#4$
+,")-,(#
%)$
7+!"$0$ %)$
758$ %)$ 758$ "%&'%(&$()
4022$ %)$
*+!,
)./#
-((#""%$+#" /$%8+0#*+,8% )$$!'&)40$("&4% *+!,
")%$+#"5
(%33#,)"5
%/+,+%," "#00#$ *+!,()
%)6#$*!"#$" 4022$
)7!54 %)$()(+02)4&!#$%&:
;)#84%&#3(!#(4%&$(:)30 (0-""

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

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

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

27. Design insight: park first, 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

28. Where I Hang (a Facebook application)
Destination recommendations for friends and FOAFs in their 20s
!"#$%&'&"()* !"#$%&'()$'#'&#*+),-.
+'0($,-0+5*(7.$32
!"#$%&'%(""$)*+,-  I did both the visual &
+,-.&&&&/0&12)*3,45&&&&/0&6$7%)85&&&&(88&2&12)*3,4&&&&')974%&6$7%)85&&&&1%:; interaction design.
!"#$%&$'()*+%+,-.%
 Basic layout & colors
C*>$)067 !"#$"%&'()#*+,
!"#$%&'()*+$,-.$/01*$21-*.$32
consistent with the
=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'(' Facebook’s UI.
'+7C )067$C')-'(70C
-,)&-()$&."/*)
!"#$%&# :;"$<6110$,-.$=*>+-06+$<6'?.$32  Orange color added
@'A'$B>)-$077'7$6-$C')-'(70C
P')-$J>((6-*$*+$-8'$G'+6+)>10Q$2+7$ 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-$ add character
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.

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

30. News feed view
Best bet for a progress thermometer: in a banner above the nav bar.
Super Wall setup: 70% complete Next step: receive email
Super Wall by RockYou!
by RockYou!
My Posts Videos Photos
Videos Photos
Videos
My Posts Videos More !
More " Promo Item!
Promo Item! Settings
Settings Help
Help Search Videos
Search Videos !
!
7 new videos in your subscribed channels View them now
Top Videos My Subscriptions Friend Feed
Paulus Trisnadi
watched a video.
Title of Video
by SomeUploader
or another, easier−to−
Other videos you might enjoy...
2 hours ago use "More"ofmenu with
Title Video
Comment "More" menu bigger click targets.
Photos More ! Promo Item!
Title of Video Photos More ! title of when it
Longer Promo Item!
Rebecca Fieldman
Photos by SomeUploader wraps to 2 lines .. ....
..
posted a video.
1 day ago
Comment
Gra!ti
Comments
Gra!ti Photos
“ ”
.... .. ..
....
Comments
Title of Video
Deirdre Marie Title of Video
O’Tierney by SomeUploader
favorited a video. Longer title of when it
2 days ago wraps to 2 lines
Comment
Jenny Lin Title of Video
wrote a comment. by SomeUploader
4 days ago
Comment
RECT AD
1 2 3 4 5 6 Next
Three column format in the feed 300 ! 250

31. Video page with new compact header
Super Wall by RockYou!
My Posts Videos
Videos Photos More # Promo Item! Settings Help Search Videos !
Title of Video
by UploaderDude Subscribe Favorite !"go back to Top Videos
Send this video to...
start typing a friend's name...
Paulus Trisnadi
EMBEDED VIDEO Kathleen Watkins
Rebecca Fieldman
425 " 344 Jenny Lin
Deirdre O'Tierney
Todd Beaupre
None selected
Select All Send
add your own comment here... Comment
Search results UploaderDude videos
Paulus Trisnadi 2 hours ago Title of Video
Lorem ipsum dolor sit amet, consectetur adipiscing 90 " 70
elit. Duis semper massa sed eros. Nam a urna ut
sapien imperdiet dapibus.
Reply ! Report Spam Longer title of when it
Rebecca Fieldman 1 day ago wraps to 2 lines
Morbi leo felis, tincidunt quis, cursus sed,
hendrerit et, mauris. In hac habitasse platea
dictumst. Nulla egestas eleifend libero. Sed elit. Title of Video
Deirdre O’Tierney 2 days ago
Phasellus a nibh ut neque posuere suscipit. In

32. Super Pets: Increase engagement
Consistent header design across all new RY apps (like Super Wall)
Super Pets from RockYou!
Enter a new status message...
Home Playground Battleground Dressing Room Shopping Coins Get More Friends Help
"Pengo
"This is my status...
This status..." 12 2365
Save Cancel
In context with the app
"Pengo
"This is my status..." 12 2365
Super Pets
Home
from RockYou!
Playground Battleground Dressing Room Shopping Coins
"Pengo
Health
"This is my status..." 12 2365
Get More Friends Help
Buttercup is healthy, but she
always appreciates a snack!
Feed Pengo close
Battle
"Pengo
"Pengo status..."
"This is my Buttercup is looking to
12 2365
"This is my status..."
Happiness mess someone up! 12 2365
Buttercup is happy, but she
HP: 23 Exp: 565
always a good hug! Atk: 10 W: 18
Def: 12 L: 3
Hug Pengo close Spd: 11
Random Battle close
Note the pet status bar that appears above the "Pengo This is how many coins you
12 2365
app header, which shows key pet stats and money.
"Pengo status..."
"This is my
"This is my status..."
Health 12 2365
have right now. get more
Buttercup is clean, but she
Pengo would
always love to have a scrub!
appreciates the
"Sunny Day"
Each of these red areas is a click target that brings up an overlay... background.
Clean Pengo now for 200 coins
Buy it close no, thanks
"Pengo
"This is my status..." 12 2365
If you want to be more aggressive, don't require a click.
Pop the overlays up on mouse−over (after a delay perhaps);

33. Domain name registration for consumers

34. My design wireframe
This version given to a visual designer for final polish.
"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!
!"#$%&!%'!(!&)*+'!(!,))-#"./

35. Home page with clear call-to-action
Dave
Cortright

36. Search results with Buy It Now CTA

37. My super-clean payment form

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

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

40. 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 network) 1. This is a date-driven release
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 In Users set their status so
Yahoo Messenger. within Yahoo Messenger. 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

41. 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 difference important for enhancements and more controversial
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 up 7. Include one or more screenshots. Use circles and call
bugs that you really think need to be fixed. Don’t waste outs to focus attention and add context.
the team’s time with trivial stuff, especially when there In Windows, press Alt+Print Screen to capture the front-
are much bigger issues out there. most window to the clipboard; paste into Paint. Save out
2. Search for duplicates or related bugs. Someone may as a png. On the Mac press Cmd+Shift+4 and then the
have already written up this bug or one like it. If so, space bar to capture the front window to a pdf file. Open
either add your content to that bug, or at least refer to it and re-save out to a png.
it in yours. 8. Fill in all fields accurately. Product, Component, Version,
3. Include the build number at the start of the Summary Browser, os, and especially Severity and Priority. It's a
field. This should be a separate field, but until it is, good way to earn the respect of the product managers
include it at the start of the Summary field. 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 open 9. CC wisely. Choose the appropriate audience to include
for devs interpreting what the fix should be. It doesn't on the CC of the bug (pm, dev lead, your manager…). But
matter if the solution is in the body of the bug; Devs don’t overdo it.
spend much more time reading bug lists than they do 10. Drive your bugs to closure. If the bug is languishing
the body of each bug. Make it so they can successfully pending a decision from pm, dev, or bug council, go make
fix the bug without looking at the body. sure that person is working to make the decision and
5. Include three sections in the Description field— move the bug to closure. The longer a bug sits around
steps to reproduce, actual result, and desired result. untouched, the less likely it will get fixed.

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

43. Design aphorisms
Sayings I’ve either written or heard over the years
to help me focus and inspire my work
· 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
· 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