How might we…

… create a Zelle home page that considers user research and follows industry standards while complying with Early Warning Services (EWS) regulations?

Research and Constraints

When building a new Zelle home page, I wanted to start by understanding the requirements of Zelle’s owner, Early Warning Services (EWS). Those considerations are as follows:

• Send, Request, and Split buttons must be accessible from the main page.

• Send, Request, and Split buttons must be the focal point of the design.

• Send, Request, and Split buttons must be represented equally.

• Settings must be accessible from the main page.

• The page must be titled: “Send Money With Zelle.”

After exploring the constraints and requirements set by EWS, I decided to research how other banks designed their Zelle home page. Most of PNC’s competitors showed a preview of the user’s activity. While collecting information on how other banks design their page, I also asked the users about their experiences with competitors’ interfaces. The majority of those I polled said they most enjoyed having the preview of their activity because they weren’t always going to Zelle to make a payment but to check the status of previous transactions.

With the above constraints and research findings, I made the following design decisions and created the icons and layouts below.

1. Users don’t always use Zelle to send or request money, so it should no longer take up the majority of the screen.

2. Users want to see their previous activity.

3. Users want to see a list of recipients they saved or previously interacted with.

4. Users want to be able to search for specific transactions or recipients.

Interaction Design

My main goal at the start of my internship was to learn about animations and interaction design. To learn this, I was tasked with designing a new loading animation to show users that Zelle was in the process of sending their payment.

My first design showed circles moving around the user’s profile image. After researching, I discovered that rotating animations give users anxiety because they believe the action they took is not working.

Because of this, I decided to re-design my animation to represent the action of sending money more accurately. This resulted in the following animation with a series of circles around the user’s profile that changed opacity. The changing opacity creates an outward motion meant to replicate sending money to someone else. My design was implemented, and the following video is screen-recorded from the PNC mobile app.

Final Design

My design's final version is live in the PNC mobile app. It includes my design decisions such as smaller buttons, and showing a preview of a user’s previous activity.

Additional Projects

At PNC, I also worked on two group projects still considered confidential. The first project involved implementing a loan and mortgage dashboard and payment flow into the mobile application. I worked with one other design intern and a product management intern. We selected this project based on research reports that said users were disappointed that they could not pay their loans on the mobile app.

The second group project I worked on was my capstone. We wanted to create a product for students that promotes financial literacy and helps them learn how to build their credit. I worked on this project with one product management intern and two design interns. We created an onboarding process that tests users on their financial literacy. The results of the quiz is then used to populate a dashboard with curated finance facts based on the knowledge established in the quiz.

For more information on these two projects, please reach out.