Where Mozilla.org and Firefox Intersect

Holly Habstritt Gaal

written with Chris More and Jennifer Bertsch

Engagement’s Web Productions team has grown from a small team of technical project managers, to a multidisciplinary web development team that initiates projects, uses metrics and qualitative testing to learn from our users, and has an iterative approach to web development. We’ve had a chance to see the influence that this growth, paired with the collaboration of teams across Mozilla, has had on our work. We can be pre-emptive instead of reactionary, share our knowledge and tools, and facilitate design process and collaboration. We would like to reintroduce ourselves to Mozilla and the UX community, expose where our team intersects with the user experience of our products, and invite you to collaborate with us.

Not your typical web product
Mozilla.org does not solely exist for marketing our products. It is unique from most web sites in that to support our products and users when they need us, we must stay inline with the roadmaps and release cycles of our products. For example, there are many touch points with our users that take place on Mozilla.org, some of which are part of the onboarding process. Onboarding is more than just downloading our products as it extends to the first “unboxing” experience, updating Firefox, and sharing helpful information about new product features. This ultimately contributes to retention and an understanding of our Firefox and Mozilla brands.

In our user tests, we’ve found that users are more likely to respond positively when they have an expectation of both when and how a message is delivered. For Mozilla.org and our products, this expectation can be set by previewing an upcoming feature or new design on Mozilla.org for Firefox users. It can also be handled with a consistent pattern for how we present content updates, notifications, and new features across all of our products. The WebProd team doesn’t accomplish this alone and this is one example of how our users can benefit by our teams staying connected.

Staying connected: the intersection of our roles and roadmaps
What I’ve found at Mozilla is that separate teams are often working on similar challenges and share common goals. Collaborating across teams has been a great way to meet and learn from each other and is key to addressing our intersecting issues efficiently while ultimately creating a better end product. Most recently we have worked with SUMO to stay better aligned on presenting Firefox help messaging and we have also been collaborating on a cross-team effort to improve the First Run and Update experiences.

At Mozilla we are all part of the chain of reactions that results in what our users experience. The WebProd team has been keeping the following in mind to better support Firefox users:

  • Align our websites to product roadmaps so we can offer support to our end users
  • Optimize user onboarding flows
  • Work in parallel with Engagement and Product teams’ goals
  • Ensure website content is localized in many languages
  • Complete migration of all legacy pages to Bedrock and our Sandstone theme, which is responsive by nature.
  • Support users on any device or operating system
  • Evaluate > Test > Improve

A significant way we can all support our users is to recognize the intersections between our teams at Mozilla and the overlapping initiatives in our roadmaps. If the WebProd team can collaborate with you to create a better experience for our users, don’t hesitate to reach out to us.

We’re easy to find!

Web Productions Project Updates — July 2013

Chris More

The following is the July edition of the Web Productions accomplishments and upcoming projects.

Recent Key Accomplishments

  • Launched Firefox OS consumer website on-time (UX improvements coming soon!)
  • Migrated lots of legacy pages from the old mozilla.org website to new homes! (bye bye old designs, hello sandstone theme!)
  • Launched improved Mozillians homepage
  • Added voting to Mozilla Reps
  • Released improved newsletter subscription center (More improvements in the works!)
  • Released advanced Google Analytics metrics on Firefox Marketplace (tied to business objectives and KPIs)
  • Developed improved about:home snippet service (Waiting on IT for infrastructure improvements to release)
  • Researched and designed UX improvements to MDN
  • Refined development process and tools

Snapshot of Upcoming Projects

More Info

Have any questions? Chat with us in IRC in #www or #webprod.

Kanban & Web Productions: Lessons Learned

Benjamin Sternthal

1

Kanban has been making in-roads at Mozilla, and this is no small feat considering the size and complexity of the organization. I’d like to think our team has influenced folks, either to adopt Kanban, or to at least think about alternative development methodologies. Below is the history of how Web Productions came to use Kanban and the lessons we learned along the way.

Continue reading …

Lightning Talk Bonus Round

Michael Kelly

