Let‘s tackle the same challenge again, and again.
Actually, let’s not!
The products we build get more design attention as our Firefox UX team has grown from about 15 to 45 people. Designers can now continue to focus on their product after the initial design is finished, instead of having to move to the next project. This is great as it helps us improve our products step by step. But this also leads to increasing efforts to keep this growing team in sync and able to timely answer all questions posed to us.
Especially for engineers and new designers it is often difficult to get timely answers to simple questions. Those answers are often in the original spec, which too often is hard to locate. Or worse, it may be in the mind of the designer, who may have left, or receives too many questions to respond timely.
In a survey we ran in early 2017, developers reported to feel they
- spend too much time identifying the right specs to build from,
- spend too much time waiting for feedback from designers, and
- spend too much time mapping new designs to existing UI elements.
In the same survey designers reported to feel they
- spend too much time identifying current UI to re-use in their designs, and
- spend too much time re-building current UI to use in their designs.
All those repetitive tasks people feel they spend too much time on ultimately keep us from tackling newer and bigger challenges. ‒ So, actually, let‘s not spend our time on those.
Let’s help people spend time on what they love to do.
Let’s build tools that help developers know what a given UI should look like, without them needing to wait for feedback from designers. And let’s use that system for designers to identify UI we already built, and to learn how they can re-use it.
We call this the Photon Design System,
and its first beta version is ready to be used:
design.firefox.com/photon
We are happy to receive feedback and contributions on the current content of the system, as well as on what content to add next.
Photon Design System
Based on what we learned from people, we are building our design system to help people:
- find what they are looking for easily,
- understand the context of that quickly, and
- more deeply understand Firefox Design.
Currently the Photon Design System covers fundamental design elements like icons, colors, typography and copy-writing as well as our design principles and guidelines on how to design for scale. Defining those already helped designers better align across products and features, and developers have a definitive source to fall back to when a design does not specify a color, icon or other.
Growth
With all the design fundamentals in place we are starting to combine them into defined components that can easily be reused to create consistent Firefox UI across all platforms, from mobile to desktop, and from web-based to native. This will add value for people working on Firefox products, as well as help people working on extensions for Firefox.
If you are working on Firefox UI
We would love to learn from you what principles, patterns & components your team’s work touches, and what you feel is worth documenting for others to learn from, and use in their UI.
Share your principle/pattern/component with us!
And if you haven’t yet, ask yourself where you could use what’s already documented in the Photon Design System and help us find more and more synergies across our products to utilize.
If you are working on a Firefox extension
We would love to learn about where you would have wanted design support when building your extension, and when you had to spend more time on design then you intended to.
