V1 of the API Dashboard experience for TokBox customers
No Sleep 'til Consistency
Designing & Building a Pattern Library
Strategy & Planning | System Design | UI Design | Brand Management | HTML | CSS | JS | Github
Project goal: Codify the design system established in the API Dashboard launch to establish consistency across the end-to-end developer experience and scale the efforts of the UX and Engineering teams.
Process: TAKE STOCK of UI components and modules -> BUILD them out -> GIVE them a home -> SOCIALIZE like crazy
TAKING STOCK of the UI Components & Modules
With the visual language established, it was critical to build out a robust system of UI components and use-case informed modules. This not only codified the newly-defined UI and interaction systems but also allowed for greater consistency across other developer touchpoints (like tools) in the ecosystem and laid the foundation for coding up a pattern library to accelerate future design and development. Learn more about the design the API dashboard project here
BUILDING them Out
Working closely with lead front-end developer of the Dashboard, we built out the individual UI elements and groups of components both in vanilla HTML/CSS as well as in React (what much of our developer tools and interfaces used at the time). Everything was hosted in a Sketch Library and Github to ensure easy access by all the designers and engineers in the organization. This would also make it easier to push system-wide changes that would automatically update across the library. This ensured a process of transparency, iteration, and consistency.
GIVING them a Home & SOCIALIZING like Crazy
This also paired nicely with a parallel project I led to establish a style guide for the tokbox.com and brand guide for the organization. All together, I built tokbox.com/styleguide and tokbox.com/pattern-library, two resources that were rolled out to the company and used regularly by the Marketing, Ecosystem Engineering, and UX teams. An additional unexpected benefit that was how important these resources became in onboarding new hires and gettin them up-to-speed more quickly and efficiently.
