Solis Design System

My Role

Inception Week: Laying the Foundation

At the start of the Solis project, we conducted an inception week to align on several key aspects: assessing our current state, setting a vision, defining our desired outcomes, establishing strategic pillars, finding things that could slow us down and what's driving us forward in our 'sailboat activity', and planning our next steps. This collaborative session was invaluable for ensuring the entire team was on the same page regarding the direction of the design system. However, the session also revealed many unknowns within the business and identified several potential blockers. While attempting to address all these issues from the outset was well-intentioned, it ultimately led to a loop of problem-solving that hindered our progress. In hindsight, focusing on a few critical areas might have been a more effective approach to starting the project.

Solis Principles

To establish the principles for the Solis design system, I conducted interviews with the current RSA design team, across UX, Content & UI to gather their insights and feedback on the existing version of Solis. These discussions aimed to uncover pain points, assess their understanding of design systems, and explore their aspirations for the new iteration. Key questions included:

• "What's working? What do you like? Why?"
• "What's not working? What do you dislike? Why?"
• "What's missing? What do you want to stop or see less of?"
• "What else could we try?"

Understanding that team collaboration is crucial to building a future-proof design system, these interviews were instrumental in driving our initiative and shaping the core principles of the new Solis design system.

Following the interviews, the Solis team and I collaborated to establish our guiding principles. These principles are designed to ensure that every decision we make aligns with our goal of building the best possible design system. Using FigJam, we collaboratively developed 4 key principles to steer our efforts moving forward.

Tooling and Workflow

In the previous version of Solis, the design system was built using Figma Tokens/Tokens Studio. However, this was done before the introduction of Figma Variables. To leverage Figma's new capabilities for multi-branded tokens using modes and reduce reliance on third-party platforms, we decided to utilise these native features for Solis v2.

I set up a new "hidden" Figma library for the team to start using, ensuring that designers could integrate the new design system components seamlessly without disrupting their ongoing projects in the future.

Component Audit and Alignment

Our initial step for the RSA Solis v2 design system was conducting a comprehensive audit of the existing components. RSA's v1 design system had around 30 components across Figma and Storybook. However, we also analysed multiple RSA platforms to identify different use cases for these components.

This audit aimed to:

• Understand the current component inventory and their specific uses.
• Standardize component terminology to ensure team alignment.
• Determine the design effort required to create each component.
• Organize components within an atomic design structure.

We documented our findings in Confluence, leveraging it as an internal knowledge base. This structured approach will facilitate a smoother build stage, ensuring that the new Solis design system meets the diverse needs of RSA's commercial lines.

Branding the Solis Design System

Unlike the original Solis, which lacked a distinct brand, establishing a brand identity for Solis v2 is crucial for promoting adoption and awareness both internally and externally. A strong brand around the design system helps foster recognition, trust, and consistent usage across the organisation.

To kickstart this effort, I conducted a branding workshop with the design team. The workshop began with a brief outlining our vision and the various contexts in which the logo would be used. During the session, team members presented their ideas and concepts for the Solis brand.

After the workshop, I gathered all the input and refined the concepts into a cohesive logo that embodied the team's considerations and our overarching vision. This collaborative approach ensured that the final design was not only visually appealing but also resonated with the team and supported our goals for the design system.

Token Setup

As part of the development of Solis v2, I focused on establishing the foundation with primitive design tokens using Figma Variables. This structure is designed to be versatile, supporting the various brands integrated into the system by utilising a comprehensive colour scale.

These primitive values serve as the building blocks for our design system. They are meticulously organised to ensure consistency and scalability across different brands.

By pulling these values into the semantic file, we can efficiently create multi-branded components that maintain a cohesive look and feel while respecting each brand's unique identity. This approach not only streamlines the design process but also enhances the flexibility and adaptability of our design system, allowing for seamless updates and expansions as new brands are introduced.

This foundational work with primitive design tokens greatly simplifies the creation and management of the semantic file. By structuring our components to be driven by a single base component, we enable designers to effortlessly switch between brands within their work files using Figma's Variable Modes. This method significantly enhances the flexibility and efficiency of our design process.

Compared to the previous reliance on Tokens Studio, this approach is both more lightweight and adaptable. Designers can now make brand-specific adjustments with ease, ensuring that components consistently align with each brand's visual identity.

This streamlined workflow not only reduces complexity but also accelerates the design and development process, making it easier to maintain and update the system as new brands are introduced.

By leveraging Figma's advanced capabilities, we have created a robust, scalable design system that meets the dynamic needs of our multi-branded environment.

Reflections and Future Outlook