Creating Netspend's Design System

The approach I used to make a reusable, scalable and consistent design system

When I started at Netspend (a financial company that provides prepaid debit and banking services to millions of customers), there wasn’t a system in place for designing digital products. We had a style guide which helped us make sure that we were using the correct font and brand colors, but other than that, there wasn't much. Because of that, it was easy to spot problems with consistency within the user experience. Through internal evaluation and user research it was clear that we needed to invest in a design system to give our products a unified language.

Challenges to solve

Ensure the use of a consistent user interface
Facilitate reusability
Streamline the effort involved in updating and maintaining assets

My role

Refine current patterns and identify any gaps or redundant patterns
Lead the design team in conceptualizing and defining content
Collaborate with developers to answer their questions and document their needs
Present work to team members and other stakeholders

Challenges to solve

Ensure the use of a consistent user interface
Facilitate reusability
Streamline the effort involved in updating and maintaining assets

My role

Refine current patterns and identify any gaps or redundant patterns
Lead the design team in conceptualizing and defining content
Collaborate with developers to answer their questions and document their needs
Present work to team members and other stakeholders

Taking inventory

To begin, I decided to take inventory of all the different styles, components and patterns we were using throughout our existing products. Once I felt I had captured everything, I grouped them into categories and put them in Figma to make it easy to start comparing everything, side-by-side. It revealed dozens of button styles, incorrectly applied font weights, no logic to any of the spacing, and the list went on. Needless to say, it wasn’t pretty and confirmed our need for a design system as soon as possible.

Structure and organization

From there, we as a team, started evaluating existing design systems. We had an idea of what we wanted, but researching how others structured and organized theirs really helped us understand all the key pieces we wanted to include in ours. It was very important to me that our system was not just a big collection of our user interface elements—I also wanted it to serve as a way to communicate why we decided on the choices we made, the guidelines to adhere to when applying these components in real life situations and how all of the patterns work together.

As far as structuring our system, we based a lot of the ground work from Atomic Design and decided to use a similar five stage approach. However, we did end up relabeling the stages (inspired by GE’s design system) to make them a little more easy to understand (chemistry was never my strong suit). Here’s where we landed:

Foundation

The foundational level of the design system that designers should reference and respect when creating new design patterns

Basics

Design patterns that fall on the simple side of the spectrum

Components

Design patterns that fall on the moderately complex side of the spectrum

Layouts

The layout and structure of a section or page

Features

Flows/systems that, when working together, allow users to accomplish a task or solve a problem

Documentation

The documentation was crucial for ensuring that everyone in the organization had a place to go to learn more about every piece of the design system. My goal was to include detailed explanations, guidelines, and best practices for each pattern—and to also provide examples and interactive demos whenever possible to demonstrate how components should be used.

Here are some other key factors that I focused on while documenting our design system:

Guiding principles and philosophies that inform the design decisions within the system. These principles help maintain consistency and align the design system with the organization's goals and values.
Design tokens used in the system, such as color values, font sizes, spacing units, and other variables that define the visual style. This helps maintain consistency across different platforms and ensures that designers and developers use the same values throughout the system.
Guidelines for interaction design, including transitions, animations, micro-interactions, and other motion-related behaviors—with prototypes to help show how these small additions create engaging and consistent user experiences.
Accessibility guidelines and best practices for designing accessible interfaces, including requirements for color contrast, keyboard accessibility, screen reader compatibility, and other accessibility considerations.

For most components, I also created prototypes in Figma to better demonstrate ideas and explain the complex interactions in a more intuitive way. This especially helped the developers understand how everything should function when they began to work on implementing any updated designs.

Sticker sheet

While working on documenting all of our patterns, I knew that creating a sticker sheet was also going to be a must-have for this project. It was extremely important to me for the following reasons:

Efficiency: Every designer at Netspend would be able to quickly access frequently used design elements without recreating them from scratch, thereby speeding up the design process.
Consistency: By utilizing predefined "stickers", designers ensure visual consistency across different screens or components within a project.
Collaboration: Sticker sheets can be shared among team members, allowing everyone to work with the same set of design elements, promoting collaboration and maintaining design integrity.
Iteration: I set up a branching process in Figma so that the sticker sheet could be easily reviewed, updated and modified, making it easier to iterate and refine designs.

Overall, the sticker sheet provides a practical and streamlined approach to design by offering a centralized collection of commonly used patterns that can be easily accessed and utilized during the design process.

Sticker sheet

While working on documenting all of our patterns, I knew that creating a sticker sheet was also going to be a must-have for this project. It was extremely important to me for the following reasons:

Efficiency: Every designer at Netspend would be able to quickly access frequently used design elements without recreating them from scratch, thereby speeding up the design process.
Consistency: By utilizing predefined "stickers", designers ensure visual consistency across different screens within a project.
Collaboration: One single library shared among all team members, allowing everyone to work with the same set of design elements, promoting collaboration and maintaining design integrity.
Iteration: I set up a branching process in Figma so that the sticker sheet could be easily reviewed, updated and modified, making it easier to iterate and refine designs.

Overall, our sticker sheet provides a streamlined approach to design by offering a centralized collection of commonly used patterns that can be easily accessed and utilized during the design process.

Results

We’ve found that there are many advantages of using a design system, here are some of them:

A single source of truth for design. With all that we use to communicate (email, Slack, Jira, etc.) it’s nice to have a place to go and be 100% sure about what an element should look and behave like.
Everything is on brand. Especially important when working with a white label product, like we do.
Consistent designs and layouts. No more “what color should this button be” or “how much spacing should this have.”
Reusable patterns means faster design and implementation (not to mention a lot cleaner code).
Easier for product managers to take stock in all the components we currently have and scope out anything we need.
Empowered the team to test more, iterate, and focus on the user experience.