US Bancorp
Design system architecture, themed wireframes, user flow mapping, and prototyping across multiple products at US Bancorp. The work centered on building a design system in Figma using collections for multi-brand theming, then applying it across 500+ frames and approximately 10 project files. Flow mapping and prototyping kept the broader team aligned on error handling, onboarding, and feature implementation.
Brand Style Map Configuration: I set up the token layer here so a brand swap happens in one place: heading colors, logo color maps, header settings, and interactive states, one map per brand.
Color System Architecture: I documented the color system: neutral grays, support and status colors, and the interactive button states. Each brand carries its own palette with lightened, standard, and darkened variants.
Multi-Brand Logo Assets: I pulled the logo treatments into one library instead of leaving them spread across project files, organized by brand and by where each one gets used.
Notification Components: Four notification types (Info, Success, Error, Warning) I built on one structure: status icon, message, close button. I kept a margin-spaced variant for tighter layouts.
Footer Components: Four footer variations I built from the same parts: disclosures, navigation links, security indicators, copyright. What changes between them is spacing and which elements are conditional.
Typography Hierarchy: The type scale I built out, 72 variants in a 3x2 grid, covering the contexts and brand applications the products needed.
Link Card Components: Link Card variations I worked through: different text lengths, optional metric badges, date stamps, and superscript annotations, so the component holds up against real content.
Global Header: The header system I built across brands, with the navigation structures, responsive mobile states, and a breakdown of the Upper and Lower Header sections.
Dynamic Brand Theming in Action: Switching brand in Figma's collections dropdown rethemes the wireframes between Acme, Fidelity, and Elan. Colors, logos, and brand styling update while the structure stays put. That swap is what the collections setup was for.
Themed Wireframe Detail: A closer look at one branded wireframe: component structure, spacing, type hierarchy, and where the tokens I set up land in the interface.
Full Figma Collection: The whole collection, 4 major projects and 500+ frames across roughly 10 project files, all pulling from the same design system.
Conceptual Design Exploration: Sketches I did before going digital, working out header and navigation concepts on paper first.
From Concept to Production: The refined header and navigation I built from those sketches, next to a screenshot from the US Bank online mobile banking page showing where the concepts ended up in production.
Error Handling Flow: How I mapped user-facing error responses for client-side (4xx) and server-side (5xx) failures. Decisions are color coded, red for errors, green for success, yellow for warnings, with UI examples for the message and the way out.
Design System Planning Flow: Step-by-step diagrams for integrating the system and building components. The calendar and grid components cover the flexible cases, and the style mapping keeps things consistent across the longer flows.
Workflow Mapping: I mapped the 'New to Digital' setup alongside the onboarding flows, including intermediate actions like Autopay and extras like adding authorized users, with the error and failure paths called out.
Detailed User Flows: Scenario-based flows I documented for handoff: default paths, input errors, maximum user capacity, and deletion, annotated with navigation paths so developers were not guessing.