It was raining when the idea first came to me. Deep within the disappointingly well-lit halls of my local coworking spot, I sat in a meditative state as I contemplated the problem of sharing knowledge among the Web Productions team. As my mind drifted in and out of various realities, I came upon a world in which the only television show was the Price is Right. Taking inspiration from the wondrous paradise that this world was, I decided the proper solution was to create a monthly event: Lightning Talk Bonus Round!

Essentially, once a month the Web Productions team gets together to share short 5-15 minute talks on any subject we desire, from programming languages to design principles to mycology. We’re still working out the format and technical details, so there are no recordings available… yet. In the future, we hope to record the event and open it up to the community.

The first Lightning Talk Bonus Round was on June 3rd, 2013. There is a wiki page with links to the notes and details about each of the talks.

Craig Cook – Design Principles

Craig Cook gave a shortened version of a longer talk focused on the basics of Design Principles. He discussed controlling the balance between elements on a page to indicate which elements are more important than others. He also discussed using proximity, repetition, and contrast to help visually distinguish elements and establish the hierarchy of important on a page through visual cues. You can check out his slides on GitHub.

Screen shot 2013-06-18 at 2.53.53 PM

Giorgos Logiotatidis – Django Anonymizer

Next, Giorgos showed us Django Anonymizer, which is a Django app to help you anonymize existing data in the database. As opposed to other methods, such as maintaining fixtures or generating random data, with Django Anonymizer you’d start with a copy of your production data and configure the app to anonymize it, leaving you with data that is anonymous but still looks similar to the data you’d see in production.

This is especially useful in situations where production data may end up with interesting relationships between data that are hard to replicate when generating random data from the start. The Django Anonymizer project is available on PyPI. You can also see Giorgos’s notes in a gist.

Paul McLanahan – virtualenvwrapper and hub

Lastly, Paul talked about two tools that he finds useful during day-to-day development: virtualenvwrapper and hub. virtualenvwrapper is a set of extensions to virtualenv, which creates isolated Python environments for projects that need specific versions of Python or other libraries. The extensions come in the form of commands that help you quickly create, activate, and delete virtual environments. There are also hooks that let you execute certain commands when environments are created, activated, or deleted.

hub is a command-line wrapper for git that has extra commands tailored for working with GitHub. You can clone a repository using just a username and repository name, automatically create a fork on your GitHub account, or even create a pull request for a branch, all directly from the command prompt.

Screen shot 2013-06-18 at 4.45.52 PM

Great Success!

As I gaze over the majestic glory that is the aftermath of Lightning Talk Bonus Round, I realize that we have only just started. My work shall continue, on the first Monday of each month at 10 AM Pacific, in the hopes that someday we will be able to avoid all this knowledge sharing and pool together in a mindspace where thoughts mingle like so many fish in an ocean of web development.

Until then, we shall have to do what we can in meatspace. See you next month!

A few UX changes. A single page. Millions of new downloads.

Holly Habstritt Gaal

1

We recently designed, tested, and released a new version of our our primary download page for Firefox for Desktop. In our tests, we improved the download conversion rate of the top 3 non-Firefox browsers by over 12%! This alone results in millions of additional downloads annually.

Focusing on the entire funnel leading up to a product download and not just the product itself, is as important as the efforts taken to improve retention of a product. This is one of the approaches that the Websites team at Mozilla is taking to improve and support our products.

 

What is the /new page on Mozilla.org?

This is where the majority of our desktop browser downloads are initiated. For instance, if the user searches for “Firefox”, “Mozilla Firefox”, or “download Firefox” from a desktop browser, the /new URL is the top search result.

 

What did we change?

Though a relatively simple page, we were able to make number of changes across visual design, interaction, technical improvements and overall user experience that had substantial results. How did we do this?

  1. reduced the number of steps to download
  2. simplified number of actions displayed on page and reduced distractions to funnel user directly to download (ie: no link to Fx for Android or other products displayed)
  3. focus on our product – the last page design did not display visuals that focused on the product, but focused more on Mozilla community.
  4. significantly faster page load time
  5. updated style to our responsive Mozilla style guide
  6. inline page interaction that responds immediately to the user’s request for download, resulting in no page refresh for confirmation and installation instructions.

Old Experience – includes page refresh:

New Experience – inline interaction, no page refresh:

* To experience the inline page interaction yourself, visit the Firefox for Desktop download page.

 

