First Republic Bank

First Republic is a private bank tailored to high net worth individuals.

First Republic Bank’s online banking

First Republic Bank’s online banking

I worked within a small team of designers to update the online banking web and mobile applications. Shortly after I joined First Republic there was a large platform migration for the banking applications. The bank was transitioning to a new vendor with more customization possibilities. We began looking at new designs for web and mobile applications through a series of sessions with stake holders. We iterated on the ideas through testing prototypes with clients.

I was focused on authentication and enrollment. I was also responsible for building low-fidelity prototypes of the application as a whole. These prototypes were for discussions with the larger team, testing with users, and a reference for developers. Once we had our initial designs completed I began creating a set of Sketch libraries for the team to use.

After the initial launch I was responsible for working with our vendors on updates to the mobile application. I was also working with a team tasked with creating an online bank account opening feature.


Enrollment and Authentication

Prototype screen for client enrollment

Prototype screen for client enrollment

Business goal: reduce need for bankers to enroll clients into online banking.

Enrolling into online banking at First Republic required a lot of information. This includes personal identification, contact information, and addresses.

In the redesign I audited the fields that were in the original and worked with other teams that knew why each piece of data was collected. Based on the agreed upon approach going forward we were able to remove a lot of fields. We knew that a lot of data was already collected from a client in person and opted to remove fields if it did not help identify them. After many discussions about how enrollment will actually work I designed a change to the 2-factor authentication flow that we were using. This change was to visually clean up the form and to make it clearer to the user what was sent and what they could do.

After the new enrollment form went live bankers were much more confident in allowing clients to self-enroll. Of the 20,000 new client enrollments we received 1 complaint - that the tone of our form did not include the word “please.”


Account Opening

Business goal: Allow existing clients to request new accounts online. Future goal: Allow prospects to request an account at First Republic.

Requesting to open an account online is something very new to First Republic. This project was led with very ambitious goals, the main being that users should take less than 5 minutes to submit a new account request online. New accounts require a lot of information by the bank. Through user testing we were able to help a core banking team improve data collection by revising their form. This has helped with our completion time but there is a lot of room for improvements.

 
Account opening product selection

Account opening product selection

Certificate of Deposit (CD) selection

A Certificate of Deposit account is popular among our clients. This account type requires more information than our checking and savings accounts, we wanted to make this selection easy for clients and provide them with enough information to understand what is required of them.

We knew that we had 2 minimum opening balances and a varying amount of special rate/term combinations — 3 at most. We were able to get information about our clients — initial deposits of $10,000, $25,000, and $100,000 made up a vast majority of our CD accounts.

We looked at how competitors did similar flows and how other apps handled similar things. I sketched out an idea of highlighting the top 3 rates and up to the top 3 specials with a way to fall back to standard rates in it.

 
Some of the initial notes and quick ideas that were discarded

Some of the initial notes and quick ideas that were discarded

First quick sketch at the idea that was implemented

First quick sketch at the idea that was implemented

This design was fleshed out in Sketch and went through a few small changes. This was tested in a flow of the application opening with individuals that have used CD accounts at some point. The comments were overall positive — potential users liked the simplicity and layout, internal stakeholders liked that the special rates were promoted. The feedback we received that would later be added is detailed information about penalties.

 
The Certificate of Deposit selection in our account request flow

The Certificate of Deposit selection in our account request flow

Responsive design of CD selector


Mobile Application Updates

My goal: Work closely with agency responsible for our mobile application to ensure an easy and consistent experience across platforms for clients.

The mobile application ideation started from our internal team of designers. This became a joint design project with our vendor’s team. I was responsible with working with external designers to create new and update existing features. Some of the features were transfers, Zelle integration and card management.

We have been able to bring iterations of visual design into the mobile platform while maintaining most interaction patterns.

 
Zelle menu integration

Zelle menu integration

Transfer visual updates

Transfer visual updates

Card controls concept

Card controls concept

Debit card management

Business goal: Allow clients to see details and manage their debit cards.

The project was two major parts. The first was to use an existing application from Visa. My responsibility for that portion was to provide a place for the link to it within the app, an app icon, and some branding guidance for Visa. The second part was to have our mobile app vendor build card control features into the app using Visa’s APIs. I worked closely with two designers from our mobile development vendor for the second part.

Initially we were given a very short window to complete the full design for alerts, limit controls, locking cards, and activating new cards. We began with the information architecture of the features being designed with consideration for upcoming features. We put together what we thought was a reasonable IA and had an online card sort to get feedback and make sure we placed things in the right place.

 
An early flow with some information architecture

An early flow with some information architecture

Since we had a very short window for design (and development didn’t have much time) we decided to reuse as many components as possible from the existing mobile system. We focused on individuals with one card as a primary user and made sure to account for our extreme cases (two of our clients have more than 15 cards). I setup a few user testing sessions to validate that people understood the flow of reaching different functions and what each function did. The resulting design was understandable by people but was not favorable with the stakeholders, so we were given more time.

 

Pattern Library & trying to establish a design system

My goal: Reduce the need to continue remaking or copy/paste components within our design team.

As we iterated through different features we refined components and reused them. We were constantly having file conflicts and re-making elements. During some of my down time I decided to build out a Sketch pattern library that our designers could pull from. This started to help in rapid prototyping and will continue to grow.

 
The first attempt was a single component file - this had many issues in terms of findability and maintenance

The first attempt was a single component file - this had many issues in terms of findability and maintenance

Another attempt that used reference files to link everything together

Another attempt that used reference files to link everything together