SlideShare a Scribd company logo
Dave Cortright

design portfolio

http://davecortright.com
davecortright@yahoo.com




                           June 2010
My Design Philosophy



First define the problem,
Then design a solution.
If I had 20 days
to solve a problem,
I would take 19 days
to define it.
     —Albert Einstein
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          •
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%
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
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
           

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

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
Spec: Re-designing the IM window
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
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:
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.
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 more clearly-defined.
· It is visually distinctive from other UI.
· It is uniquely Yahoo-branded.
· It does exactly one thing.
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
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
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.
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
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
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-""
LiveSpot: in-car connected service
Explorations of use cases via design wireframes
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 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
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.
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.
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
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
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);
Domain name registration for consumers
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!
                                                                    !"#$%&!%'!(!&)*+'!(!,))-#"./
Home page with clear call-to-action




               Dave
    Cortright
Search results with Buy It Now CTA
My super-clean payment form
Me signed in showing admin bar
Dashboard on the left; admin actions on the right
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.
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
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.
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
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

More Related Content

Viewers also liked

But I'm not an entrepreneur!
But I'm not an entrepreneur!But I'm not an entrepreneur!
But I'm not an entrepreneur!
Ben Mumby-Croft
 
About ARGAAM
About ARGAAMAbout ARGAAM
About ARGAAM
Mohammed ALKalbani
 
About ARGAAM
About ARGAAMAbout ARGAAM
About ARGAAM
Mohammed ALKalbani
 
دورة فن الالقاء
دورة فن الالقاءدورة فن الالقاء
دورة فن الالقاء
حسن ابداح
 
Strategic Planning Facilitation Guide - 2010 PMI Region 5 Conference
Strategic Planning Facilitation Guide - 2010 PMI Region 5 ConferenceStrategic Planning Facilitation Guide - 2010 PMI Region 5 Conference
Strategic Planning Facilitation Guide - 2010 PMI Region 5 Conference
mmm2033
 
Eba beyond theory v6 notes
Eba beyond theory v6 notesEba beyond theory v6 notes
Eba beyond theory v6 notes
JudithOja_Gillam
 
مسطحات النجيل إدامة و عناية
مسطحات النجيل  إدامة و عنايةمسطحات النجيل  إدامة و عناية
مسطحات النجيل إدامة و عناية
Feras Al husami فراس فهد الحسامي
 
Biz arch visual strategic planning v6
Biz arch visual strategic planning v6Biz arch visual strategic planning v6
Biz arch visual strategic planning v6
JudithOja_Gillam
 
Star Wars Startup Lessons - Super Duper Version
Star Wars Startup Lessons - Super Duper VersionStar Wars Startup Lessons - Super Duper Version
Star Wars Startup Lessons - Super Duper Version
Ben Mumby-Croft
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planning
ملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planningملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planning
ملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planning
Excellence Dayz - ملتقى التميز المؤسسي
 
Visual Marketing Plan Canvas
Visual Marketing Plan CanvasVisual Marketing Plan Canvas
Visual Marketing Plan Canvas
Ben Mumby-Croft
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...
Excellence Dayz - ملتقى التميز المؤسسي
 
Business architecture business modeling only webinar
Business architecture business modeling only webinarBusiness architecture business modeling only webinar
Business architecture business modeling only webinar
JudithOja_Gillam
 
مؤسسات تنبض بالحياة ملتقى التميز المؤسسي
مؤسسات تنبض بالحياة ملتقى التميز المؤسسي مؤسسات تنبض بالحياة ملتقى التميز المؤسسي
مؤسسات تنبض بالحياة ملتقى التميز المؤسسي
مصطفى حامد
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودة
ملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودةملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودة
ملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودة
Excellence Dayz - ملتقى التميز المؤسسي
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...
Excellence Dayz - ملتقى التميز المؤسسي
 
A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...
A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...
A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...
IABC Houston
 
دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324
دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324
دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324
مصطفى حامد
 
دليل التخطيط الاستراتيجي للتدريب وقياس النتائج
دليل التخطيط الاستراتيجي للتدريب وقياس النتائجدليل التخطيط الاستراتيجي للتدريب وقياس النتائج
دليل التخطيط الاستراتيجي للتدريب وقياس النتائج
Feras Al husami فراس فهد الحسامي
 
دليل التخطيط التشغيلي
دليل التخطيط التشغيليدليل التخطيط التشغيلي
دليل التخطيط التشغيلي
Feras Al husami فراس فهد الحسامي
 

Viewers also liked (20)

But I'm not an entrepreneur!
But I'm not an entrepreneur!But I'm not an entrepreneur!
But I'm not an entrepreneur!
 
About ARGAAM
About ARGAAMAbout ARGAAM
About ARGAAM
 
About ARGAAM
About ARGAAMAbout ARGAAM
About ARGAAM
 
