In case you missed it, Plaid launched a new website and design system a few months ago. In this post, I sit down with designers Elena Gil-Chang and Ryan “Smitty” Smith to chat about how these two efforts came together. We hope it gives you insight into how design works at Plaid and, more broadly, the work that goes into launching a new product, website, or design system. And for those of you who want all the insights without the time commitment (we admit that this post is a fifteen minute read), go ahead and skip to the “tips and takeaways” section at the end.

Why did Plaid need a new design system?

ELENA:

This is covered in an earlier blog post, but essentially, the old design system felt a little stiff. To be sure, it was also polished and elegant—the design equivalent of a navy pinstriped suit. It gave us credibility at a time when we were still establishing ourselves, but by 2018 we were ready to loosen our collars a bit (to continue with the suit metaphor). There was the sense that conceptually, it didn’t quite reflect who we’ve become and how we behave as a team. There was also a functional issue, which is that the design system wasn’t flexible enough to accommodate a growing company’s needs.

What was your criteria going in?

ELENA:

As with most design systems, the new one needed to...

• Better represent who we are and how we want to be seen

• Be scalable and allow for flexibility across a range of touchpoints

• Be differentiated from our competitors

• Be released and in the market ASAP 🙃

When you talk about representing “who we are,” what does that mean?

ELENA:

You can break this down into what we do, why we do it, and how we do it. For the what, we have our mission: to democratize access to the financial ecosystem. For the why, we have our purpose: to make money work better for everyone. And finally, the how is what really helped define our design system. Through a series of internal and external interviews, we came up with four traits that summarize how we want to come across to our customers and partners:

• Bright (as in smart, but not snooty)

• Tenacious (we’re super driven)

• Supportive (our customers are the real stars)

• Aware (the financial ecosystem is a complicated space and we never want to oversimplify things)

These traits were immensely important in giving us a rubric for what the new design system should look and feel like.

So what was the design process like?

ELENA:

We used a process that is often touted as being core to design thinking: cycles of divergence and convergence. You start with a generative, divergent phase to try to sketch out as many (minimally viable) ideas as possible, then gradually whittle those down to a few key contenders. It’s important to get a little weird with things during the divergent phase because you might come across something that, against all expectations, kinda works.

Once you’ve decided on a general direction, there’s usually a second divergent phase where you take a single element—like color—and explore it in a focused way. The way we tested our color palette was to take each one and apply it to a variety of situations (i.e., as a background color, as text, as part of an illustration, etc.). We did the same for every other key element, like our typography, illustration style, and more. It’s the designer’s due diligence to ensure that the resulting design system has been pressure-tested and is ready to be used.

Can you describe the generative phase in a little more detail? What kinds of “minimally viable” concepts did you come up with?

SMITTY:

We spent some time looking harder at our brand personality traits, blowing them out in mindmap and moodboard exercises to encourage a more generative exploration. We looked at historical cultural references that felt like interesting metaphors. These were intentionally untied to design or aesthetics with the hope being that we could get closer to what a trait like “tenacious” really meant by unpacking our own distinct interpretations, rather than leaning on current design trends that we might bias towards. We pinned these up on the wall and discussed as a group.

Once we had a better understanding of those separate sentiments, we jammed the lever down on them individually, basically taking them to their extremes. This helped us push everything apart and identify how each concept could be translated visually with type and imagery. In total, we looked closely at 11 or so concepts related to our attributes and tied to Plaid’s vision. From there we did some editing out and mashing together, then were systematic about divvying out 2 concepts per brand personality trait. Since we wanted to get a wide range of ideas, we invited the whole design team to contribute in this phase, and in total ended up presenting eight key concepts to our stakeholders. Major kudos to you (Nick), Al, and Matt (on our design team) for their involvement here and throughout the process, actively participating in requested fly-bys and formal critiques.

Who were the stakeholders?

ELENA:

Our co-founders, Zach Perret and William Hockey, and our head of marketing, Helen Min. These are the people with insight into where we want to be in a year, or two, or five. We wanted alignment on a design system that, while constantly evolving and growing with Plaid, would have a strong base to build on.

What was it like to present the ideas and gather feedback from them?

SMITTY:

Before showing any work we wanted to share our methodology and emphasize our criteria, which gave us an anchor for evaluation throughout our critique sessions. Instead of swaying towards personal preferences, we could ask why something was successful or unsuccessful in conveying our brand attributes.

