SFDW23: Designing in the dark
How NerdWallet’s Brand Studio uses design toolkits to embrace change
For San Francisco Design Week 2023, Nerds from our Brand Studio team presented on the topic of Designing in the Dark: how NerdWallet’s Brand Studio uses design toolkits to embrace change. We covered how we use toolkits to support our teams at NerdWallet — from brand campaigns, to CRM, to YouTube, product, and more. Balancing constraint and freedom, prescriptiveness and optionality, design toolkits help us navigate unforeseen twists and turns in development and production. But what makes for a successful design toolkit, and how can they help designers be flexible in the face of changing scope, spec, or strategy? If you missed our panel discussion, don’t fret — keep reading for a recap, and we’re always happy to continue the conversation!
What is a toolkit?
First, let’s talk about what “toolkit” means to us. Toolkits are guidelines for creating on-brand work, whether it’s a team of 1 or 100 using it. They are often a combination of sacred brand elements, like logos, alongside a program or campaign-specific system of design components built to flex under different conditions. Those conditions may include things like size of deliverable, channel, where this work will live (facebook vs reddit), geo-location, whether the file is static or in motion, and more.
Toolkits aren’t meant to be exhaustive — instead, they’re guides for design, and a good toolkit balances constraint with freedom. If rules are too rigid and prescriptive, the design output may look cookie-cutter and lack variety. But if the toolkit is not prescriptive enough, the design output may be all over the place and lack cohesion.
The three fundamentals a toolkit includes are often:
- Logo usage: rules around colorway, clearspace
- Typography: fonts and their usage, rules on hierarchy, tracking and leading
- Color palette: definition of primary colors, secondary colors, and rules around ratio
Beyond that, a toolkit can expand to include a lot of different elements depending on the project, and type of work it’s built to support. Those could include: shapes and accents, texture, photography treatments, illustration, motion, layout examples, components, production-ready code, voice and tone guidelines, and more. Here’s an example of what a toolkit could look like:
At NerdWallet Brand Studio, we create toolkits at the very start of a project; it’s typically one of, if not the first thing, we present to our stakeholders for alignment. And it can sometimes feel like designing in the dark. Although we often have a creative brief as a strategic input to the toolkit development, that brief may not have perfectly complete specs, the full deliverables list, or all the channels where this work will live. And over the course of a project from brief to production to launch, there are always changes that pop up — like a shift in strategy, or new channel, deliverables, and even testing results — the toolkit needs to be able to flex to support.
Over time, our team has figured out the modular elements every toolkit needs to enable us to be nimble when things change, as well as lots of learnings on how to create successful toolkits for the various programs that we support. Here are examples of how we approach design toolkits in Brand Campaigns, CRM, YouTube, and Product.
Brand campaigns
Every January, our dedicated team of Content Nerds invests hundreds of hours of research to curate the Best-Of Awards list, with the year’s top credit cards, savings accounts, mortgages, and more. The Best-Of Awards campaign has become an integral part of our brand, showcasing our commitment to providing objective evaluations and helping consumers make smart financial decisions. In 2023, our creative strategy was all about celebrating the real Nerds behind the list — their nerdy expertise, and impressive credentials — in order to establish trust in NerdWallet’s objective evaluations of the year’s best in financial products.
While the core value proposition of the Best-Of Awards stays mostly consistent every year, we know our creative approach has to evolve to reflect changes in culture, consumer preferences and insights, and our brand. To achieve this delicate balance, we have developed a Year-Over-Year toolkit as our starting point. This toolkit serves as our template each year, with unchanging sacred design elements that define our program: the iconic NerdWallet greens, the Best-Of Awards Badge that acts as this campaign’s logo, the Gotham font family, geometric shapes, and lifestyle photography. These consistent elements build equity in our Best-Of Awards list and reinforce the trustworthiness of our brand. They also establish a strong connection with our evergreen brand marketing work, enhancing brand recognition when the assets are out in the wild.
Our Year-Over-Year toolkit also gives us the space to introduce new elements that sit alongside our sacred elements. We select accent colors to complement our brand greens and incorporate shapes that emphasize the Awards badge and key images. We also give ourselves the flexibility to introduce totally new elements, if they support the strategy. 2023’s strategy was all about celebrating the impressive credentials of our Nerds, so what better creative solution than to show the Nerds themselves? We introduced studio photography of a few of the many expert Content Nerds who contribute to creating the Best-Of Awards list, shot in-house at our San Francisco office. And because it was a celebration, we brought in neon accent colors and a set of variable bursts and star shapes to draw the eye to key messaging and create a sense of fresh, vibrant urgency perfect for advertising in the new year.
So when you look at the last five years of Best-Of Awards campaign toolkits, you can see both the unifying brand elements as well as the design elements that evolve every year. Not only does this approach give us a strategic framework for all our design decisions, it also helps us build equity in the Best-Of Awards program and address the evolving needs of our users and brand. By striking this balance, we continue to solidify our position as a trusted financial resource, while continuing to celebrate what makes us unique — the expertise of our Nerds.
CRM
We also use toolkits in our CRM Email Marketing program. Our CRM design toolkit is a shared library in Figma that organizes all the elements that allow us to design, realize, and develop email campaigns. This framework enables our team to use a unified design language to construct work more efficiently, allowing us to be more strategic partners, experiment and test, and continue to evolve how our brand shows up in emails and landing pages.
There are four main layers to how we’ve built our CRM toolkit: elements, modules, templates, and design. And when constructing the toolkit, we keep a few key design principles in mind: modularity, usability, and flexibility.
Like many design systems, we follow a modular approach — breaking down design elements into smaller, reusable components. This allows for flexibility and consistency when building various designs and layouts. We have 36+ master components, each serving a specific function and purpose, that can be reused to create new email templates and reordered easily, without starting from scratch each time — enabling unlimited email template combinations. Not only does this streamline our email production process, but it also allows our team to easily swap out modules and experiment with different combinations for A/B testing.
As we continue to learn from testing new strategies, tools, and technologies, we evolve our system to incorporate those learnings to keep our email designs fresh and engaging.
YouTube
Over the last few years, we have grown our YouTube channel to include hundreds of videos, all produced in-house, to help break down complex financial topics for our followers. When developing a new series, we also start by creating a design toolkit — defining the look & feel, typography, textures, and color palette. Our YouTube toolkits often use the same colors, fonts, and textures used across NerdWallet’s branding, such that someone who watches a YouTube video, then visits our website (or gets a NerdWallet email, or sees an ad on Instagram), can have a cohesive brand experience
Then, we layer on motion design, defining how these visuals move and flow across all of our videos. Our video toolkits — built on Adobe CCs MOGRT (motion graphic template) technology — allows us to make videos on just about any financial topic and have it look like a NerdWallet video. MOGRTS are a powerful way to create customized drag-and-drop motion templates. We think about them in layers: usually there’s the background, then accent shapes, text, or photo elements. We use our drag and drop motion templates like legos: small and big template pieces that can be remixed and reformed, with endless potential for creativity. In our primary YouTube toolkit, we’ve built 35 individual MOGRTS that incorporate one or multiple layers, which can be turned on or off depending on what they need for a specific design. We also have more out-of-the-box options where a video editor can easily drop in a MOGRT template, pick a color, add an image, update the text and call it a day. To read a deepdive on our MOGRT toolkit system, check out our article here.
While our YouTube toolkit creates consistency and unlocks creativity, where it really shines is efficiency and speed. NerdWallet’s MOGRT toolkit is significantly faster than custom animation, enabling us to integrate 2–3x more visuals across our videos in roughly the same amount of time. We’re currently producing close to 30 minutes of video content each week. About a third of our video production involves motion design, meaning we’re creating roughly 10 minutes of motion weekly. If you’re not familiar with animation timelines, that’s a lot of motion to create consistently. Did I mention we are a small team of 2–3 editors? Our YouTube toolkit enables our small video team to work quickly and efficiently, and gives us flexibility to pivot and adapt when projects or priorities change.
Brand in Product
Our last example of how we use toolkits at NerdWallet is to foster collaboration and brand consistency with our product teams, who are responsible for much of our website and app. Brand and product designers are very different skill sets, so the more we knowledge-share and work together on projects, the better the outcome.
We created a toolkit specifically for our product designers, including specific examples of how our brand can show up in our product, such as colors, data visualization, icons, and illustration usage. By including both general guidelines along with specific examples, this toolkit enables product designers to understand how they can infuse our brand into their unique use cases. We focus on user-friendliness and practicality in design, making sure we optimize for accessibility, reducing friction, and adding brand delight. We test our designs when we can, to ensure the addition of visual elements and branding is benefiting the user, rather than adding unnecessary clutter or distraction.
Continue refining and iterating
Remember that a strong brand is consistent throughout the user experience, whether through a TV commercial, marketing email, landing page, or product interaction. And while these are just some ways we’ve found success using toolkits at NerdWallet, a toolkit can be whatever you need it to be, depending on your project, team, and company.
Investing in systems and toolkits enables your entire team to work smarter, scale easier, and embrace change and the unknown. So take some time up front and figure out what works for you, and what doesn’t. And remember — one of the many great things about working in brand design is that brands are always evolving, so embracing change and finding new ways to continuously evolve systems and toolkits is just as important as establishing the initial toolkit itself. Happy toolkitting!
This article is a summary of our panel at SFDW 2023. Below are our panel members:
Emily Hsiao is Brand Design Director on the Brand Studio Team, leading brand designers on campaigns, sponsorships, CRM, performance marketing, employee engagement and more to create a cohesive and delightful brand experience across user touchpoints.
Chloe Dalby is an Art Director and Lead Motion Designer on NerdWallet’s Brand Studio team, specializing in integrated campaigns, film and animation.
Natalie Garnett is a Senior Visual Designer on the Brand Studio team who works across a variety of experiences, including integrated brand campaigns, performance marketing, and illustration systems.
Charlene Tsang is a Brand Design Manager specializing in brand campaigns, CRM, website design, design systems and UI/UX. Her expertise lies in implementing branding strategies into products to drive effective data-driven design decisions.
Felicia Shivakumar is a Senior Brand Producer at NerdWallet, specializing in design systems and production efficiencies that enable us to produce cohesive video programming for YouTube at scale.
