Unfiy Multi-Brand Form Design
At Gartner, I was responsible for designing forms used across four distinct B2B software sales sites, each with its own design system. To streamline the design process, I developed centralized form guidelines that maintained WCAG compliance and introduced a multi-brand library powered by Figma variables. This system reduced design time by 4x, making it easier and faster to apply consistent design standards across all brands.
Design & Test 4x Faster | 14% Increase in From Conversion | WCAG Compliance
Initial audit to identify deficits across brands
To build this project on solid design principles, I began by completing Adam Silver’s Form Design Mastery course. Using this as a foundation, I set best practices tailored for GDM’s unique brand landscape. I also incorporated insights from GDM’s past research and trusted sources like Nielsen Norman Group and Baymard Institute.
The result was a set of evidence-backed guidelines focused on creating accessible, user-friendly forms across all brands. this original audit documented each brand’s current compliance, recommended updates, and publication status tracking. This document also served as a valuable reference for designers, developers, and product managers, helping unify design decisions around form implementation and keeping everyone aligned across brands.
Building a clear visual design framework
To ensure clarity and alignment, I summarized all visual design recommendations in a Figma deck, providing a concise and visually organized reference for the team. Using the primary brand, I created mockups illustrating how each recommendation would look when implemented, ensuring that the designs aligned with brand guidelines while addressing usability improvements.
To the right is a slide from the deck, featuring evidence links for each recommendation. These links connected directly to detailed entries outlining the implementation steps and the research supporting each change.
This structure offered the team a high-level overview of the proposed updates while enabling deeper dives into specific recommendations for those interested in exploring the research and technical details. By bridging visual examples with actionable insights, the deck served as a versatile tool to drive understanding and collaboration across design and product teams.
Visualizing form behavior expectations
In addition to visual improvements, I documented comprehensive recommendations for form behavior, including validation protocols, accessibility enhancements, and error handling expectations. Visualizing these abstract, behavior-focused changes was critical to ensuring clear and streamlined implementation. I created detailed diagrams to illustrate expected form behaviors, making it easier for developers to align on precise functionality and reducing the risk of miscommunication during handoff.
These visual aids, paired with the accompanying research in the Figma deck and Coda document, served as a single source of truth for all stakeholders. This approach fostered efficient conversations with developers and secured buy-in from both the wider design team and the product teams responsible for implementation.
Building multi-brand flexibility with variables
To establish a scalable multi-brand variable system, I began by duplicating the primary brand’s component library and variable structure to provide a foundation. This approach ensured consistency while allowing flexibility for customization. My focus centered on two critical collections: the Validation collection and the Brand collection.
The Validation collection streamlined error, warning, and success states, enabling quick prototyping and providing clear guidance for development specifications. Once the validation variables were in place, I linked them to the Brand collection. This setup allowed seamless brand switching, ensuring that even when transitioning between brands, the correct validation states rendered by default.
The top-right image illustrates the completed Validation collection, with variables ready for reference in the Brand collection. This layered approach not only reinforced consistency across brands but also simplified workflows, making the system both user-friendly and developer-ready.
I followed the same pattern for other cross form elements like buttons, cards, and progress indicators.
Bringing it all together & getting validation
To ensure a smooth implementation of the multi-brand form components, I collaborated closely with the development team managing our primary brand's repository. This repository, built using Tailwind CSS and supported by Storybook, served as the foundation for components across all brands.
Because many of the recommended updates were already validated UX best practices, we did not need to do in-depth user testing. We opted to closely monitor pre-post numbers to ensure that the changes did not have any unexpected consequences on our revune or conversion. We decided to first roll out the updates in the CMS-based environment used for simpler forms. Once everything was confirmed we rolled out the changes to more complex non-CMS environments. By starting with the CMS, we ensured that the foundational multi-brand functionality was stable before scaling.
One key addition during this process was the validation error state summary, the only entirely new component required. This summary was designed and styled to ensure consistency across all four brands, leveraging the "Validation" variables collection.
My role in this process included delivering detailed specifications, creating handoff documentation, and facilitating discussions with developers to align on scope, technical feasibility, and implementation timelines. This ensured that every detail of the design system was communicated clearly, minimizing confusion during development.
Results and extending the reach
The results of our A/B tests with the form design and accessibility improvements mentions above yielded ~14% increase in Lead Acquisition form conversion, which translates to an additional 1 million per year in annual pay per lead revenue.
This paved the way for more complex improvements.
Extending the reach & improving functionality
Once the basic design updates were made, we were able to expand the reach of the improvements to functionality. The example shown here was our switch from long drop down select lists to radio buttons with an other option. This change, recommended by Adam Silver in the forms mastery course, removes the friction of searching through long select lists for most users. Because this update required more back end development, it came later in the rollout process, once the new fields and radios had been styled.
There’s more!
Reach out to hear more about building a multi-brand library powered by Figma variables, and how I led Design -> Development cross functional collaboration.