Design System Component Status Page
I’m proud to say our team just released a fancy new Component Status page! A component status page helps signify to our users what components are available for adoption, what we’re working on next and what state the component is in.
The Problem: Why did we need a component status page?
• Our users tried to adopt components or design system elements that weren't officially “released.” The communication about their allowed usage was unclear. We also had some missing documentation to help folks better understand how the component was meant to be used.
• Teammates asked us when components would be available while building new UI’s and what the next components being created were.
• Stakeholders didn’t have as much insight into the development of components unless it was through a meeting
• Folks were unsure if they could contribute a component or needed to wait for it to be developed.
Goals
• To create a conversation starter with our team
• Take the guesswork out of what's happening with components in the system
• Provide a simpler, scannable roadmap of the system's plans
Process
After defining our problems and goals, I wanted to do some competitive analysis and gain some inspiration. I took a deep dive into the world of design system component status pages. I noticed I gravitated towards the pages that had visually distinguishable statuses that were much easier to scan through and read than those that had just similarly-colored icons in a big visual field. Here’s some examples of component status pages that I looked through for inspiration:
• Polaris
• GitLab
• Project Clarity
• VueDS
• Orbit Kiwi
• Thumbprint
• Morningstar
The most difficult design problem was figuring out which status categories worked best for our teams and product. I did a comparison between each of the above page’s categories to see what themes I could pull and also started to create my own set of statuses that could work for our system. I paired with one of our developers, Dane, to sift through my ideas of what could make sense, then I got to work with some design mockups, and gaining feedback from my design team and also some developers from other teams.
In the end, we landed on what you see here! We hope to eventually share our design system site with the world, but for now it’s still only available internally.