Design Decisions & Testing

We could infer that the outcome of changes such as updating this page to a consistent style as our other Mozilla.org pages and improving page load time alone would have a positive result. However, some of the other changes were more subjective and required testing and validation before releasing to 100% of our users.

Based on common interaction patterns, what we know about how users respond to pages that “feel” responsive to their actions, as well as minimizing distraction, we were able to make many initial design decisions.  To validate the more subjective changes, such as button placement, button style, and animations, we ran A/B tests using Google Analytics Content Experiments.

​An important part of testing is not just validating our work, but exposing interesting facts about our users and issues that may need further attention. For instance, we learned that large percentage of users downloading Firefox already have Firefox for Desktop. This could mean that the user is not aware that we run silent updates, that they are not aware that their version of Firefox is already up to date, that they wanted a fresh copy of the browser, or a number of other possibilities. This is just one of the interesting things we learned that we are looking into for further improvements.

Given the success of these tests, we were very confident in releasing the new experience to all of our users. Our initial improvements to the /new page and download funnel are just the beginning. We will also continue to test improvement possibilities, such as the style of the download button, to learn more about our users and improve the performance of the download funnel.

 

A few stats:

Across the top 3 browsers, we saw a 14% download conversion improvement.

Across all browsers and operating systems, we saw an average of a 4% improvement.​

​Considerable improvements to page load time:

  • ​Time to be able to interact: 46% decrease
  • Time to load page content: 71% decrease
  • Time to execute JavaScript: 35% decrease

Next Steps:

Testing download button styles and placement, translate page for non-english languages, add logic and conditional messaging for all platforms to move towards a unified Firefox download page, improve other touch points within the onboarding funnel by using a similar process of testing and validating with real users.

 

Categories: UX

(re)Introducing the Web Productions Team

Chris More

Who are we?

The Web Productions team is a turn-key web development group within Mozilla’s Engagement organization. The team is two years old and has a full suite of people to handle almost all aspects of website projects. We are growing and hiring for a few key positions.

Our team

  • Chris More: Web Productions Manager
  • Mike Alexis: Web Program Manager for Mozilla.org
  • Ben Sternthal: Technical Project Manager
  • Justin Crawford: Technical Project Manager
  • Holly Habstritt: UX Design and Information Architect
  • Craig Cook: Front-end web developer
  • Michael Kelly: Back-end web developer
  • Paul McLanahan: Back-end web developer
  • Giorgos Logiotatidis: Back-end web developer
  • Andrei Hajdukewycz: Back-end web developer
  • Open: Front-end Web Developer
  • Open: Web Analytics and Optimization Engineer

What do we do?

We build world-class websites. We design great user experiences. We write clean code. We are both pragmatic and agile. We are always improving.

Here are some of the web properties that we manage and develop for:

Why do we exist?

Our team exists to develop and enhance Mozilla’s primary promotional and engagement websites. Previously, we were within Mozilla’s central Webdev group, we branched out to be closer to the people who develop the messaging and strategy that eventually turn into web-based content.

The Web Productions team is used for most web projects that are born within one of Engagement’s sub-teams. We also have projects that are owned by our team and more internally focused. This includes platforms like Bedrock and Scrum Bugs and even process-orientated work that can be applied to other development teams.

How can you get involved?

Here are some resources to help you get started with contributing to the Mozilla web.

What’s coming up on the team?

Here is a selection of major projects our team is working over the next 3-4 months:

Mozilla Developer Network Redesign: UX Workshop

Holly Habstritt Gaal

The following post is an example of how the Mozilla websites team is improving how we implement research, A/B testing, and metrics-validated solutions into our process. This allows us to learn from our users and produce work that we are confident will support our community. As we treat the Mozilla web as we would a product, we are able to work iteratively and react to the ever-changing environment that supporting our Mozilla products brings.


MOZILLA + DESIGN GYM WORKSHOP COLLABORATION

Mozilla teamed up with The Design Gym to hold a 3-part UX workshop in NYC. The workshop was unique in that it involved participants, or “solvers”, that had an interest in a particular challenge that Mozilla is working on.

