Designing
Developer Tools

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.

Redesigning icons for the developer tools proved more challenging than I thought it would be. I had expected it to be simple: design them as vectors in Illustrator, export them as SVGs and then load them in the codebase: done. Quickly however the team noticed the icons appeared blurry at the small sizes they appear at within the browser, even on our 300dpi MacBook Pros. It turned out they needed to be pixel-snapped, a process of aligning color data exactly within the grid computers use to display pixels. This put me literally back at the drawing board to modify the icons so that this was possible.

I ultimately learned a lot about Adobe Illustrator and SVGs in the process and some of my other small projects (such as the This Week in Hardware interactive illustration) are thanks to the things I learned designing these very little icons. A big thanks to my colleague Bryan Bell for the help with this work. The final set contained 54 icons.

{}…

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.

One of the wilder things I got to work on at Firefox was a social media campaign run by the mysterious humans behind @Firefox, a handle with over 1million followers. I sat down with them for a day to run a “Twitter takeover” where we polled followers for an internet mascot to turn into a sticker. Besides the usual inappropriate nonsense one might get on Twitter we got some hilarious suggestions, such as: A complicated pizza. A flying tesseract. A foxdragon.

Fred, our dragon, won the day. I drew him breathing wifi fire, because he is after all, a mascot for the internet. The social media team very happily met their goals for the quarter. I’m not saying I had anything to do with it, but I am saying Fred might. (You can snag your own Fred here.)

¹Demographics of Mobile Devices in the United States, https://www.pewinternet.org/fact-sheet/mobile/.See other projects ⟶