دورة فن الالقاء
دورة فن الالقاءدورة فن الالقاء
دورة فن الالقاء
 
Strategic Planning Facilitation Guide - 2010 PMI Region 5 Conference
Strategic Planning Facilitation Guide - 2010 PMI Region 5 ConferenceStrategic Planning Facilitation Guide - 2010 PMI Region 5 Conference
Strategic Planning Facilitation Guide - 2010 PMI Region 5 Conference
 
Eba beyond theory v6 notes
Eba beyond theory v6 notesEba beyond theory v6 notes
Eba beyond theory v6 notes
 
مسطحات النجيل إدامة و عناية
مسطحات النجيل  إدامة و عنايةمسطحات النجيل  إدامة و عناية
مسطحات النجيل إدامة و عناية
 
Biz arch visual strategic planning v6
Biz arch visual strategic planning v6Biz arch visual strategic planning v6
Biz arch visual strategic planning v6
 
Star Wars Startup Lessons - Super Duper Version
Star Wars Startup Lessons - Super Duper VersionStar Wars Startup Lessons - Super Duper Version
Star Wars Startup Lessons - Super Duper Version
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planning
ملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planningملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planning
ملتقى التميز المؤسسي 2015 - اليوم الثاني - visual approach strategic planning
 
Visual Marketing Plan Canvas
Visual Marketing Plan CanvasVisual Marketing Plan Canvas
Visual Marketing Plan Canvas
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - الأركان الأساسية للتميز الإداري ال...
 
Business architecture business modeling only webinar
Business architecture business modeling only webinarBusiness architecture business modeling only webinar
Business architecture business modeling only webinar
 
مؤسسات تنبض بالحياة ملتقى التميز المؤسسي
مؤسسات تنبض بالحياة ملتقى التميز المؤسسي مؤسسات تنبض بالحياة ملتقى التميز المؤسسي
مؤسسات تنبض بالحياة ملتقى التميز المؤسسي
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودة
ملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودةملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودة
ملتقى التميز المؤسسي 2015 - اليوم الثاني - طريقة عملية لتطبيق معايير الجودة
 
ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...
ملتقى التميز المؤسسي 2015 - اليوم الثاني - دروس مستفادة من مشروع توثيق إجراءا...
 
A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...
A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...
A Refreshing Approach to Strategic Communication Planning by Robin Russell Mc...
 
دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324
دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324
دورة نظم وبيئة ولوائح العمل للمدرب مصطفى حامد موسى 0912813324
 
دليل التخطيط الاستراتيجي للتدريب وقياس النتائج
دليل التخطيط الاستراتيجي للتدريب وقياس النتائجدليل التخطيط الاستراتيجي للتدريب وقياس النتائج
دليل التخطيط الاستراتيجي للتدريب وقياس النتائج
 
دليل التخطيط التشغيلي
دليل التخطيط التشغيليدليل التخطيط التشغيلي
دليل التخطيط التشغيلي
 

Similar to Dave Cortright design portfolio 10

7 Lessons from Mozilla
7 Lessons from Mozilla7 Lessons from Mozilla
7 Lessons from Mozilla
John Lilly
 
Wordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from MozillaWordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from Mozilla
John Lilly
 
Transformational eGov - GTC SW 2009
Transformational eGov - GTC SW 2009Transformational eGov - GTC SW 2009
Transformational eGov - GTC SW 2009
Hillary Hartley
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
Zoe Gillenwater
 
Your Browser Is The New Photoshop
Your Browser Is The New PhotoshopYour Browser Is The New Photoshop
Your Browser Is The New Photoshop
Matt Puchlerz
 
The Biggest Challenges with Private Online Communities and the Secrets to Ove...
The Biggest Challenges with Private Online Communities and the Secrets to Ove...The Biggest Challenges with Private Online Communities and the Secrets to Ove...
The Biggest Challenges with Private Online Communities and the Secrets to Ove...
Socious
 
IS Analysis for GENI.org
IS Analysis for GENI.orgIS Analysis for GENI.org
IS Analysis for GENI.org
Rita Lowes, CPA, PMP, MIS
 
Three Tales about Social Networks
Three Tales about Social NetworksThree Tales about Social Networks
Three Tales about Social Networks
Bernard Leong
 
ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...
ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...
ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...
Vanguard Technology
 
What is Web 2.0?
What is Web 2.0?What is Web 2.0?
What is Web 2.0?
Hillary Hartley
 
So, You Want to be an SEO, eh?
So, You Want to be an SEO, eh?So, You Want to be an SEO, eh?
So, You Want to be an SEO, eh?
CreativeMind Search Marketing
 
Tab Candy Presentation Short
Tab Candy Presentation ShortTab Candy Presentation Short
Tab Candy Presentation Short
guestab5fefd
 
