Product Design, Mobile App
Incorporating P2P payments with Zelle into the Citi mobile app on iOS, Android and responsive web
Our challenge was to launch the Zelle app for Citibank on both iOS and Android. We were including new features, such as Scheduled and Recurring payments. We worked closely with Citi and Zelle to launch this part of the Citi app.
Agency: Critical Mass
Overview
My Role
UX Architect
White boarding
Wire framing
Prototyping
User Research
User Testing
Skills Used
Time Frame
5 months
Producer
UX Lead
UX Architect
Art Director
Visual Designer
Team
Tools
Sketch, InVision
Android & iOS Feature Parity
With the iOS Zelle app already live, we were launching the Android version of the app following the feature set of the initial iOS release. My objective was to recreate the iOS flow for Android. The challenge was finding the appropriate balance between Zelle's style guide, Citi's design language, and Google's Material Design. I had to make sure that this new Android flow followed the iOS interactions as closely as possible to maintain parity, but also stayed true to native Android patterns.
This part of the project was on an incredibly tight timeline of less than a month.
The first 3 features we released were Enrollment, Request Money, and Activity Log.
Enrollment flow
Request Money – Happy Path
Activity Log BAU Improvements
In addition to improving the current Activity Log, we ideated some future improvements. We played around with adding a slider to filter payment amounts, and filtering by contacts.
Activity Log Ideation
Split Payments
The split payment flow is a differentiating feature of the Zelle app. With Split payments, users are able to split an amount with up to 10 recipients. The app conveniently splits the amounts evenly and allows the user to adjust the amounts accordingly. We created this flow for iOS, Android and web. My primary responsibility was working on the web flow, as well as iOS improvements.
Steps two and three of the Split Payment browser flow
Scheduled and Recurring Payments
Once the Android work was delivered, we focused on creating extra features, such as the ability to create scheduled and recurring payments. For this part of the project, we worked on Android and iOS side-by-side.
Maintaining parity between Scheduled and Recurring flows with iOS and Android
User Research and User Testing
We conducted extensive user research and user testing for Scheduled and Recurring Payments. Working with Globant, we ran in-lab moderated user testing with 8 respondents in both New York and Los Angeles.
Overall, our results were positive with a majority of respondents completing the tasks intuitively with no stumbling blocks. Our goal was to make sure users older than millennials would have an easy grasp of the product.
Some pull quotes included:
“I guess it surpassed my expectations because I didn't know it was going to be that simple.” – Aileen M., 38, NYC
“It had all the information you might need to make a transaction like that.” – Ken D., 56, NYC
Overall Learnings
The Zelle project was a unique challenge which required teamwork and cooperation from multiple teams - Zelle, Citi, and our own - to best bring the app to market. User research and testing played a huge role in this project, and was my first experience to be a part of in-lab moderated testing. It was very rewarding to see the designs I worked on being used by real people, and receiving feedback in realtime.
Takeaways
This project was a unique opportunity to be part of a significant redesign of the Citi mobile app. It gave me hands-on and in-depth experience with Apple’s Human Design Guidelines, as well as WCAG. It was also great to be part of a large team of UX designers all working on separate components and patterns that interact together to create a cohesive system. This project gave me a strong foundation for understanding how design systems come together, as well as how to design for accessibility guidelines.