First Republic Bank
Across several First Republic Bank initiatives, I designed landing pages, digital campaigns, animated advertisements, and brand-system experiences while working with the agency team at Media Well Done.
RESPONSIBILITIES
Digital, Web, Motion Graphics, UI/UX Design
Tools
Figma, Photoshop, After Effects, Premiere Pro
Summary
The work required translating a premium, service-focused financial brand into consistent and accessible digital experiences across web, social, display, and print.
Brand Guidelines Website
When First Republic decided to revamp their brand, the team and I at MWD were tasked with handling all development for the website, which housed all of the brand guidelines and assets. We also supported numerous other aspects such as color testing for print, user interface for reviewing illustrations and preparation of final assets for logos, icons and illustrations.
It’s pretty awesome to also mention that the project went on to win several awards, including a prestigious awwwards.com honor that recognizes the best developers, designers and web agencies in the world.
Social Ads
Some of my tasks working with First Republic also included working on animated social media ads.
Below is an example of a social ad that I worked on in honor of Juneteeth. I was responsible for storyboarding in Figma then animating in After Effects.
Bellevue Campaign
Landing Page
I collaborated on a campaign for a new First Republic branch that was opening in Bellevue, WA.
I took the lead in designing a landing page along with developing a range of marketing materials in both print and digital formats.
Print Production
Animated Display Ads
Design System
The First Republic Bank Design System is a comprehensive toolkit designed to ensure consistency, efficiency, and excellence across all digital and physical touchpoints. Rooted in First Republic’s values of exceptional service and attention to detail, the design system empowers teams to create cohesive experiences that reflect the bank’s trusted brand.
Unified Visual Identity
Comprehensive branding guidelines—including typography, color schemes, iconography, and imagery—establish a polished and professional look and feel across all channels.
Centralized Component Library
The shared library of components were created and managed in Figma, ensuring that everyone had access to the latest, approved versions of buttons, forms, and layouts. Figma’s inspect feature also enabled developers to easily extract specifications, CSS code, and assets, reducing the back-and-forth between teams.
Accessibility First
Every element adheres to the highest accessibility standards, promoting inclusivity for all users.
Typography
Buttons
Colors
Iconography
