Starting the Journey
When I first dove into creating a design system at BrightEdge, the need was clear: our platform was powerful but challenging for users, especially those newer to the space. Design was inconsistent, and every new feature seemed to pull the product’s look and feel in a different direction. There was a gap to bridge between our ambitious growth goals and the usability of our product. I knew that building a design system could be the game-changer that would align our UX, boost efficiency, and, ultimately, drive growth.
Why Build a Design System?
1. Consistency
Consistency is the heartbeat of a great user experience. Users shouldn’t feel like they’re switching to a different product every time they explore new features. For us, this meant creating a unified look and feel across our platform. Consistency in our typography, colors, and components was key to building familiarity and trust with our users.
2. Efficiency
A good design system helps everyone move faster—designers, developers, and anyone creating user-facing material. Having reusable components meant my team wasn’t constantly starting from scratch, and developers could focus more on building real functionality rather than UI tweaks.
3. Scalability
BrightEdge was evolving quickly, and we needed a UX that could grow alongside our ambitions. With a design system, we had a solid foundation, making it easier to scale without losing cohesion.
4. Accessibility
Incorporating AA standards wasn’t just the right thing to do; it also opened up our product to more users and new customers such as universities which are required to only procure accessible software. This design system was about inclusivity, expanding our reach while making the experience better for everyone.
5. Cross-Functional Alignment
To make this a truly company-wide initiative, I knew we needed shared language and vision. We focused on creating a system that would be accessible and beneficial not just to Product, but also to teams like Marketing, Sales, and Customer Success.
The Hurdles Along the Way
Of course, creating a design system was not all smooth sailing. Here’s a peek into the challenges and how we tackled them:
Siloed Teams
Design systems are successful only when they’re collaborative. Early on, I made it a point to bring in stakeholders from Product, Engineering, and Marketing, encouraging everyone to own a piece of this system. I organized workshops to show the value of the system, turning what could’ve been resistance into genuine enthusiasm.
Legacy Tech Constraints
With a legacy tech stack, updating our designs meant tackling slow load times and outdated frameworks. Partnering with engineering, we moved from PHP and jQuery to React/Redux and optimized our front end to reduce load times by 40%. This technical shift helped bring our design system to life and improved our users’ experience in one stroke.
Adoption and Culture
A design system can’t be a “design-only” project; it needs to be something everyone can use and benefit from. To extend the system’s reach, we included elements that could be used across the company, like branded slide templates, product screenshots, and creative assets. This wasn’t just a toolkit for Product; it became a shared resource for all teams.
Ongoing Maintenance
The system had to be flexible. What started in Illustrator evolved to Sketch and then to Figma as we adapted to industry trends and tools. We also built a governance structure to manage updates, making sure the system evolved in step with our products and priorities.
Building the System: Process and Approach
We used Brad Frost’s Atomic Design principles, breaking down the interface into reusable building blocks, from small “atoms” (buttons, icons) to larger “organisms” (full-screen layouts). It was like building with Lego blocks: it was modular, adaptable, and optimized for reusability. Here’s how we executed it:
1. Inventory and Framework
We started by cataloging every piece of the existing UI to identify what worked and what needed updating. We set a framework that defined colors, fonts, and layouts, aiming for a one-year rollout.
2. Iterative Design and Testing
Working in small, focused teams, we designed and tested each component in stages. This approach allowed us to get feedback early and make adjustments along the way.
3. Cross-functional Collaboration
We actively collaborated with Product and Engineering to integrate our design patterns into the broader product ecosystem, making it easy to implement features consistently.
4. Company-wide Rollout
We didn’t just hand over the system and call it a day. We created internal videos, held demos, and offered hands-on workshops to ensure every team knew how to use it.
What Changed After Launch?
The impact of the design system was tangible:
- Improved Speed and Efficiency: Our load times dropped by 40%, and designers could build on top of existing components instead of starting fresh with each new feature.
- Broader Adoption: As our UX became more cohesive, adoption grew among our less technical users, broadening our market.
- Marketing & Sales Support: Branded collateral was finally easy to create, with Sales and Marketing pulling from a shared library of templates, product images, and messaging.
We also future-proofed our platform, transitioning from tools like Angular to React, and from HighCharts to D3, keeping BrightEdge on the cutting edge.
What I Learned Along the Way
Creating a design system isn’t just about building a library of components; it’s about fostering alignment across the company and designing a toolkit that everyone can use to build toward a shared vision. Here are a few takeaways I’d pass on to anyone looking to lead a design system initiative:
Focus on Quick Wins Early
To build momentum, start with high-impact, visible wins that make the value clear. This can go a long way in securing early buy-in, sounds simple and obvious but ambitions can get in your way.
Promote, Promote, Promote
Getting people to adopt the system requires constant communication. Keep sharing success stories and progress to show how the design system benefits the entire organization.
Stay Flexible and Modular
As tools and frameworks evolve, your design system should, too. Flexibility is essential for maintaining relevance, especially in fast-changing environments.
Iterate Continuously
A design system should evolve alongside your product. Establish a rhythm for regular reviews and let teams contribute to keep the system dynamic.
Final Thoughts
Building this design system at BrightEdge was a journey, one that reshaped not only our product’s UX but also our internal culture. The system helped our teams work faster, smarter, and more in sync, creating a UX that could grow with our business. If I had to sum it up, I’d say a design system isn’t just about design; it’s about creating a foundation that allows everyone in the organization to do their best work.