Elena did an excellent job framing the goals for each session in an email prior to meeting. Then, we kicked off our crits by reiterating those points, followed by a brief introduction to each concept (which we had printed and pinned to some foam boards), then moved towards more of a freeform discussion. We limited the feedback sessions to an hour for each round, and made sure to share back documented feedback after each meeting to make sure everyone’s input was being considered.

ELENA:

Thank you. I’m very self-conscious about my emails.

SMITTY:

Of course some of the concepts didn’t completely resonate, or didn’t feel differentiated enough, and so they were naturally edited out of our research. This allowed us to narrow down the scope to just six directions for the second round. To make sure our meetings weren't just an echo chamber where we all confirmed each other's biases, we decided to get some fresh perspective by testing our designs with regular users. We created some scrappy, mock homepages, posted them on Usertesting.com, then sought input from users in three categories:

1. A technical audience: people who work in technology.

2. A finance savvy audience: people who work in finance.

3. General end users

We synthesized our findings and presented it jointly with some design revisions to our internal team of stakeholders for a second critique. With that feedback we made some adjustments and de-risked our position by presenting our work to a range of customers.

This provided more confidence in our direction, and after the third and final presentation we got buy-in from our stakeholders to go with our recommendation. This is the short and sweet version, but we were really grateful to be able to move forward with what we felt, as a team, to be the strongest direction within our exploration.

What’s something from the legacy brand that you wanted to continue and bring into the evolution?

SMITTY:

Plaid’s brand has maintained a high caliber of professionalism and quality that is something that resonates especially with our institution partners, and is something we want to continue to preserve. The brand materials that I engaged with when first joining felt clean, organized, and well documented. Our legacy systems had all the right bones—solid, sturdy typefaces, a sound grid system, and, last but not least, a beautiful logo that people are familiar with. There are other considered details like the pacing and use of white space that we will continue to hold on to while extending the brand into other materials.

Seems like a lot of companies are turning towards illustration, and it plays a large role throughout Plaid’s new design system—especially the website. Why is that?

SMITTY:

Yeah, illustration seems to have made a huge resurgence in brand development over the past few years, particularly within the tech environment. Since we’re in such close proximity to that environment physically and competitively it is hard not to see. From a positioning standpoint, though, we noticed a smaller presence in the fintech space in particular, and even less so amongst our competitors. That aside, building an illustration system felt like the right move for a couple reasons:

1. It allowed us to bring in more natural and organic qualities that balanced out the technical and somewhat masculine elements in our toolkit, like our monospace typeface, Heimat mono, or our geometric logo and bold sans serif headers. We also experimented with some hand drawn type that felt more personal. This is something I personally hope works its way back into our visual language over time.

2. It provides a good amount of flexibility with how we interact with different audiences. We can tweak the dials on textures, color treatments, brushstrokes or other layers and details that feel more or less appropriate in different contexts. We can continue to build out our character sets and add to their narratives to feel especially relevant to our viewers and users. It allows us to evolve our style as we scale our systems without feeling drastically different across audiences over time.

3. There is no limit to how you communicate something metaphorically when using illustration, where alternatives like graphic treatments or photography are harder to pull off without getting too abstract or uninteresting.

1. We can build a library in-house relatively quickly with our small team and the resources we have now. Elena and I are both comfortable creating illustrations from scratch, and our entire team is pretty savvy if we share some tips. But given that building an illustration system was a new fairly large endeavor, we wanted to hire an expert to set us off in the right direction. We did an audit of active illustrators and chose to partner with Justina Lei, an illustrator based out of Copenhagen. She was able to own the execution of our broader concepts, allowing us to redirect focus on other details in parallel, which boosted our velocity. With her help tackling some key pieces we were able to extrapolate components, rules, and guidelines. Now, we’re set up to extend our illustration library with really solid foundations in place. We’ll be looking to add to the library this quarter.

2. Finally, it is okay if illustration is commonly used today if we can execute in a way that still feels fresh and new. We combine our illustrations with some handmade textures and brushstrokes and a bit of animation to bring our use cases and narratives to life. Ultimately, we hope this brings clarity and inspiration in how Plaid can be utilized for developers and entrepreneurs alike.

Did you try different illustration styles?

ELENA:

You know it. We tried everything from more “realistic” illustrations to styles that were very geometric and almost entirely abstract. There’s one particular concept that comes to mind: it featured a lot of warm colors and was meant to be very friendly and optimistic. What we found from our early Usertesting.com sessions was that all that overt friendliness was actually making people uncomfortable. It came across as being vague, simplistic, even flippant—not a good look when you’re dealing with financial data. One user explained it like this:

This color scheme is really getting to me. I just feel like money shouldn't be fun. Like, don't be funny with my money! ...I didn't mean for that to rhyme, but seriously.

Anonymous Usertesting.com participant

Crushing, but pretty catchy. That’s how we ended up defining a style that would feel more technical and sophisticated—a black and white base, clean lines, and simplified, geometric shapes—but that could also be softer and more colorful when we needed it to.

Feels like a good time to talk about the website. How’d you go about designing it?

ELENA:

The website was the first real test of the design system. If the work we’d done at the beginning of the year laid the groundwork for what the general look and feel should be, this was going to be the time for us to iron out details around interactivity and specific user behaviors. It’s the kind of project that could take a year if we wanted it to, but we gave ourselves the ambitious goal of rebuilding it from scratch in four months. Spoiler: we ended up taking a little longer than that, but I believe that our streamlined approach did help to expedite the process by a lot.

It was actually your idea [Nick Agin] to approach the website the way we’d design a new product: we’d identify the key users, map out their critical paths, and test according to those paths. Generally, this meant:

• We stack-ranked our audiences. Because of our unique position in the financial ecosystem, we have a wide range of audiences with different needs: our customers, who might be developers or non-technical business managers; our customers’ end-users, who might be curious about how their data is being used; and financial institutions, who might be wondering whether to work with us or try to shut us out. As you can imagine, it’d be impossible to cater to each one equally, so ranking them was key.

• We determined a north star metric. Our marketing team determined that the main metric we’d track and aim to optimize would be the rate of customer signups for API keys. Of course, we care about and track other metrics too—like “contact sales” form submissions, visits to our careers page, and more—but having a north star helped keep us focused.

• We hypothesized what our users’ needs were and what a “successful” site visit looked like—i.e., what their critical paths were. For example, we knew that we’d want a prospective developer customer to easily find their way to the signup form. What content would they need to evaluate before deciding to sign up? Our conjectured developer signup path looked like this:

• We designed the whole website one critical path at a time. This is something that I’d never done before: rather than building out all of the key pages or templates first, we decided to only design the site in batches of three or four pages each. For example, we spent a few sprints finessing just the homepage, the docs, and the signup page before deciding we were ready to move on to the next critical path. Inevitably, we’d have to go back and edit pages that we’d previously considered “finished” because of constraints or edge cases we hadn’t considered earlier, but it was a process that continually put our prioritized users’ needs front and center throughout.

How did you test or validate the site?

SMITTY:

We had a pretty solid idea of what was right for Plaid after our critique sessions, and wanted to make sure that we weren’t throwing our customers off, or doing anything especially inconsiderate regarding how they understand our team and products. Fortunately, our customers rock, and were willing to spend time having personal conversations with us. We worked closely with our Sales team to source new or prospective customers; Elena and Al then scheduled and guided the conversations, while I observed and took thorough notes. This was instrumental in evolving our messaging system. In the end we had a much better idea of what each of these different partners wanted to know when, and that helped us craft our critical paths. Special shout out to everyone involved with this, we really appreciate you!

At the same time, we were crunching to develop a burn down chart of components that we could reuse throughout the site. We tried to think in systems, so instead of building, for instance, one or two quote components, we forecasted all the possible ways we would want to use quotes in the future. Then we handed off all the variations to development to get ahead of building these ad-hoc additions later. It’s easy to spin your wheels here, and we found 3-5 variations to be a sweet spot for most components.

What did you find the most rewarding about the whole process?

ELENA:

It sounds cheesy, but seeing everything come together at the very end was great. When you’re working with people from different teams, freelancers who work abroad, etc., there are always periods where you’re not sure how all the pieces will fit. The end result is cohesive, which is a relief.

SMITTY:

I’ve worked in-house for a couple of small to mid-size tech companies, slowly refining and adjusting parts and pieces within preexisting established guidelines. This was an amazing opportunity for me to learn what a brand evolution process is like, and to be a part of something more transformational. Beyond that, then and now, I am just super grateful to be a part of a really special group of designers here.

