FIRST REPUBLIC BANK
Design to Scale
Messaging System
Establishing consistency and a source of truth in a product is a nice to have. Giving product the ability to pivot and scale is vital. That's why I took the initiative to craft, maintain and document a design system.
My Role
Working closely with PM’s, engineers and a co-designer, I was responsible for auditing, building and documenting components across iPhone, Android, and iPad.
The Problem
When I was onboarded, the app was inconsistent and undocumented. Simple visual changes added months to development, resulting in a release cycle every six months.
Technical and design debt aside, we also found that users were having issues navigating due to inconsistency and or having a visual disability.
So I took an initiative to work with developers to craft a consistent, scalable design system that took into account ADA compliance.
Simple visual changes added months of development ... users were having issues due to inconsistency.
Simple visual changes added months of development ... users were having issues due to inconsistency.
Simple visual changes added months of development ... users were having issues due to inconsistency.
(Using Zeplin and Abstract, I unified a design system and created a source of truth for the team.)
Restrictions
The roadmap was set until the end of 2019, and a complete audit of the entire mobile application would be costly. The product team, unaware of the debt and their lack of insight, would surly de-prioritize any such an effort. That meant we had to fly under the radar and attach our system to existing milestones each quarter.
Team Work
Setting up weekly meetings with developers and pms, I strategized and prioritized sweeping component and styling changes. The result of an improvement in implementation and collaboration was almost immediate. Devs now had a voice, and our team was finally running together.
Production speed increased 58% . . . Better yet, users had far fewer friction points when trying to complete tasks.
Production speed increased 58% . . . Better yet, users had far fewer friction points when trying to complete tasks.
Production speed increased 58% . . . Better yet, users had far fewer friction points when trying to complete tasks.
Production speed increased 58% . . . Better yet, users had far fewer friction points when trying to complete tasks.
Change
Weighing impact and cost, I audited to find the most commonly used patterns across the application. Buttons and inputs offered us the biggest impact with the smallest price tag.
After crafting components and stargazing with developers, we set our sights on color. More especially grayscale and ADA compliance.
Impact
The impact was immediate, and the Product Team was ecstatic. Production speed increased 58% , and team morale and collaboration was at an all-time high.
Better yet, users had far fewer friction points when trying to complete tasks. However, the biggest emotional win came from our ADA efforts. One day a banker wrote in to share how we changed a users life:
“ . . . for the first time in her life our client had access to a bank that was accessible to the visually impaired. With other banks, she couldn’t get past the log-in page. She said it was a life-changing experience.”
— Kristina Malimon, Digital Banking Associate
“ . . . for the first time in her life our client had access to a bank that was accessible to the visually impaired. With other banks, she couldn’t get past the log-in page. She said it was a life-changing experience.”
— Kristina Malimon, Digital Banking Associate
“ . . . for the first time in her life our client had access to a bank that was accessible to the visually impaired. With other banks, she couldn’t get past the log-in page. She said it was a life-changing experience.”
— Kristina Malimon, Digital Banking Associate
“ . . . for the first time in her life our client had access to a bank that was accessible to the visually impaired. With other banks, she couldn’t get past the log-in page. She said it was a life-changing experience.”
— Kristina Malimon, Digital Banking Associate
Other Case Studies
First Republic - Design to ScaleFirst Republic Bank
Messaging SystemFirst Republic Bank
Extending DiscoveryStubHub