Plaid

Beyond the desire internally to have a more modern and visually impactful web presence, there was also a desire to create a more efficient and robust web design system to allow us ship and scale faster as the company hit it's next phase of growth.

Structurally the old site was built using a template based system. This was limiting as it meant each page type had a fixed design and layout which was constraining both for design and content needs. Since one of the goals for this project was to increase both flexibility and speed to launch we decided to move towards a component based system. This would allow us to build a library of interchangeable components which would ultimately allow us to design and build new pages quickly and with less engineering time needed. With this in mind, we began to develop a plan that broke the project out into three phases.

Before we could start to design full components and web pages, we knew we needed to update the shared styles and visual language used throughout the website. The old site was sharing styles and patterns with the product team's design tokens. Many styles did not scale well on web so this meant we needed to start from scratch, making decisions around foundational elements like grid, spacing, type, color, corner radius, buttons, etc. Once we had these decisions made and approval from stakeholders, we built both documentation to share with the wider team, as well as a component library in Figma for use internally as we began the next phase of the project.

Now that we had our system's foundational styles, we began the next phase by diverging with visual explorations for how the website and brand could evolve. Plaid's playful brand expression was well known and unique in the FinTech world, but as Plaid continued to grow it was starting to feel a bit dated as well as too playful. We knew we needed a bolder and sophisticated brand expression to signify to the world we were no longer the new kid on the block, but had grown into a powerful player in the financial Industry.

As we explored we began to build consensus around themes and ideas that felt like they had the right balance of sophistication and playfulness. Illustrations became simpler, allowing us to play with scale and focus attention. Color usage became more restrained. Texture began to take center stage as a key visual component. All of these things together helped form our updated brand expression for web. Below you can see some examples how this new design system could be applied.

Unfortunately I did not get to see this project through to the end, as I was unexpectedly let go due to a wider company re-org. The plan for this phase, which was already underway when I left, was to build out each component in Figma along with documentation. Below you can see an animated prototype and engineering documentation for one of the first page designs built using the new Web Design System.

Since this design system was adopted the team has been able to significantly cut design timelines for new web projects and increase design quality, which has allowed our team to rapidly launch 3 new pages and help to hit our broader company wide financial goals.

Though I did not get to see this project through to the end, our work to push and evolve the brand became so influential internally that it became the basis for evolving Plaid's brand expression and has begun to get applied to all marketing touch points.