For each workshop we invited expert guests to participate and add new thinking along the way. We had a great mix of beginner-level coders, self-taught experts, and designers who would like to improve their coding skills. The first workshop was held at the startup accelerator, TechStars, where we were joined by technical and creative founders. We interviewed TechStars members and they joined in design thinking exercises. For our second workshop we invited students from the MFA Design and Technology program at Parsons who brought their knowledge of creative coding and physical computing to the group. For the final workshop we were joined by members of the MDN team who participated in the final steps of the workshop and also gave feedback on the final presented solutions.

OUR CHALLENGE

We used the following challenge as the subject of our workshop: We are working on a redesign of the Mozilla Developer Network. We have an excess of valuable content, code demos, code challenges, documentation, a large and dedicated developer community, and a common goal of supporting the open web. MDN also offers content and participation on a global scale. At MDN you can be at a beginner level and learn from the community, or as an expert, contribute your skills to Mozilla. The key issue is that this content is currently presented and organized without the community in mind and how they would use MDN as a resource. Developers & designers are the MDN community, and the experience should reflect how they would use it.

The first workshop allowed the participants to learn about our challenge, community, and content. This knowledge allowed them to deconstruct and understand the problem in the second workshop and eventually focus on arriving at tangible solutions in the final workshop. It is quite a large endeavor to try to solve for everything needed in a site redesign at the end of 3 workshops, so I asked the teams to focus on 5 key topics:

  • Trust
  • Communication
  • Continuity
  • Functionality
  • Notoriety

To help the workshop participants stay on the right path, I captured key points, quotes, and feedback from the MDN community along the way. At the beginning of each workshop I presented this feedback, what we have learned so far, and topics to focus on for the session. The Design Gym leaders guided the participants through exercises that resulted in both interesting questions and solutions.

If you are interested in details about what we learned along the way and pictures of how our post-it notes turned into tangible ideas, I have posted workshop summaries on my personal blog. The workshop was divided into the following sessions, each lasting 3 hours:

VALUE

This workshop was invaluable to learning more, not just about the current MDN community, but about the needs of learners in general and how they collaborate with one-another. In the workshop we identified:

  • benefits of the symbiotic relationship that occurs between experts and beginners
  • how to surface back-channel communication on MDN, like IRC and mailing lists
  • ways to make learning more human
  • how to bring more value to MDN, not by creating more content, but by creating continuity between the content we already have
  • how to facilitate both active and less-assertive participants from all levels
  • how to keep our community both transparent and trustworthy

NEXT STEPS

  • identify bugs and short-term solutions for testing in the first half of 2013
  • create a series of wireframe mock-ups to present as possible solutions
  • create a phased approach to redesigning MDN in 2013
  • begin creating necessary content, features, and tools

Categories: UX

Mozilla.org bug triage process

jbertsch

The list of open bugs for Mozilla.org has grown to an overwhelming 1,200+ bugs . This large number of open bugs interferes with our ability to guarantee that we are fixing the most mission critical bugs in a timely manner.  As a result, we propose the following process to reduce the signal to noise ratio.

What:

Manage the mozilla.org bug list by meeting regularly to prioritize and close bugs, as appropriate.

Why:

The mozilla.org open bug list has grown to a nearly unmanageable size. In order to ensure we are aware of the most urgent bugs and prioritizing our time and resources against the most important bugs, we will begin to meet regularly to review, prioritize, and close bugs. We hope this will result in urgent bugs getting fixed more quickly, more efficient use of team resources, and clear communication regarding bug status, including reasons why some bugs may receive a “closed/won’t fix” status.

Who:

Mozilla.org product manager (me) and project manager (Mike Alexis) plus other interested parties.  If anyone would like to join us in this process, please let me know!  We can always use additional help reviewing and prioritizing open bugs.

When:

Every other Thursday (11am Pacific) at first then monthly once the number of open bugs decreases below

Where:

  • Mozilla San Francisco, Noise Pop Conference Room, 7th Floor
  • Vidyo Room:  SF0-7N Vidyo room (link to come)
  • Phone:  Call 1-650-903-0800, x92 then 9 and the ext 5704 then #, or:
    +1 800 707 2533, pin 369 – then 9 and the ext 5704 then #

Mike and I will continue to improve this process as we start reviewing bugs.