First Republic
Bank

A design system that keeps products consistent, speeds up development, and scales easily across teams.

Creating a design system for First Republic Bank
First Republic Bank needed a way to make all its digital products consistent in design and function. I led the design and development of the design system, working with other teams to make sure it could be applied across all their products.
The challenge

The bank's digital products had inconsistent designs, leading to a poor user experience and slowing down development. I was tasked with creating a design system to make the process faster and more consistent across teams.

The solution

I developed a design system with reusable components, standardized patterns, and clear documentation. It was built to scale so teams could easily adopt it across different products. We tested the system, gathered feedback, and continuously improved it to keep it flexible and easy to use.

Applying the design system to different products across the bank’s platforms.

Business Banking Platform
The Business Banking Platform is where clients log in to manage their banking needs. It allows users to check balances, make payments, transfer funds, send wire transfers, and generate reports, essentially everything needed to manage their finances online.
Iconography
The design system includes custom icons that help users quickly understand information specific to First Republic Bank. These icons were designed to match the bank's serif font, making sure they blend seamlessly with the brand's visual style. By using these icons, we can communicate actions and messages clearly, without needing long explanations.
Typography
Dalton Maag, a typeface design studio, created a new typeface for First Republic Bank after our original font became blurry at small sizes. This typeface stays readable even when scaled down, aligns with the brand’s identity, and adds personality to set the bank’s products apart in the market. It was implemented across all its digital products.
Documentation
When we create a component, we also write detailed documentation for developers and designers. This includes different variations of the component, its structure, interaction rules, how it adapts to various screen sizes, and spacing. We also provide case examples, content and accessibility guidelines. Tokens, like color and text styles, are documented separately.
Role
  • Senior Product Designer
Team
  • Senior Product Designer
    Rashad Talibli
  • Head of Design & User Experience
    Alastair Halliday
  • Design Directors
    Nima H.K.,
    Rachael Blumenfeld
  • Design Operations
    Dean Giammarco

Next Project

Knak

0