In the Fall of 2015 I joined the Developer Tools team at Mozilla Firefox. It was a whirlwind of learning about the complexities of browsers, developer tooling, the people writing our web specs, and open source community.
As lead (and only) designer on the team it was a challenging adjustment to the slow and meticulous speed of design necessitated by a product used by millions of people worldwide, even if I was managing the design of there tools used by the small subset of people who build websites as a hobby or for a living. I made a lot of mistakes, got a very unique look into how people use their browsers and their computers, and learned a great deal about how passionate people are about the fox program on their desktop.
In my time at Firefox I shipped new color palettes for the Developer Tools, redesigned the panel icons, designed the first iteration of CSS Grid tooling, redesigned the Responsive Design Mode, and redesigned the Debugger*, in addition to consulting the developers and brainstorming numerous small usability enhancements. I assisted the User Research team as a fly on the wall for their research on task continuity, spoke at ViewSourc.es thanks to the community team, and facilitated a social media campaign as an illustrator.* While I made some small commits in the Firefox codebase, I primarily contributed to these projects as a designer, not as a developer.
As part of my job I designed and wrote spec guidelines for developers to follow as we researched and coded new features. These would operate as living specs on something like Invision before being codified via git commits and an article on the Mozilla Hacks blog.
I worked with fellow Mozillians to design tooling for CSS Grid, which has been iterated on and is still in use today. Of all the things I accomplished at Firefox this is by far the most exciting—as a designer, CSS Grid is really changing the way I write CSS, so I was very happy to be a part of creating developer tools for it. You can read the Hacks article here.
During my time at Firefox I also redesigned the Responsive Design Mode in the Developer Tools, which allows developers to mock up mobile environments on websites. With 77% of Americans carrying a smartphone in their pockets as of 2018¹, the need for these tools to grow and adapt to a changing marketplace is becoming more and more vital—so I was glad I got to work on and ship this.
I also worked closely with my colleagues James Long and Jason Laster to redesign the Debugger. While I feel my own contributions to this project were small in comparison to the projects above, this ended up being a great case study in how the team could set up codebases so that stylistic and visual changes could be made more easily. The project is nearing 5k commits at this point and has 4,309 stars.