Firefox Developer Tools

In this project, our team redesigned the suite of developer tools within Firefox called the Firefox Developer Toolbox. I lead the research and interaction design phase, conducting field research with web developers in the field, conceptualizing ideas, wireframing, creating HTML prototypes, and creating video demos to communicate the new design.

Annoted wireframes from the UI Framework spec document

Video demo of my HTML protototype used to communicate iteractions to engineers, product managers and other members of the team.

Inspector tool in action in Firefox

I wrote an article on the Mozilla UX blog explaining my design process

Video of engineer Paul Rouget showing a live build of our design (London, 2012 )

Overview video of the Firefox Developer Tools

↑Back to Top