Designing Tools

I was hired at Mozilla 7 months ago. While my primary role is as a Senior Design Engineer on the Firefox Desktop team, I’ve since spent a considerable amount of time working with the amazing Developer Tools team. The hope was that with my experience in UX design and my passion for web development and programming, I would be able to provide some informed design direction for our tools.

To step back for a moment, let me explain where I am coming from. One of the reasons I find such joy in the practice of User Experience design lies within one of its core tenets: to facilitate interaction between humans and computers. Written another way, the role of a UX designer is to enable people to better harness and extrapolate the utility of computers and technology. This may not always be readily apparent, as years of familiarity with computers has taught us to see these interactions often in a simple and transparent way. Many user experiences now seem obvious or without inspiration. We don’t often consider the complex machinery behind wirelessly printing a photo, or viewing a 3D map of our neighbourhood in a web browser. Yet, both of these examples clearly reveal the value of good design, whereby complexity is abstracted or hidden behind an intuitive, friendly interface and flow.

My idea of UX design is largely about enabling humans to leverage the power of computers and machines (and the incredible things they can do) without requiring a deep understanding of the underlying systems. That my parents can (easily, and without prior instruction) stream a video from their mobile phone through a wireless router to an Apple TV connected to their television is a testament to the value of good user experience. That challenge — of communicating and enabling complex systems and processes to individuals in clear, instinctual and beautiful ways — is something I find both testing and rewarding, and is central to what I do here at Mozilla.

With that in mind, I found the opportunity to be involved with designing tools for web developers an exciting undertaking. Here was a chance to take (often) highly complex concepts and information and communicate that to an audience with widely varying levels of understanding. How can we enable new-comers to feel empowered and not intimidated? How can we do this while maintaining the established workflows of more practiced experts? How can our tools help bridge the gap between the shallow understanding of a beginner and the proficiency of an expert web developer? How can we provide powerful and innovative tools for game developers, creative hackers, futurist developers, and seasoned veterans, all in the same toolbox? 


These questions are what immediately popped into my mind when I was approached with the possibility of working with the Firefox Developer Tools team. The web is an incredible space for makers of all sorts, and the prospect of supporting that creativity is energizing! This year will be incredibly exciting with lots on the go, including new, dedicated Memory and Performance profiling tools, an improved App Manager for FirefoxOS app development, and new visualizations and instruments for network, performance, and memory monitoring. I want to build tools that inspire and unleash the creativity of developers and designers around the world, and I firmly believe we are on the right path.

Furthermore, developers are a small niche within Firefox’s users, and the usual rules of UX design don’t necessarily apply. Complexity is allowed, as long as it doesn’t breed complication. Mass-appeal and approachability take on a new context. Power and efficiency gain weight as factors that drive a design. It’s a different experience to design for niches (future thoughts on this are coming) as companies like Adobe have decisively shown. The UI of Photoshop or Illustrator appears complex and overwhelming to a novice, but allows such powerful creativity and serves it’s target audience well.

Seeing what the Developer Tools team has accomplished even in the last half-year has been inspiring, to say the least. It is my goal to support this team as they continue to build amazing software that will go on to enable the future of web development. I sincerely believe that good design is integral to the presentation of new concepts and ideas, and as we continue to introduce new tools, new work flows, and new ways of developing for the web, I hope that my experience and perspective will help magnify the great work that is being done.


If you’re a developer of any experience level, I would love to hear what you think about the current state of the Developer Tools you’re using today! Drop me a line at darrin[at]

Read the original post here.

3 comments on “Designing Tools”

  1. Michael Musgrove wrote on

    If you’re the guy responsible for the current layout/look/feel of Firefox’s dev tools, then you’ve done a massive job and deserve a pat on the back. I recently jumped over to FF to debug something or another and was blown away by how luxurious it all feels. Having the console tab on the far left threw me for a bit, but other than that, it’s a very enjoyable tool. Nice work!

    1. Darrin Henein wrote on

      I’m not “the guy” who is solely responsible, in fact a lot of what is in place predates my involvement with DevTools. However, I completely agree that our UX team has done a great job so far! Thanks for the encouraging feedback and I hope you keep jumping over to Firefox from time to time ;) I think this year will be a big year for new features and massive improvements.

  2. dwn wrote on

    As an avid FF nightly user, I can’t express how awesome it has been watching the dev toolset expand. Every time I update and notice something different it’s like an early Christmas as it’s always something well-designed, stylish, and functional. Really, awesome job to you and your team.