Building a useful, easy-to-use Design System in Figma

DESIGN SYSTEM ○ UI DESIGN ○ COLLABORATION

Introduction

At Hello Divorce, I recognized the need for a cohesive design system to ensure consistency across our website and application. As we expanded our platform, I took the initiative to develop a Figma-based design system that streamlined collaboration between the marketing, growth, and development teams.

My role

Product & UI Designer

Other team members

Front-end developer

My contribution

Established a cohesive and scalable system for Hello Divorce’s visual language. Standardized the digital product and streamlined the design process and empowered other teams to work faster.

The original design specification

Understanding the original design language and assets

As the first full-time design hire, I wanted to make sure that I was building a framework that would allow me to be successful, streamline my workflow, and allow myself and the system to grow and evolve. The original websites and design assets were a collection of different contract workers design and assets, it didn’t look professional and the medley of design elements did not inspire trust or legal authority for our users.

My insights while collecting resources:

  • Inconsistent branding

  • Lack of visual identity

  • Challenging handoffs

  • Difficulty giving actionable feedback

Problem 1

There is no standardized library of design definitions, components, or guidelines for visual and brand language.

Exploring solutions

Gathering the current design language resources

I began by gathering all the existing resources and styles and putting them a Figma file for documentation and reference. Accumulating all the designs allowed me to easily see the evolution of design at Hello Divorce and understand what would work together and the current design direction of the site when I started.

Categorizing and refining design assets

I went through all the assets, categorizing the cohesive and relevant elements of the design that aligned with Hello Divorce’s current brand vision. Any outdated or inconsistent components, as well as design specs that no longer served the evolving design needs, were discarded. This process allowed me to focus on what would create a consistent visual language while removing elements that caused confusion.

Creating the reusable Figma component library

I went through all the assets, categorizing the cohesive and relevant elements of the design that aligned with Hello Divorce’s current brand vision. Any outdated or inconsistent components, as well as design specs that no longer served the evolving design needs, were discarded. This process allowed me to focus on what would create a consistent visual language while removing elements that caused confusion.

Problem 2

There is inconsistency in how different parts of the website and application are designed, leading to a lack of visual and brand cohesion.

Exploring solutions

Defining core styles and brand guidelines

To ensure design consistency moving forward, I ensured everyone on the Product Team could view the core styles and brand guidelines we made in collaboration with the marketing and growth teams. This included standardizing typography, color palettes, and spacing, and ensuring they aligned with Hello Divorce’s brand voice and identity.

Building scaleable design components

I focused on building scalable design components within Figma. These components were designed to be reusable across the platform, making it easier for the development team to implement consistent elements like buttons, forms, and navigation menus. The reusable components ensured that each new page or feature adhered to the same design principles, and reduced inconsistencies across the platform.

Impact

The Product Team was able to design, implement, and run an A/B test of improving the Home Page in 5 days that showed users were scrolling 35% more.

Marketing and growth teams have implemented over 25 new experimental landing pages using custom design component that we built in HubSpot.

The cohesive design language ensures that every interaction with Hello Divorce feels seamless and professional, giving users confidence in our legal expertise.

Learning from this project

Design systems can have flexibility

I did a lot of initial research on design systems when I started this project. I was most inspired by listening to Dan Mall on UI Breakfast. Especially how he stressed that successful design systems can be defined in many different ways, as long as there is an agreed upon contract by all the users.

Design systems need to be set up for growth

Successful design systems are not rigid and set in stone. They must necessarily grow and adapt to the product and user needs. Approaching systems with scalability, growth, and shared definitions is one way that I can set myself up for future success.