How to Bluff Your Way in Web 2.0
How to Bluff Your Way in Web 2.0How to Bluff Your Way in Web 2.0
How to Bluff Your Way in Web 2.0
Andy Budd
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
Nicole Sullivan
 
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and CodeDreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Salesforce Marketing Cloud
 
DOC
DOCDOC
DOC
butest
 
Website Development Worksheet
Website Development WorksheetWebsite Development Worksheet
Website Development Worksheet
webhostingguy
 
Enable viz april 2016
Enable viz april 2016Enable viz april 2016
Enable viz april 2016
Jon Schull
 
Microsoft BizSpark: Tips for Startups - midem 2012 presentation
Microsoft BizSpark: Tips for Startups - midem 2012 presentationMicrosoft BizSpark: Tips for Startups - midem 2012 presentation
Microsoft BizSpark: Tips for Startups - midem 2012 presentation
midem
 
Bigger than Google in 2009
Bigger than Google in 2009Bigger than Google in 2009
Bigger than Google in 2009
James Glick
 

Similar to Dave Cortright design portfolio 10 (20)

7 Lessons from Mozilla
7 Lessons from Mozilla7 Lessons from Mozilla
7 Lessons from Mozilla
 
Wordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from MozillaWordcamp2009 - Lessons from Mozilla
Wordcamp2009 - Lessons from Mozilla
 
Transformational eGov - GTC SW 2009
Transformational eGov - GTC SW 2009Transformational eGov - GTC SW 2009
Transformational eGov - GTC SW 2009
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 
Your Browser Is The New Photoshop
Your Browser Is The New PhotoshopYour Browser Is The New Photoshop
Your Browser Is The New Photoshop
 
The Biggest Challenges with Private Online Communities and the Secrets to Ove...
The Biggest Challenges with Private Online Communities and the Secrets to Ove...The Biggest Challenges with Private Online Communities and the Secrets to Ove...
The Biggest Challenges with Private Online Communities and the Secrets to Ove...
 
IS Analysis for GENI.org
IS Analysis for GENI.orgIS Analysis for GENI.org
IS Analysis for GENI.org
 
Three Tales about Social Networks
Three Tales about Social NetworksThree Tales about Social Networks
Three Tales about Social Networks
 
ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...
ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...
ASAE Tech 2011 Private Online Community Challenges and the Secrets to Overcom...
 
What is Web 2.0?
What is Web 2.0?What is Web 2.0?
What is Web 2.0?
 
So, You Want to be an SEO, eh?
So, You Want to be an SEO, eh?So, You Want to be an SEO, eh?
So, You Want to be an SEO, eh?
 
Tab Candy Presentation Short
Tab Candy Presentation ShortTab Candy Presentation Short
Tab Candy Presentation Short
 
How to Bluff Your Way in Web 2.0
How to Bluff Your Way in Web 2.0How to Bluff Your Way in Web 2.0
How to Bluff Your Way in Web 2.0
 
Design Fast Websites
Design Fast WebsitesDesign Fast Websites
Design Fast Websites
 
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and CodeDreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
Dreamforce | ExactTarget Marketing Cloud: The Mobile Inbox 201 - Design and Code
 
DOC
DOCDOC
DOC
 
Website Development Worksheet
Website Development WorksheetWebsite Development Worksheet
Website Development Worksheet
 
Enable viz april 2016
Enable viz april 2016Enable viz april 2016
Enable viz april 2016
 
Microsoft BizSpark: Tips for Startups - midem 2012 presentation
Microsoft BizSpark: Tips for Startups - midem 2012 presentationMicrosoft BizSpark: Tips for Startups - midem 2012 presentation
Microsoft BizSpark: Tips for Startups - midem 2012 presentation
 
Bigger than Google in 2009
Bigger than Google in 2009Bigger than Google in 2009
Bigger than Google in 2009
 

Recently uploaded

一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
02tygie
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
Design Thinking: Madhu Prabakaran 17th July 2024
Design Thinking: Madhu Prabakaran 17th July 2024Design Thinking: Madhu Prabakaran 17th July 2024
Design Thinking: Madhu Prabakaran 17th July 2024
Madhu Prabakaran
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
etls06p8
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
tobbk6s8
 
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
xnhwr8v
 

Recently uploaded (20)

一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
一比一原版美国加州大学欧文分校毕业证(UCI学位证)如何办理
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
Design Thinking: Madhu Prabakaran 17th July 2024
Design Thinking: Madhu Prabakaran 17th July 2024Design Thinking: Madhu Prabakaran 17th July 2024
Design Thinking: Madhu Prabakaran 17th July 2024
 
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
一比一原版(UWE毕业证书)西英格兰大学毕业证如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
一比一原版(Coventry毕业证)英国考文垂大学毕业证如何办理
 
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理一比一原版美国旧金山大学毕业证(USF学位证)如何办理
一比一原版美国旧金山大学毕业证(USF学位证)如何办理
 

Dave Cortright design portfolio 10

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