Firefox Developer Tools

I am a contributor to the Firefox Developer Tools UX team. I work on UX issues identified by the Firefox Developer Tools team then get feedback on possible solutions and iterate until an appropriate one has been identified.

Here are a couple of the issues that I have worked on.

Color accesssibility in the console

Read my full case study and guide to contributing to open source.

Using Photon as a starting point, I re-engineered colors to create one used in console error strings AAA compliant.

Follow along with the work I did in GitHub.

My contribution on this bug included implementing the changes in the Firefox codebase.

One major outcome of this project was realizing that the colors documented in Photon had not considered dark mode. This project made it obvious that the design system needed to be expanded.

Responsive Design Mode

Using a user centered focus and Photon as a guide, I re-designed the panel for editing devices in Responsive Design Mode.

Follow along with the work I did in GitHub.

Clarifying tool capabilities through UX content

For responsive design mode in Firefox developer tools, I designed an informational message when the simulated device uses a different or outdated rendering engine in reality.

Follow along with the work I did in GitHub.