How We Use (and Why We Love) Our Themeable Design System
At Yext, we work with hundreds of clients. How can we create a design system that works with all of them?
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
Constructing an efficient and scalable design system has made us better designers and influenced our team’s cross-collaborative workflow. Our themeable system can be easily customized to match each client’s branding, which not only saves time, but creates a seamless hand-off process among designers and developers.
What does the Yext Design Consulting team do?
Our team works with Fortune 500 clients across multiple industries with our end to end design process taking around three weeks. During this time, our team must analyze and compress a client’s branding and apply it to our deliverables. It’s common for multiple designers to pop into client files during those three weeks to review and make changes, as our workflow isn’t linear. With so many eyes on a single file, it’s vital that our files are organized in a way that’s easy to follow. This is largely accounted for in our scalable design system: Cobalt!
Introducing Cobalt 1.0, our themeable design system.
Cobalt is a starter file based on Brad Frost’s Atomic Design Methodology that offers a simplified template of various sections and units that we find ourselves using repeatedly. These layouts include well-known design principles and best practices — such as the F-shaped scanning pattern and layer caking — to ensure that our designs are backed by the latest UX research. Having basic button and link styles already built out also saves us quite a bit of time, since we can simply modify text styles and colors as needed rather than build out each state from scratch.
How Cobalt impacts the other teams we work with.
Another benefit to using Cobalt is that it speeds up the development process by allowing our development team to match our design system with their own pre-built components. Instead of coding everything from scratch, they can reuse components by applying stylistic modifications, like text style or color changes.
When I first started as a design intern with Yext, staring at a blank artboard with only the client’s website as a reference would have been daunting. However, our design system allowed me to visualize a skeleton of necessary information before elevating the designs to match the clients’ branding. Because of this, I spent less time pushing pixels and was able to think about design on a larger scale.
How Cobalt flexes with different clients.
Each starter file can be lightly or heavily modified on a client by client basis, but Cobalt speeds up our overall workflow by preventing designers from spending an unnecessary amount of time creating reusable components and pages completely from scratch.
Coming in as a UI Design intern, using the Cobalt 1.0 starter file made the work feel much more digestible and improved my efficiency immensely. No longer was I staring at a blank artboard with endless avenues of where I could start; rather, I could begin by modifying the basic styling to match the client’s, and then spend more time getting creative with various layouts and patterns. This launchpad became my playground, somewhere I could experiment with new designs while having my home base — the starter components — right there by my side.
