First Republic Bank

First Republic is a private bank tailored to high net worth individuals and is known for its white-glove service.

I worked within a small team of three designers to update the online banking applications. Within my first year at First Republic, a new vendor was selected for online banking. We began looking at new designs for the applications through sessions with stakeholders.

I was responsible for the design of the dashboard, my First Republic Team, accounts, and personal financial management. Post-launch, I worked with our vendors on iterative updates and corporate banking.

Case Study 1: Consumer Banking/Dashboard

The Challenge

The interface was outdated and the workflows needed to be simplified. The site hadn’t seen any huge improvements in years and the platform it was built on could no longer support feature updates. Clients constantly complained that the site looked dated, was slow, and lacked key features.

My Role 

• Executed end-to-end design through successful client migration.

• Led the UX for the client dashboard, account details/transactions and my First Republic team

• Researched and wrote user tests to compare different ideas.

• Designed initial concept ideation and iterations

• Created high-fidelity wireframes, and built out the components and content documentation.

• Partnered with our vendor to improve the experience of their existing personal financial management tool.

Process

For the first version of the dashboard, we began with a requirement-gathering and ideation approach. I worked on the initial concept ideation through prototyping. We created user tests to compare different ideas. After a few rounds of refinement, we documented everything for development.

With First Republic Bank looking to bring “high touch” service online, I worked with both C-level stakeholders and our product team to stop thinking about our immediate competitors and focus on our current and potential clients.

We gathered what we knew, and researched other high-touch brands and their clients to learn and understand how we could differentiate First Republic’s digital experience from the masses.

The size and scope of the project combined with our tiny design team of three created an obstacle. We had limited resources and a tight timeline. With this in mind, we brought on a vendor to help bridge the resource gap. They helped support the data flowing in and assisted with the research. Together, we collaborated to create meaningful solutions.

Discovery

In order to identify opportunity gaps between user needs and stakeholder wants; we conducted friendship groups. This allowed First Republic’s clients and their friends to candidly speak about their experiences and feelings related to finance.

We conducted user interviews with bankers and clients to get qualitative information about their backgrounds, occupation, use of technology, and how their financial goals, motivations, and pain points.

This helped us to identify six distinct personas:

• Mark: The Self-Driven Millennial

• William: The Dependent Legacy Wealth

• Ann: The Entrepreneurial Mother

• Patrice: The Philanthropic Giver,

• Daniel: The Developing Wealth Builder

• Rick: The Reputable Businessman

Many clients expressed concern about the difficulty they faced when looking for account routing numbers, bank statements, and other small items on the site. We held card-sorting sessions to help evaluate the information architecture. In each session, participants organized topics into categories that made sense to them and created labels for each group. This helped to inform the information architecture.

Based on what we learned from the friendship groups, interviews, and baseline usability studies; several pain points surfaced. These themes mapped back to existing problems with the site and served as a guiding principle to evaluate future banking experiences. It became essential to align with our stakeholders, prioritize features and build roadmaps that support solving the pain points. First Republic’s previous dashboard suffered from experience rot with numerous unnecessary features. We learned, from engaging with our clients, what they deemed important. Our goal for the redesign was to create an experience that supports and allows the client to take control while bringing delight by surfacing meaningful information.

Using the guiding principles, we brainstormed, created initial concepts and prototypes, and validated them through user testing. After several rounds of iterations, we tested the concepts at several formal usability studies with clients. I socialized what we learned with our stakeholders and made further changes to the designs before documenting them in Zeplin.

Accounts

We highlighted what was most important to them — their money. The team saw the importance of giving clients a quick way to see their balances, recent transactions and the routing/account number.

Money Movement

Many of our clients were used to paying bills & making transfers through their banker. With the addition of a younger client subset in the mix, three principles were defined. First: make it simple to use. Second: it needed to be mobile-friendly. Third: it needed to be contextual to the client’s accounts. We surfaced contextual actions near the account balances. Clients can now see the principal balance of their mortgage, make a mortgage and/or a principal only payment.

My Team

The client-banker relationship is very unique to First Republic. Bankers are more of an extension of the client’s family. They know their clients and offer support throughout their lifecycles. We needed to bring high-touch service to the digital experience. We created a concierge of sorts connecting clients with their bankers and/or wealth manager. Clients felt supported by seeing their banker’s photo and information on the dashboard and could reach out for help or ask their banker to take care of it for them.

Participants responded positively to the redesigned banking experience across desktop and mobile and gave higher ratings to the redesigned version (compared to the current experience).

• For the current online banking experience, participants gave the following average ratings for desktop and mobile (Likert-like scale: where 1 is the worst and 10 is the best):

  • Average current desktop rating: 6.46

  • Average current mobile rating: 6.58

• For the redesigned online banking experience, participants gave the following average ratings below for desktop and mobile (where 1 is the worst and 10 is the best):

  • Average redesigned desktop rating: 8.33

  • Average redesigned mobile rating: 8.42

Results

We produced a new online banking site/mobile app with a holistic dashboard surfacing account information, a concierge with the clients point of contact at the bank and bill payment/transfer functionality. Over a course of 6 months we successfully migrated 180,000 clients to the new platform.

In the last 12 months, First Republic has seen an increase in client adoption rates:

• 25% for active digital banking users

• 34% increase in active mobile users

Case Study 2: Consumer Mobile Banking/Contact Team

The Challenge

With the constant addition of new features to the app, it became increasingly difficult for users to find their banker’s contact information.

My Role

• Led the research and ideation sessions

• Designed initial concept ideation through high-fidelity wireframes prototyping

• Created prototypes and wrote user tests to validate our designs

• I worked closely with our junior designer and our mobile application vendor on the end-to-end design through the launch

Process

First Republic’s clients are used to high-touch service in the office. They rely on their relationship managers for daily money movement transactions and assistance with financial-related life decisions. The product needed a way to call out and highlight the client’s banker, and office information and offer more ways for clients to get in touch.

I researched other high-touch brands to understand how they interact with clients virtually and then interviewed users. We sent out surveys to our bankers and clients to learn what features were most important to them. I partnered with another designer and product manager to brainstorm and sketch and oversaw the junior designer’s work.

Discovery

The app housed the client’s banking team and bank office information in the more menu. Because so many less important items were being added to the menu, the placement of the contact information was lost. We explored a lot of potential solutions taking into consideration the navigation and different functions in the app. It was important to call attention to the contact information with the placement but not interfere with the user’s daily tasks. We heard from both bankers and clients wanting the contact information to be accessible from the dashboard. We learned many clients were unaware of the services our bankers offered and tended to visit their banker’s office when they wanted personalized service. Younger clients expressed a need for the same level of service on their mobile devices. They wanted a more modern way to quickly contact their banker - the ability to call, text, or have a video call through the security of the app.

Results

We developed a floating action button on the dashboard when tapped revealed the client’s banking team supporting the personalized service clients are used to and general support to provide guidance. Clients can now choose their communication method – call, text, email, and video chat.