Revolutionizing the Experience of Initiating Manual Payments
"Streamlining the Payment Process with Innovative Manual Payment Solutions"
Overview
Initiating manual payments was a cumbersome, time-consuming process — especially for businesses handling a large volume of transactions daily.
Different demographics and business types used the same form, making it complex to input information and increasing the likelihood of error. The goal was to craft a solution tailored to each user's business, entitlements, and demographic information — enabling users to enter only what was necessary.
Project scope
Current situation
The existing solution took all input from users in one long form, then informed them at the end that the payment could not be initiated — for any number of reasons — leaving users agitated and struggling to find the correct information in a limited window of time.
Goal
Tailor the process of initiating manual payments to be intuitive, fast, transparent, and a pleasure to complete:
- Retain existing clients and attract new ones
- Increase payment success rates
- Reduce the burden on support services
Challenge
Two major challenges shaped this project:
- Gathering feedback and pain points from different types of users across various regions, all using the same solution
- Identifying every way a user could initiate a manual payment, and bringing them under one overarching solution
Design process
Adapted with a fellow UX team member across cross-functional stakeholders.
My Role — Senior UX Designer. Responsible for crafting the solution from the beginning, adapting the design process with cross-functional team communication alongside a fellow UX team member.
Other roles involved
User research
In September 2020, we set out to understand client frustrations, identify opportunities to improve the experience, and produce a design concept for key journeys — by analysing the current CitiDirect experience, running workshops with stakeholders, interviewing clients, reviewing previous Citi initiatives and external inspiration, and applying best-practice form principles.
Major frustrations
User personas
Two personas grounded the redesign in real day-to-day payment work.
Sarah Johnson
Derek Wilson
Low fidelity wireframes
We created low-fidelity ideas with all the information gathered and made sure all the ideas are research driven and functional.
We had multiple brainstorming sessions within the UX community and with stakeholders at this stage to avoid designers' biases.
High-fidelity wireframes
Seven themes emerged from low-fidelity exploration, each grounded in a real client quote.
01 Ask Questions in the Right Order
"We should be guiding clients like a concierge service. Not just presenting a long form"
"I'm trying to copy an invoice. I'm looking for 'who am i paying?', 'from which account?', 'how much?' and 'when?'"
"Why am I asked first about payment method?"
02 Make Repeat Payments Simple
"98% of the time, clients will pay the same beneficiary in the same way"
"Clients shouldn't need to set up a template per client: We should do this automatically for them."
"We have thousands of templates - they've spun out of control"
03 Provide Helpful Prompts
"It's hard to tell which of the 'description' fields I have to fill in"
"I don't understand what most of the fields are asking for."
"I have no idea what these payment methods mean"
04 Adapt to Regional Differences
"Clients get confused when they have to make a payment to / from another country"
"Phone number is mandatory when paying Korea. But there's no field for phone number!"
"The forms are global and generic, and so are confusing for many clients"
05 Integrate FX Seamlessly
"FX payments should feel just like any other payment"
"I need to have an idea of the FX rate being applied"
"I have no idea what these payment methods mean"
06 Avoid Failed Payments
"Citi automatically rolls my payment if I miss the cut off time. This is annoying"
"Sometimes I submit a payment just before the cut off time. I have no idea whether it will go through or not"
"The error messages don't' tell me what the form is asking for"
07 Help With the Next Step
"It's hard to find the payment i've just submitted"
"I don't understand what happens to my payment after submitting"
"I have no idea what these payment methods mean"
We should be guiding clients like a concierge service. Not just presenting a long form.