Formulate Design System

Component Library

Deliverables

Team

Casey (myself) - Design

Mazama

Company

Carson - Lead Front-End Developer

Design Documentation

As the sole UI/UX designer, I was entrusted with significant responsibilities for this project. While we had a creative director, he delegated the UI/UX tasks entirely to me, given his different focus. Noticing the glaring inconsistencies among the company's various web forms, I recognized the urgent need for a cohesive design system.

Project Overview

Timeline

The Challenge

Creating a design system typically involves ensuring consistency, maintaining a cohesive visual language, and streamlining the design and development process. While this was still true with the goals of Formulate, it also faced a unique and ambitious challenge: it needed to seamlessly swap styling between multiple clients and adapt to various breakpoints live on the canvas. This required a sophisticated architecture capable of managing diverse brand identities, flexible components that adjusted to different screen sizes, and a robust framework that supported real-time customization.

The goal was to create a versatile, scalable design system that excelled in delivering tailored experiences across multiple clients and devices while maintaining high performance and ease of use for designers and developers alike.

Use Case

But what will it be used for? Formulate’s main purpose was to create web forms aimed at simplifying the sign-up process for low-cost internet service. These forms are designed to be intuitive, accessible, and enjoyable, ensuring anyone can enroll in an affordable internet program. By leveraging the system's capabilities in managing diverse brand identities and adapting to various screen sizes on-the-fly, we maintain consistency and optimize usability across different devices and client needs.

The First Component

How do you start on a design system with these ambitious goals in mind, while still keeping the user at the heart of the experience? Input Fields. They are the heart of any form, capturing vital user details like names, addresses, and contact info. Input fields are the cornerstone of our mission to create effective, user-friendly sign-up experiences. By prioritizing this component, we ensured a solid foundation for our design system, capable of handling various input types and maintaining consistency across forms. This focus on input fields sets the stage for our ultimate goal: making it easy and efficient for users to sign up for affordable internet service.

Innovative Real-Time Design Flexibility

Formulate features the unique ability to seamlessly swap between completely different client styling and breakpoints in real time. This is essential for efficiently running various forms for multiple clients, each with their unique styling, without needing to build and maintain separate systems for each one. The ease of transitioning between these styles and forms is massively helpful in streamlining the design process, and it also ensures accurate and swift development. This flexibility sets our design system apart, making it an invaluable tool for efficient and adaptable form creation.

The ability to swap breakpoints effortlessly is equally essential. It allows our team to adapt designs fluidly across different screen sizes and devices, ensuring consistency and usability across platforms. This efficiency is particularly valuable in a dynamic startup environment where rapid adaptation is key to staying ahead.

Tokenization

I accomplished this by setting up thorough and extensive collections of over 400 interconnected variables. As with any well-structured design system, these variables were organized into different types of tokens to ensure clarity and efficiency. The hierarchy of tokens started with Primitives and extended down to the Component level.

  1. Primitives: At the foundational level, basic design properties like as colors, typography, and spacing are defined. These primitives serve as the building blocks for the entire system, ensuring consistency and ease of updates across the board.

  2. Semantic Tokens: Building upon the primitives, semantic tokens define the specific roles of the primitives in the design. These semantic tokens made it easier to maintain consistency and adhere to the design language across different components.

  3. Component Tokens: At this level, I defined variables for the specific components within the design system. These included buttons, input fields, cards, and other UI elements. The use of semantic tokens here maintains a consistent overall design language across all components.

This system of tokens provided a robust framework to support the instantaneous swapping of designs between different client styles and breakpoints. The result was a highly adaptable and efficient design workflow that could accommodate various project requirements with ease.

Multifunctional Variables & Components

Breaking these Variables apart into different Modes allows you to change “themes” inside of Figma. This is most commonly used to change between light and dark modes, shifting color variables (through semantic tokens) from one to another. The next step above this is the ability to change breakpoints, which takes advantage mainly of Number variables, and occasionally using Boolean and/or String variables.

Moving even further past those methods brings us to the use of all the aforementioned variables to accomplish more complex theme swapping, using Color variables to change between different brand colors, Booleans to render and de-render specific client’s logos and assets, and Number & String variables to convert spacing, sizing, copy, etc. into unique experiences for each client.

Here you can 4 examples of the same page; the only difference between them is the 2 mouse clicks it takes to swap Modes. The use of color variables is pretty self-explanatory here, while Boolean variables are used to swap assets like the header and progress bar at the top as well as the WiFi and present icons inside the offer cards. Number variables are used to adjust padding and margin when necessary, and they’re also used in combination with String variables to change all typography properties between clients (a relatively new feature add from Figma). String variables are also used to change the client name at the bottom of each page, although it’s hardly visible here.

Impact and Success

Formulate was implemented into a deployment known internally as Web Form 3.0, which completely overhauled our entire web form experience. In addition to tremendous improvements in the design/dev workflow, it led to a whopping 83% increase in conversion rate compared to the archaic systems and forms that predated it, and massively boosted design and development efficiency across the board.

Increase in Conversion Rate

83%

Time Saved During Handoff & QA

25%

Looking Ahead

The creation of this design system was just the beginning. Since its launch, I’ve continued to push its evolution, adding new features and refining existing ones.

  • Continuous Evolution
    From expanding the component library with dozens of new elements to introducing typography variables and even porting the entire system to be compatible with Tailwind CSS, the system has grown significantly and is designed for ongoing improvement.

  • A Dynamic, Evolving System
    The design system will remain dynamic, evolving to meet the ever-changing needs of our projects and clients. I’m excited for the future possibilities and confident that this system will continue to revolutionize the way we work—making our processes more efficient and our user experiences even better.

  • Exploring Emerging Tools
    Figma is exceptional at pushing new, revolutionary features capable of completely changing the way we design, and I’m super excited to see what’s next from them and how I can continue optimizing our workflows and enhancing collaboration between our design and development teams.

Previous
Previous

User Experiences

Next
Next

Advertising