Fifth Third: Redesign Zelle in Design System

Zelle Dashboard

Introduction

As a part of updating our consumer app, I lead the effort to update the experience of our third-party ‘Send Money’ vendor, Zelle. Zelle is a company aimed at allowing banks to communicate with each other directly and immediately providing users with their funds in their bank account within minutes, prior to apps such as Venmo and PayPal, Zelle was the only major way to digitally send money between people. Over the years Zelle has created their own app and very specific branding that requires approval prior to implementation. This approval process was heavily waterfall and involved a submission document including 160+ screens in their submission document as well as receiving special approval for any design changes away from their suggestions. Additionally, we already have Zelle in the current app, so updating the usability of it also required following the changes the bank has made in the past to the application for a multitude of different reasons.

Requirements and Data Gathering

There were three key inputs that drove the updated design for Zelle, particularly with the dashboard; Zelle’s requirements, current state Zelle in our Mobile App, and our Design System. Balancing these was a challenge as there were distinct differences between the design system and the requirements for Zelle, most notably on the dashboard. The other critical portion of this project was to address the major usability issues that were a part of the Zelle design system, for the dashboard this meant doing away with the oversize buttons taking up 30-50% of the entire screen.

Wire-framing and Proof of Concept

As I approached this design, my primary concern was to eliminate the oversized buttons and make purposeful use of the dashboard space. This meant taking the inputs that the user would need for Zelle as well as the way we were approaching our overall Move Money portion of our application. Additionally, considerations for applications such as Venmo and PayPal were also taken into account because of the crossover in users who have multiple apps used to move money.

Implementation

The final result of the dashboard was a culmination of all these inputs as well as data taken from user testing. This dashboard not only presented the user with similar information as the Move Money dashboard, but also important information that the user can see at a high level. Additionally this dashboard not only used the elements of our design system, but also prevented the competing IA of the bottom navigation.

Recurring Payments

Introduction

Another part of redesigning Zelle was the send flow, where the user sent or requested money from another person. As a part of this flow they also needed to establish the frequency, send date and when it should cancel. This was another flow that differed slightly from the Zelle proposal due to our design system, but also implemented

Wire-framing and Proof of Concept

After exploring different uses both within and outside the design system, I tried to come up with divergent ways of thinking about something beyond just a simple form field. In the current Zelle app, sending the user into a new screen for each action felt too constrained and disjointed, yet it did make sense for advanced interactions used less often such as frequency and ‘end after’.

Implementation

By combining these elements I was able to create an interface that still utilizes the elements of the design system while also matching the requirements from the Zelle UX guidelines.