Unifying SaaS Tools: The Elevate Strategy Design System at BetterCloud

Background: The Elevate Design System

BetterCloud’s suite of SaaSOps tools is a lifesaver for IT teams, helping them manage everything from document security to user management. Each tool serves a different purpose and is managed by its own dedicated squad. But therein lies our problem: consistency. Users who interacted with more than one product often found themselves navigating a maze of different interfaces, and that wasn’t the experience we wanted to deliver.

In response to these challenges, we launched Elevate Design System, a strategic initiative aimed at revolutionizing the user experience across our product lineup. Elevate was more than just a facelift; it completely reimagined how our tools could provide targeted insights and streamline everyday IT operations. Our goal was to revolutionize our suite of products, enhancing both their functionality and user experience.

Given the project’s scope, Elevate would be implemented in phases, focusing on one suite product at a time, dedicating sufficient and appropriate resources and attention to each tool while maintaining our ongoing operations.

But to pull this off, we needed more than good intentions.

The Challenge: A Fragmented User Experience

As we began implementing Elevate, specific issues came to light that highlighted the need for a more systematic design approach. Inconsistencies in user experience across our different tools and within individual products were becoming a potential barrier to our users’ efficiency and satisfaction. These challenges became particularly apparent during a significant redesign initiative for our Secure tool.

Our product design team experienced growing challenges each month, and we lacked a central source of truth for crucial design elements. Designs used different components based on which designer was working on that section of the user journey. This led to noticeable visual inconsistencies, such as varying typefaces, spacings, and interface elements appearing different even on a shared screen. We had inadvertently created a design Tower of Babel, where consistency was lost in translation.

To compound matters, due to the variances in designs, our development teams continuously created and recreated reusable components due to late adjustments. Rarely did these components align with the designers’ Figma components, leading to a growing rift between design and development.

The result was a perfect storm of inefficiencies: increased development time, dysfunction between design and development, and a disjointed user experience. Clearly, we needed a unifying force, a central pillar, to ensure consistency across our evolving landscape.

The task ahead was clear, albeit daunting: How could we bring a sense of unity and consistency to a suite of tools at different stages of their lifecycle, all while staying true to the unique needs and contexts of our diverse user base? Our answer lay in building something from the ground up—an internal compass that could guide every product team through this transformation.

The Solution: Developing Fulcrum

As we progressed with Elevate, the need for a unified design system became undeniable. We needed something that could act as a bridge between our design vision and its technical implementation. This realization led to the conception of our design system, which we aptly named Fulcrum.

Fulcrum was designed to be both flexible and robust. Like its namesake, its purpose was to assist in moving things forward. It needed to accommodate products at various stages of the Elevate transformation while maintaining a coherent user experience across our entire suite. It was a delicate balance, but one we were determined to achieve.

The Discovery: Assembling the Experts

Creating Fulcrum was no small feat. We assembled a diverse team of experts, bringing together product designers, managers, engineers, and leaders. Each brought their unique perspective to the table, and together, we became the architects of BetterCloud’s new visual language.

Our team embarked on a journey of discovery, interviewing both internal stakeholders and users. We sought to understand the current pain points and the ideal features and functionalities our users desired. These insights became the foundation upon which we built Fulcrum.

The Process: Analyzing Our Interface Elements

As we launched the first Elevate-enhanced product in early 2022, we rolled up our sleeves for some digital archaeology. We combed through our existing interfaces, both live and in progress, meticulously cataloging every button, input field, and layout.

This inventory became a treasure trove of insights. Patterns emerged, revealing the atomic elements that formed the DNA of our interface. Like sorting a giant box of LEGO bricks, we categorized these elements into a clear hierarchy. This process helped us define the core components of our new design system.

The Development: Integrating Design and Code

With our blueprint in hand, we set out to build Fulcrum. In Figma, we crafted a library of components, each one a pixel-perfect representation of our vision. But Fulcrum wasn’t just about pretty pictures - it needed to translate seamlessly into code.

Our designers and engineers worked in tandem, ensuring that every color, every icon, and every component in Figma had its counterpart in our MaterialUI library. We spoke a common language of design tokens, bridging the gap between visual intent and technical implementation.

The Documentation: The Fulcrum Guide

As Fulcrum took shape, we realized we needed more than components—we needed comprehensive documentation. We developed our own documentation site, drawing inspiration from established design systems like IBM, Salesforce, and Apple.

This wasn’t just a dry technical manual. It was a guide to Fulcrum’s philosophy, filled with definitions, usage guidelines, and our collective knowledge. I was solely responsible for designing and building the site using Gatsby.js with the intention that it would become the central source of truth for all things Fulcrum.

The Launch: Implementing Fulcrum

We introduced Fulcrum to our team in late 2022. We conducted extensive training sessions, teaching our designers how to utilize the new Figma library effectively and guiding our developers in implementing Fulcrum components.

The impact was significant. Our design team saw a substantial reduction in prototyping time while maintaining consistency with our new visual language. Thanks to the clear component references provided by Fulcrum, developers could implement designs more quickly and accurately.

The Future: Continuous Evolution of Fulcrum

The launch of Fulcrum marked the beginning of a new era in our design process, not its conclusion. We continue to refine and expand the system, adapting it to new challenges and opportunities.

Looking ahead, we see Fulcrum as the key to maintaining consistency and efficiency across our growing suite of products. It’s more than just a design system. It’s the foundation upon which we built BetterCloud’s user experience future. As we looked to the horizon, we saw a landscape where our suite of products moved in perfect synchronization, united by the invisible threads of Fulcrum.

The Larger Story: Beyond Atoms and Templates

Our journey in developing BetterCloud’s design system revealed a profound truth: a truly effective design system is far more than a collection of components and templates. It’s a mindset, a philosophy, and a shared approach to problem-solving that spans our entire organization.

This realization unlocks the true potential of our design system. Beyond ensuring visual cohesion, it equips every team member with powerful mental tools to define problems clearly, approach challenges creatively, and collaborate seamlessly across departments. We were not just building a design system but fostering a culture of innovative problem-solving.

Our vision is to create a living, breathing ecosystem of ideas – a launchpad for innovation accessible to everyone, from UX designers to developers to product managers. This expanded concept of a design system will be an indispensable resource, empowering us to think creatively and work effectively toward solutions.

The lessons we’ve learned have shown us that a holistic design system can be a unifying force across our organization. We weren’t just improving our products. We were revolutionizing how we work together and solve problems in harmony.