Zelle Landing Page
fig. 7.1: Zelle payment flow from landing screen
Background
EWS UX guidelines require a Zelle landing screen when entering any Zelle flow. This landing screen contains five discrete elements of Zelle functionality: Settings, Send, Request, Split, and Activity. In the Capital One app, the CTA Send Money with Zelle® appears in the extensibility (navigation) bar on the account screen. However, appetite for Split functionality is low (EWS data suggests that customer engagement with Split is relatively low when compared to Send and Request).
Problem Statement
As a Capital One customer and a Zelle user, I want a clear and actionable Zelle hub.
fig. 7.2: Zelle landing screen iterations
Understanding User (Empathize & Design)
While Capital One had previously addressed the dual pathways of Send and Request with an Action Sheet (iOS) or Overflow Menu (Android), it became clear that organizing additional features couldn’t simply be achieved by adding new menu items. The menus don’t accommodate a clear hierarchy (save for sorting order) and discoverability of Zelle features remains challenging for the Capital One customer.
Rather than strictly following the mandate and keeping with Capital One design principles, we elected for a more actionable hub instead of a Zelle landing.
Low Fidelity
I iterated on multiple layout options at mid-fidelity in Sketch before executing at higher fidelity for testing.
Testing
We tested several landing page layout options for clarity. We also tested findability against the current experience in production (described above) and found a marked improvement among the test subjects.
fig. 7.3: Zelle decline payment flow from landing screen
Ideation
The design leverages the brand-appropriate purple in a more thoughtful way through a small banner illustration that still engages and delights, despite its reduced size. It also remains consistent with onboarding illustrations. The pairing of the Capital One logo with the Zelle logo is a clearer cobranding effort. We’ve reduced the size of the Send and Request buttons without reducing visibility. Settings leverage the more recognizable gear icon The hub includes all the required elements but adapts the C1 design pattern for the transaction ledger (as seen on the account screen) where the customer can see recent Zelle transactions and take immediate action on a pending request.
Final Result
The Zelle landing page addresses both the UX requirement and adheres to Capital One design principles resulting in:
- improved findability of send and request flows, Zelle settings, and transactions
- empowering the customer to take immediate action on a pending transaction.
Learnings
The biggest takeaway which was common among all testers was that The “Send Money with Zelle®” CTA continues to confuse users on non-send money activities. The CTA is a protected brand asset but in an ecosystem where every CTA is literal and directly communicates intent to the user, “Send Money With Zelle®” encompasses only the flow it describes. Moving forward, explorations of different, broader, less specific CTA language could lead to better clarity for the user.