Brian Dils
UX + Product Design
Overview
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. In addition, I also wrote an article on the Mozilla UX blog explaining my design process.
After the interaction design phase, Stephen Horlander did an amazing job with the visual design.
Gallery
Sketches of the new UI framework for developer tools inside Firefox.
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.
High Fidelity mockups showing interactions for the CSS Inspector tool
Inspector tool in action in Firefox 35
I wrote an article on the Mozilla UX blog explaining my design process.
Video of engineer Paul Rouget showing a live build after a 2012 Work Week in London
Overview video of the Firefox Developer Tools