Brand Web System
Plaid
Brand Identity
UX / UI Design
Information Architecture
Role
Brand Design Systems Lead
Team
Brand Web: Liz R., Michael E.
WebDev Engineering: Jamie K.
Plaid Inc. is a financial technology company that provides a platform, using APIs (Application Programming Interfaces), to connect consumer bank accounts with financial apps, like Venmo and Chime.
The main website, plaid.com, inherited it's design system from product design's mobile-centric system, and was reaching a boiling point with the brand design and marketing teams. Pages within the site varied in style, ranging from old with clear product design influences, to Frankentein mash-ups of old mixed with new.
Components built from this system into the CMS (Contentful) lacked major customizations, were difficult to use, and suffered from overlapping code patches the engineering team piled onto the aging system.
The trifecta of the brand design, marketing, and webdev engineering teams collectively saw an opportunity to utilize the newly formed brand web pod to help build and lead a web design system that catered to marketing needs.
Challenge
Develop new elements and components or refine existing that evolves the current brand system from playful to sophisticated.
Flexible, fluid, and easy system that can be picked up by design and non-design teams.
Distinct, yet complimentary to product design, with a greater focus on larger digital surfaces.
Documentation for style guide, usage and contribution guidelines, and best practices.
Build a clean new library within Contentful (CMS) by WebDev Engineering.
Process
Myself and my colleagues in the brand web pod collectively designed priority tokens, components, and style guide rules in several free flow sessions. Product design's system and approved components from recently launched marketing pages to inform our design decisions.
We opted to share out our decisions with the rest of the brand design team on a rolling basis through an ever evolving style guide. At the same time, I worked with Jamie in webdev engineering to translate completed components from our design files into Contentful's library.
Team working session board
Selection of documentation pages
Prepared button components for developers
Outcome
The formation of a stronger web system aimed at brand marketing gave greater autonomy to the brand design team to creatively push the boundaries of their web-based marketing projects. Whereas in prior projects, many design choices were limited to what was available in the heavily patch-worked CMS.
While many of the elements and components are still in the build pipeline to the Contentful CMS system by engineering, the collaboration between brand web pod, had strengthened the ownership of the system.
And although in its infancy, the building blocks have been laid and will continue to grow as marking web design needs become more clearer over time.