Docker Design System
A React component library to create a cohesive, unified product experience at Docker
The Project
The Docker Design System is probably one of my favorite projects I got to work on at Docker. Not only I got to initiate this project, but I also had the opportunity to participate in early designs and talks at the company level around the needs of a design system and what the impact would be for product development. The need for DDS came from the entropy in user interface designs at Docker.
None of the color palettes or components were consistent from one product to another and as we were going towards a more consolidated product experience especially for our enterprise suite, we needed something that would let developers build consistent UIs, with low effort and high flexibility. We based our design system on Atomic Design by Brad Frost. We defined and implemented each layer:
- Protons (Theme, color palette, fonts)
- Atoms (buttons, text fields, checkboxes)
- Molecules (search bar, forms)
- Organisms (navigation, page layout)
If you're curious to learn a bit more: design.docker.com.
Technical details
The component library itself is a lerna/yarn monorepo based on React and Styled Component built with Emotion. Each component of the DDS library was a yarn workspace package that let us build, test and release them individually and also as a whole. Additionally, each component would provide its own MDX documentation that would get bundled in a DocZ website which served as our internal documentation explaining how each component had to be used to all the other frontend developers at Docker. I focused a lot on this project on testing and releasing these components and built several Jenkins pipeline to automate most of these processes so we could develop and publish new components faster.
Personal Growth
This frontend project was perhaps the biggest internal project I got to work on. Its scope spanned across the whole product development org at Docker and brought together what was a disjoint product experience to a single unique vision for Docker UIs. I got to learn a lot about automating the testing and publishing phase while working on this project. I've never got to play with tools such as Jenkins before, but this project was the perfect opportunity to learn more about it. Additionally, I got to work a lot on specs and documentation, which were key for this project to be successful.
Challenges
Staffing
Despite this project being extremely important for the business, we were only a handful of developers working on DDS part-time. Hence why automating most of our process was key for this project to move as fast as possible.
Scope
The scope of this project was spanning across all Docker products. Hence we had to rethink our mental models regarding React component design, API designs and also quality/accessibility. We wanted each component to meet high accessibility and testing requirements out of the box for them to be reliable for all the other frontend engineers at Docker using them.