Behavioral Concept Component Library
Making behavioral science practical, usable, and embedded in every design decision.
Role: Experience Design Intern
​
Project Type: Team Work
​
Tools/Skills: Figma, Design Systems, and Component Design
Introduction
During my internship with the Behavioral Science team at U.S. Bank, I was tasked with building a Figma component library that translated behavioral science principles into usable, compliant design assets.
Prototype Overview
.png)
Problem
U.S. Bank's behavioral science team had built a strong foundation of knowledge.
However, it wasn't reaching designers where they worked. Behavioral principles were documented, but disconnected from the actual design process, living in separate tools that designers rarely consulted mid-workflow. ​
Research & Discovery
To understand the problem space, I conducted interviews with designers on the team, asking about their current workflow, pain points with existing documentation, and how they typically applied behavioral science in practice.
I then used affinity mapping to synthesize the findings into four key insights that would drive our design directions.
KEY INSIGHTS
RECALL
​​
Designers struggled to surface principles at the moment of design
DESIGN DIRECTIONS
DISCOVERABILITY
​
Make concepts findable mid-workflow without interruption
ACCESS
​​
Concepts were scattered across ZeroHeight and docs
CLARITY
​
Streamlined structure, reduced navigation friction
INTEGRATION​​
​
Designers wanted lightweight Figma tools, not separate docs
FLEXIBILITY
​
Embedded, lightweight components that live inside Figma
CONFIDENCE
​
Many lacked confidence applying principles correctly
GUIDANCE
​
Contextual tooltips and rationale built into every component
Ideation & Brainstorming
During our team ideation session, we used FigJam to generate and cluster ideas.
.png)
HOW MIGHT WE
"How might we help designers easily recall and apply behavioral science principles by creating a centralized, standardized toolkit that bridges the gap between behavioral knowledge and everyday design execution?"
Design Process
Early Exploration: Dark Blue Components
In my first iteration, I designed the dark blue component set, which emerged from a team ideation session and reflected initial ideas for embedding behavioral concepts.
.png)
DESIGNER FEEDBACK - USABILITY TESTING
​​
"It blends in too well with the template — it wouldn't stand out during a critique session. It just disappears into the design."
Blended into dark template backgrounds
Reduced legibility in critiques
Accessibility concerns
Iteration: Light Blue Components
Testing revealed that the dark blue drew too much visual attention and blended into existing template backgrounds — making components invisible exactly when designers needed them most.
I transitioned to a lighter blue variant with a white border and drop shadow. ​
.png)
DESIGNER FEEDBACK - USABILITY TESTING
​​​
"I'd actually use this. It doesn't interrupt my flow — it just sits there when I need it."
Clearly visible during critiques
Higher contrast
Less intrusive
Final Component Library
Categorization
​​
I organized components by common design problems rather than by concept name,
making them searchable the way designers actually think.
.png)
Anatomy
Each variant was tailored for different levels of detail and usage scenarios.
Annotation Variant 

One-line reference with link to
main page; ideal for quick tags in critiques.
Primary Variant 

Full definition, context, and rationale; includes links for deeper exploration.
.png)
Secondary Variant 

Short summary for fast recall;
often used in presentations.
Instruction Card
The card acts as a built-in onboarding tool inside Figma. So, designers can get started without ever leaving their workflow or consulting external documentation.
What I Delivered
Before closing this project, I delivered a foundation that is both usable today and scalable for the future,
moving behavioral science from scattered documentation into a living design system.
.png)
The Impact
BEFORE
​​​
Applying behavioral science meant stepping outside the design process entirely, hunting through ZeroHeight, cross-referencing docs, hoping you remembered the right principle at the right moment. Concepts felt theoretical and hard to act on mid-project.
​
No centralized toolkit. No in-context guidance.
AFTER
​​​
Designers have 28 ready-to-use components organized by the problems they actually encounter with built-in guidance.My manager noted the library created a foundation the team hadn't had before.
​
✦ Behavioral science as a design tool, not a theory
Reflections
Early on, I realized that simply creating components wasn't enough. The real challenge was making behavioral science feel like a natural part of the design process, not an extra step designers had to remember to take.
​
This project sharpened how I think about design systems work: the hardest part isn't building the components.
It's understanding the workflow deeply enough that the solution disappears into it.
​
Small decisions, such as color choice, tooltip placement, and categoriztion, turned out to be the difference between something designers adopted and something they ignored.