mozilla & firefox:
open design @ scale


             John Lilly &
           Mike Beltzner
                Mozilla
1. some personal history

2. some mozilla background

3. how we design at mozilla today

4. what we’re thinking about next...
15 years ago in CS547...
Robert Cailliau
visited from Geneva...




                         photo: wikipedia.org
...and brought one of these...




                                 photo: wikipedia.org
...and he
         photo: wikipedia.org




demoed this...
And I remember thinking to myself:

“Neat! Text & images...click, click, click.”
Then, I fell asleep.
In my defense, I was really tired.
But then things got a lot better
                                    Dr. Dobb’s Journal, Jan 1991
     & started to click ...
“The great and rapid success of the personal computer industry over
the past decade is not without its unexpected ironies....
My path after Stanford HCI

                             Software Company
My path after Stanford HCI

                             Software Company


                              ATG (Apple Labs)
My path after Stanford HCI

                             Software Company


                              ATG (Apple Labs)...
My path after Stanford HCI

                             Software Company


                               ATG (Apple Labs...
My questions changed



 “How do I design great things?”



 Became: “How do organizations design
 great things?”
Which naturally led me to Mozilla

                              Software Company


                                ATG (A...
Mozilla’s mission is to
 promote choice,
  innovation, and
participation on the
       Internet.
Mozilla is...
Mozilla is...


   A global open source software project
   with thousands of contributors
Mozilla is...


   A global open source software project
   with thousands of contributors


   Around a quarter billion u...
Mozilla is...


   A global open source software project
   with thousands of contributors


   Around a quarter billion u...
Firefox is...
Firefox is...


                ~40% of code by
                community
Firefox is...


                ~40% of code by
                community



                More than 8,000 add-ons
Firefox is...


                ~40% of code by
                community



                More than 8,000 add-ons



  ...
Worldwide Firefox Market Share (last year!)
Some models for design (caricatures!!)



                          Genius-driven design



                           Dat...
http://upload.wikimedia.org/wikipedia/
   en/d/d2/Internet_map_1024.jpg
photo by julep67@flickr (cc) by-nd-nc




Queen’s University
       (Great White North)
photo by davestfu@flickr (cc) by-nc-sa   photo by alles-schlumpf@flickr (cc) by-nc-sa



Studied cognitive science & educati...
But I liked the inverse
Started doing software interface design at IBM Canada
Started with Mozilla around the
time of Firefox 1.5
1.5 - interface designer
2.0 - mozilla design lead
3.0 - product designer
3.5 - product director
What do you think about
when you hear the words:
    “open source design”
Design by committee
       Lipstick on a pig
Not ready for prime time
Embracing the chaos...
                                                                       “Fitts’ says bigger
        ...
...and organizing a chorus.
listen

lead

play
listen

lead

play
Chaos
Anyone can comment on a proposal for a change
Chaos
Anyone can submit a change to the code
Chaos
easier to comment on design than code
Chaos
camps are formed quickly
Chaos
noisy, unfocused, lacks perspective
Order
Not everyone can approve a change
Order
Strong leadership structure
Order
Strong leadership structure
Order
 educate
Order
identify and elevate smart contributors
Order
co-ordinated, parallel, leveraged
listen

lead

play
Provide organization and
structure to direct contributions
Create small teams, led by strong
contributors, and give them responsibility
Elevate discussions with data
and research whenever possible
Treat disagreements as negotiations
      and don’t forget your BATNA*
                (* best alternative to a negotiated...
listen

lead

play
Give contributors complete
freedom to play and explore
Add-ons:
a shared playground for
users and contributors
Labs is an incubator for ideas and experimentation
listen

lead

play
Open, participatory models of design can be surprising
match title & url
             the original idea




tweaked the
“frecency”
          based on feedback




adaptive learn...
Some things we’re thinking a lot about now
Some things we’re thinking a lot about #1:
Browser evolution & competition
The Situation 5 Years Ago



                            IE6: 95%+
The Situation Today (300% more circular icons!)



             68%                      22%


              8%           ...
Where browsers are going...

• Performance like native applications


• More applications


• More persistence


• More co...
Things we’re thinking a lot about #2:
Global Design: language implications
Things we’re thinking a lot about #3:
Global Design: cultural implications
Firefox China Edition
Things we’re thinking a lot about #4:
Scale, scale, scale
1% of our audience used to be 10,000 users

         it’s now 2,500,000 users

         20% is 50 million people
Questions?
Thank you.




beltzner@mozilla.com
     lilly@mozilla.com
 unattributed pictures from stock.xchng
Stanford CS547 April2009
Stanford CS547 April2009
Stanford CS547 April2009
Stanford CS547 April2009
Upcoming SlideShare
Loading in …5
×

Stanford CS547 April2009

4,806 views

Published on

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,806
On SlideShare
0
From Embeds
0
Number of Embeds
293
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
































  • - design in OSS projects has a pretty bad reputation

  • - going to be talking mostly in a UI design context
    - but the lessons I’ve learned are really for any sort of design
    - code design
    - marketing campaign design
    - IA design
  • - this is the goal
    - for the past 2 years, I’ve been working towards this chorus
    - not all the way there yet, but I have a strong sense of how to get there
  • - but these are the three things I think you need to remember
  • - but these are the three things I think you need to remember
  • - some bugs (like the “restore support for MNG”) get a lot of noise
  • - this can be terrifying
    - millions of lines of code, millions of minute details (sound familiar to designers?)
  • - everyone has an opinion on design
    - there’s a lot of misinformation
    - watch out for things like “user testing would tell us”, “Fitts’ Law says” or “My mom ...”
  • - closebuttons on tabs
    - how do you decide when arguments are both convincing (and vitriolic!)
  • - you can see how this design was added to over time
    - no clear vision on how to support the user task
    - typical OSS design
  • - 2000 people with editbugs
    - 400 people with CVS access
    - (still quite a lot!)
  • - module ownership & peerage system
    - benevolent dictatorships
  • - Mike Connor (our benevolent leader!)

  • - blog posts like alex faaborg’s
    - talk about it in bugs
    - dispell myths and get people interested in learning good ways of doing design
  • - don’t pretend you’re the only one with the answers
    - give out whuffie and credibility
    - identify weak arguments: “My Mom”, “Fitt’s Law”, “More usable”, “It’s always been this way”
  • - Gavin Sharp revised the Mozilla OpenSearch format
    - Mike Connor added JSON support
    - Joe Hughes worked on the UI presentation
    - community quickly updated searchplugins
  • - but these are the three things I think you need to remember
  • - set plans and clearly state design principles


  • - our PRDs with prioritization & schedules are out there for people to see
    - feature brainstorming list helps people organize their ideas (thousands of edits, 2 instances of vandalism)
  • - module ownership model
    - allows debates to occur in smaller groups
    - final decisions should always be checkpointed with everyone
    - empower with design specifications that inspire the “commander’s intent”
  • - use your resources to leverage the community
    - get your community to provide the data
    - got eye tracking research and cognitive data modelling for closebutton problem
  • - you own the product
    - you carry the responsibility
    - you are the benevolent dictator
  • - but these are the three things I think you need to remember
  • - if you love ‘em, set ‘em free
    -


  • - introducing Mozilla Labs!
    - slew of people now excited about figuring out how to add social features into the browser
    - ties back into listen and lead
  • - but these are the three things I think you need to remember












  • - but these are the three things I think you need to remember

  • Stanford CS547 April2009

    1. mozilla & firefox: open design @ scale John Lilly & Mike Beltzner Mozilla
    2. 1. some personal history 2. some mozilla background 3. how we design at mozilla today 4. what we’re thinking about next 5. questions & discussion
    3. 15 years ago in CS547...
    4. Robert Cailliau visited from Geneva... photo: wikipedia.org
    5. ...and brought one of these... photo: wikipedia.org
    6. ...and he photo: wikipedia.org demoed this...
    7. And I remember thinking to myself: “Neat! Text & images...click, click, click.”
    8. Then, I fell asleep.
    9. In my defense, I was really tired.
    10. But then things got a lot better Dr. Dobb’s Journal, Jan 1991 & started to click for me...
    11. “The great and rapid success of the personal computer industry over the past decade is not without its unexpected ironies. What began as a revolution of individual empowerment has ended with the personal computer industry not only joining the computing mainstream, but in fact defining it. Despite the enormous outward success of personal computers, the daily experience of using computers far too often is still fraught with difficulty, pain, and barriers for most people, which means that the revolution, measured by it’s original goals, has not as yet succeeded.” - Mitch Kapor, A Software Design Manifesto (Dr. Dobb’s Journal, 1991)
    12. My path after Stanford HCI Software Company
    13. My path after Stanford HCI Software Company ATG (Apple Labs)
    14. My path after Stanford HCI Software Company ATG (Apple Labs) Incubator
    15. My path after Stanford HCI Software Company ATG (Apple Labs) Incubator increasing levels of innovation at the edges
    16. My questions changed “How do I design great things?” Became: “How do organizations design great things?”
    17. Which naturally led me to Mozilla Software Company ATG (Apple Labs) Incubator Ecosystem
    18. Mozilla’s mission is to promote choice, innovation, and participation on the Internet.
    19. Mozilla is...
    20. Mozilla is... A global open source software project with thousands of contributors
    21. Mozilla is... A global open source software project with thousands of contributors Around a quarter billion users
    22. Mozilla is... A global open source software project with thousands of contributors Around a quarter billion users The maker of the Firefox Web browser
    23. Firefox is...
    24. Firefox is... ~40% of code by community
    25. Firefox is... ~40% of code by community More than 8,000 add-ons
    26. Firefox is... ~40% of code by community More than 8,000 add-ons Ships in more than 60 languages
    27. Worldwide Firefox Market Share (last year!)
    28. Some models for design (caricatures!!) Genius-driven design Data-driven design Chaordic design
    29. http://upload.wikimedia.org/wikipedia/ en/d/d2/Internet_map_1024.jpg
    30. photo by julep67@flickr (cc) by-nd-nc Queen’s University (Great White North)
    31. photo by davestfu@flickr (cc) by-nc-sa photo by alles-schlumpf@flickr (cc) by-nc-sa Studied cognitive science & education with a focus on A.I.
    32. But I liked the inverse
    33. Started doing software interface design at IBM Canada
    34. Started with Mozilla around the time of Firefox 1.5
    35. 1.5 - interface designer 2.0 - mozilla design lead 3.0 - product designer 3.5 - product director
    36. What do you think about when you hear the words: “open source design”
    37. Design by committee Lipstick on a pig Not ready for prime time
    38. Embracing the chaos... “Fitts’ says bigger “The URL bar should buttons are better.” “What’s with the be removed.” dirty house?” “There should be “My mom doesn’t “Nobody uses the “Add support for a preference setting.” understand tabs.” ‘Go’ button.” BitTorrent.” “OpenID is the future!” “That’s great!” “Everyone uses tags, not bookmarks.” “I love tabs!” “The profile manager should be redesigned.” “Add support for Ogg Vorbis.” “That’s awful” “Closebuttons are better at the end of the tabstrip.”
    39. ...and organizing a chorus.
    40. listen lead play
    41. listen lead play
    42. Chaos Anyone can comment on a proposal for a change
    43. Chaos Anyone can submit a change to the code
    44. Chaos easier to comment on design than code
    45. Chaos camps are formed quickly
    46. Chaos noisy, unfocused, lacks perspective
    47. Order Not everyone can approve a change
    48. Order Strong leadership structure
    49. Order Strong leadership structure
    50. Order educate
    51. Order identify and elevate smart contributors
    52. Order co-ordinated, parallel, leveraged
    53. listen lead play
    54. Provide organization and structure to direct contributions
    55. Create small teams, led by strong contributors, and give them responsibility
    56. Elevate discussions with data and research whenever possible
    57. Treat disagreements as negotiations and don’t forget your BATNA* (* best alternative to a negotiated agreement)
    58. listen lead play
    59. Give contributors complete freedom to play and explore
    60. Add-ons: a shared playground for users and contributors
    61. Labs is an incubator for ideas and experimentation
    62. listen lead play
    63. Open, participatory models of design can be surprising
    64. match title & url the original idea tweaked the “frecency” based on feedback adaptive learning, new layout to improve visual scanning came out of the woodwork
    65. Some things we’re thinking a lot about now
    66. Some things we’re thinking a lot about #1: Browser evolution & competition
    67. The Situation 5 Years Ago IE6: 95%+
    68. The Situation Today (300% more circular icons!) 68% 22% 8% 1% choice & innovation FTW!
    69. Where browsers are going... • Performance like native applications • More applications • More persistence • More context • More mobile
    70. Things we’re thinking a lot about #2: Global Design: language implications
    71. Things we’re thinking a lot about #3: Global Design: cultural implications
    72. Firefox China Edition
    73. Things we’re thinking a lot about #4: Scale, scale, scale
    74. 1% of our audience used to be 10,000 users it’s now 2,500,000 users 20% is 50 million people
    75. Questions? Thank you. beltzner@mozilla.com lilly@mozilla.com unattributed pictures from stock.xchng

    ×