What problems does the new system solve?

SMITTY:

Prior to building out the site and our design systems library, Threads, we didn’t have answers to how new things should be made, and more importantly why they should be made that way. In order to keep things tight we defaulted to our limited kit of parts, and didn’t feel comfortable doing much outside of that. We’d have to ask ourselves, “does this feel like Plaid,” followed by the existential question of what that even meant. Now we have more confidence and alignment on who we are as a company and how we want to be representing ourselves, plus a ton of flexibility in our box of tools to do so. This translates to more effective communication that we hope informs and delights our users.

How are you measuring success?

ELENA:

For the website, our north star metric continues to be API key signups. But for the design system overall, we’ll be keeping a close eye on how it gets adopted within our own team. The next few quarters are going to be spent extending this new system to Plaid properties and tools, and it’ll largely be up to the broader (and growing!) Plaid design team to carry that out. I worked agency-side for many years and have found that a design system can be successful in the long term when the in-house team can feel ownership of it. If our fellow designers feel empowered to create great products and experiences with this system, and to continue improving the system itself, then that’ll be a great success.

On a somewhat related note, we held a workshop for Plaid colleagues about “building your own illustration” during one of our triannual Plaiderdays (our internal hackathon). It was fun and exciting to see all kinds of people at Plaid using components of our design system to build awesome new compositions.

Takeaways and tips:

They say too many cooks spoil the broth, but seeking external input at the right times will really help you find unexpected insights and avoid mistakes. We interviewed customers at multiple stages: first, when developing our brand personality traits, then when we’d decided on one system to move ahead with, and then again when we were building out plaid.com. We also used Usertesting.com to get impartial gut reactions to some of our earlier concepts, which changed the direction we were headed in—we think, for the best.

Similarly, if you want more ideas… bring in more people (duh). When designing those preliminary concepts, our goal was to be as divergent as possible while still operating (somewhat) within the realm of possibility. To do that, we enlisted the entire design team—all six of us—to pitch in. This is unusual because we generally have our own separate projects, but more importantly, because it avoids the traditional brand-versus-product divide. It was a great way for us to bond over a single project while exercising our generative capacity as a team.

Meet with key decision-makers regularly—but make it worth their time. For us, that meant roughly every two weeks over the course of two or three months when we were developing the new design system. This cadence gave us time to process feedback, have intra-team check-ins to review and critique, and turn up to the next meeting with enough work to spark a lively discussion. It’s obviously difficult to make schedules align with key stakeholders, but worth the effort to plan ahead so that they’re not kept in the dark until the last minute. One mistake we made later on was that we weren’t as diligent about keeping everyone informed as we developed plaid.com, which resulted in a few avoidable miscommunications and setbacks.

Think about what precedents you're setting for the long-term. When creating and implementing a new design system, there’s always a temptation to make things that are bespoke. We admit that we fell into that trap a few times. But we also forced ourselves to imagine what it’d be like once our design team grew beyond the single digits: if your design system is full of exceptions to the rules that require a lot of contextualization (“Oh, that thing? So-and-so was really into brutalist typefaces two years ago—whatever “brutalist” means in that context—and commissioned a custom font for quotes from prospective customers from the mortgage industry, but not from anyone else. Also it doesn’t work on mobile.”), it’s going to slow your team down and eventually break. Though creating a full set of components while also redesigning the website was tough, we’re starting to really reap the benefits now: creating a new page from scratch is so much faster because we already have all the building blocks in place.

Similarly, lay the groundwork for your design system—but don’t set it in stone. Traditionally, rolling out a new design system could take a company several years. Ironically, this would mean having a system that was already outdated by the time it saw the light of day. Our approach was to try to build a design system that had a solid foundation but enough flexibility to grow with Plaid: if we need to evolve a new illustration or pattern style for a pressing business need, or redo components of the website, we feel confident that our system can accommodate that without breaking. Part of the goal of growing our team is to bring in more bright minds and boundary-pushing ideas, and we look forward to seeing how the system evolves.

Did you enjoy this post? Do you enjoy thinking about both the big picture questions as well as the minutiae of getting things pixel-perfect? Would you be interested in joining Plaid and helping us scale our design system? We’d love to talk.