Firefox Developer Tools: UX design contributions to open source
In March I gave a lightening talk at the inaugural AIGA GROW conference in Austin, TX. GROW is aimed to support emerging and junior designers of all disciplines.
When I was given the opportunity to speak I knew I should share my story of how contributing to open source helped me become a better designer. This is form of that talk that I gave adapted for you reading pleasure.
I have always been passionate about community and creative problem solving. Design thinking has given me a framework for solving problems and open source has given me a space to solve them within a community.
What is Open Source?
Let’s imagine that I invite you over to my house for dinner. I make this beet salad that everybody loves. (If you hate beets or salad, you’re wrong) It’s a recipe I found online years ago. So you’re at my house, eating beet salad. You love it. And you’re like OMG Kristin, that was so good, can I have the recipe? And of course, I give it to you.
A few weeks later you decide to make the salad for yourself. The salad has arugula in it, but you think to yourself, “I actually like kale way more than arugula.” So you decide to change the recipe and make it with kale instead. And it turns out the kale is better than the arugula. You change your version of the recipe.
That recipe is like open source. Something is made available for anyone to download and use. They can make any changes to the original that they like. Those changes can be merged back into the project, or not.
If, when you asked me for the recipe, I said nope, that recipe is a secret. You can’t have it. That would be the opposite of open source, and it’s called proprietary.
I was introduced to open source when I heard about a project called Adopt-A-Hydrant. In Boston, after a gigantic snowstorm, when a fire emergency happens, the fire department first needs to dig out a hydrant before they are able to tap into that water supply. As a solution to this problem, a group of designers and developer built an open source application called Adopt-a-Hydrant. Through the app, residents can volunteer to dig out a particular hydrant after a snowstorm.
When I heard about Adopt-a-Hydrant I was hooked and two years ago I began contributing to an open source project at Firefox. The choice to contribute to open source has been a game changer for me. To give y’all a sense of what it’s like to be a designer in open source, I’ll walk you through one of my contributions.
A Project: Firefox developer tools color accessibility
For this contribution, I worked on a color contrast problem that a UX designer on the Firefox team had already identified. The issue was documented in Github.
Github is a place where developers & designers collaborate together on a project.
An issue is just another term for problem.
Background research
For some context, every web browser has a suite of tools called Developer Tools. You can compare developer tools to opening up the hood of a car. If there were something wrong with your car, you would need to look under the hood to figure out what was wrong, developer tools are the under-the-hood of web pages and applications.
These tools are essential for developers test and debug their code.
An important part of those tools is the Console. It provides messages, warnings and errors to developers. This color accessibility issue lived in the console.
The notes on the issue said:
This magenta color in console warnings is clashing and does not meet accessibility standards.
To clarify, the problem was that the magenta text on the pink background was clashing, hard to read for people with good vision and impossible to read for people any vision impairment.
The user story
As a developer, I need warnings in the console to be visually accessible so I can quickly understand issues with my code.
My process:
Step 1:
My first step when I want to work on an issue is always to claim the it by commenting on it and saying something like “I would like to work on this!”
Step 2:
Then I make sure I understand the requirements and expected deliverables.
Requirements:
✔️ Color recommendations for both dark and light mode
✔️ Colors need to pass accessibility tests
✔️ Those colors should to come from Photon — Firefox’s design system
Deliverable:
✔️ 2 color recommendations
Step 3:
Next I make sure that I have the right tools to solve the problem, in this case I used Photon as a tool to find solutions within Firefox brand standards. According to Photon, Magenta and Red are the colors that should be used to communicate warnings and errors.
I also used WebAIM’s Color Contrast Checker to test those solutions for color contrast to make sure that the warnings could be read by all people.
After testing all the warming appropriate colors in Photon, I realized that none of the documented Photon magenta or red colors passed contrasts tests in dark mode.
At this point I needed some help, so, I made some prototypes that incorporated different photon hues and posted them on slack and Github asking for feedback.
During that feedback loop a designer at Firefox asked why I wasn’t using the same color family in dark and light modes. This was a great question! I explained that I had tested all the colors in Photon, but that there was nothing documented within the same hue passed accessibility standards in both light and dark mode.
Together we decided that Photon needed more colors in its range. So I adjusted my original contribution requirements to include:
New requirement:
✔️ Reverse engineer a Photon color for warnings in dark mode
So, I went to work reverse engineering both Photon red and magenta to find colors in those families that passed accessibility in dark mode. Then I documented the best color choice and handed them off for development.
This is just one of a handful issues that I have worked on. It was approved by the Firefox team and implemented. And so my work is part of Developer tools which is used by a million people weekly & that’s a big deal!
Contributing to open source is not always super sleek and sexy. But It has given me a space to improve my design skills, allowed me to collaborate with experienced designers as well as non-designers and it has helped me stand out in a sea of junior designers.
Because of my experience I think that contributing to open source projects is a better use of our time and skills than creating unsolicited redesigns and artificial work that we post on dribbble and behance.
How you can get started
Now that I have you all excited about contributing to open source, let me give you some suggestions on how to get started.
Step 1: Most of open source takes place on GitHub. Set up a GitHub account & learn the very basics
Step 2: Decide what you want to do, you can look at projects that already have designers contributing.
One of my favorite places to explore projects to contribute to is Open Source Design.
Step 3: Once you have found a project to contribute to read the “README.md”. There you’ll learn how to get engaged with the community.
Go out there, become a better design by contributing to open source!
