Building a design system is no simple task, and like other tricky UX projects, it takes loads of planning and preparation.
Just ask Fernando Loureiro. He’s the design director at Better and played a key role in leading the real estate software tech company’s overhaul of their design system. Their goal? To build a design system that integrates brand and product design under one roof. Their first big challenge? Somehow mingling the brand into the product.
“At every company I’ve ever been at, there was always a disconnect between brand and product. But not here,” Loureiro said. “We blended the disciplines as a platform to synergize and serve the entire company as a hub.”
Over at Freedom Financial Network, VP of Product Management Shira Libman has undergone a similar undertaking in the company’s efforts to build a design system with one key requirement: unity.
“In the initial planning phase, we decided that our design system would unify a product portfolio that was very divergent in nature, where different teams operated in silos and each used different designs powered by different systems,” Libman said.
Both Loureiro and Libman have learned many lessons throughout this process. So Built In San Francisco caught up with these UX pros to learn more about their experiences in building a design system, the challenges they faced and their best tricks of keeping their design systems up to date and bug-free.
What they do: Better is fixing the homeownership system by combining its proprietary technology with a customer service experience while removing the middleman and saving customers thousands in unnecessary charges and fees.
In the initial planning phase, what were your key requirements for the design system?
We wanted to build a design system that integrates brand and product design under one roof. At every company I’ve ever been at, there was always a disconnect between brand and product. But not here. We blended the disciplines as a platform to synergize and serve the entire company as a hub. From a central Figma platform for brand and product design, you can download a deck template, get the grid for a new app, use the most up-to-date button or even track one-offs that don’t fit closely with any existing designs.
What was the biggest challenge your team faced while building and implementing a design system?
The first challenge we overcame was mingling the brand into the product. Brand changes needed to be reflected in our products without manual labor but with clear reviews from the brand to assure its voice. We connected all of the foundational design systems elements into tokens, which are synced with the brand teams Figma file and allowed us to change systematically across all touchpoints like marketing, product and paid media. Creating a strong partnership allowed us to be efficient in how we work, express our brand and empower teams to build faster and for our users.
Another hurdle we are currently tackling is engineering adoption. Integrating brand and product helped with visual consistency and design scalability, but we need the engineering teams to showcase the craft into products for people to use. We are at the phase of transitioning legacy components into the newly designed components. We’re doing this by proactively identifying gaps, anticipating growing pains and serving the problems we face today as a small but rapidly growing company.
At every company I’ve ever been at, there was always a disconnect between brand and product. But not here.”
What processes have been especially useful for keeping your design system relevant, up to date and/or bug-free?
Communication is key. We have weekly syncs with the brand, product teams, engineering and designers to continue the awareness of ongoing work and alignment in the future vision.
We structured our Figma files to be independent — one component per file. This allows us to measure, manage, deprecate and revert at the component level to quickly and holistically sustain consistency across our products through design systems.
None of this is useful without engineering. So we partner to structure and name our files similarly, so there is parity across design and engineering. Figma is connected to Storybook. With this seamless integration, when a designer updates a component in Figma, it goes live in Storybook without us having to update these things, eliminating greater chances of bugs manually.
What they do: Freedom Financial Network empowers consumers to overcome debt and move forward toward a brighter financial future.
In the initial planning phase, what were your key requirements for the design system?
Key requirements of the design system were to unify a product portfolio that was very divergent in nature, where different teams operated in silos and each used different designs powered by different systems. We also needed to support different brands and approached the design system in a holistic way so it can offer both UI components as well as branding guidelines.
In the initial planning phase, key requirements of the design system ranged across three main dimensions. The first was the style guide with the definition of visual design language such as typography, colors, spacing and grid. The second was the definition of a component-based UI library that can work with different technologies and frameworks, the level of flexibility and what is customizable vs. standard. The third was guidelines around design and brand principles. To determine how to build it, we evaluated the requirements, technology and the tools including the level of abstraction and reusability, including the ability to support discovery and accessibility for the various customers.
What was the biggest challenge your team faced while building and implementing a design system?
First, there was the organizational challenge; the need to align the teams on the common design system and integration. The product portfolio incorporates different products and each team used different designs with different underlying systems. We had to get an overall agreement that all teams would converge to the common UI library, which the design language and brand guidelines feed into.
Another challenge was the level of flexibility and how the different brands would coexist with the required level of abstraction. We also needed to address the structure of the team and the operational model, as in, evaluating a centralized team or operating more in an open-source model. The assessment of these options required looking at the skills and expertise that are required. A dedicated team requires having the right skill set, which will foster adoption, and allowing different teams to contribute requires implementing stricter guidelines and oversight. To overcome the challenges, we assembled a cross-functional working team that included representation from all businesses working toward a common solution.
A dedicated team requires having the right skill set, which will foster adoption, and allowing different teams to contribute requires implementing stricter guidelines and oversight.’’
What processes have been especially useful for keeping your design system relevant, up to date and/or bug-free?
The design system is dynamic and always needs to adjust. Ensuring that the design systems stay up to date and that the different teams continue to follow and contribute requires maintainability and governance. In terms of maintainability, it starts with the proper documentation for every component, including a description, how to use it and examples for both visual and code.
The main process to ensure that the design stays relevant was to have a regular cadence of meetings between the UI tooling team and representation from engineering, design and product to continue collecting input on changing needs and new requests. These requests were factored and addressed by the tooling team. In terms of the governance process, we created a process that ensures that we have enforcement (a gatekeeper) both for design and engineering, alignment, the proper controls, checks and balances, and clarity on the contribution model that feeds into the maintainability.
