Apply design language consistently: iterative design at scale
I love big projects as well as small. This one was big! I was responsible for designing all of the payment experiences for a global telecom which had both pre-paid and post-paid customers.
The Pay team was part of a larger team of pods. Together we were redesigning the entire customer experience. Dev, Visual Design and UAT were teams we interacted with daily. Our client had User Research in-house, so our designs went through usability testing regularly.
All payment designs were derived from the One-time payment UX.
Story mapping payment experiences
We made detailed story maps and discussed them with our client's department heads to document which user stories were currently accounted for and how they were prioritized. Another goal of this exercise was to give the business an opportunity to add missing experiences to the backlog. Business requirements, channels and dependent API's were annotated on the user stories. It was a huge effort and a very successful way to communicate.
Working in 3 week sprints, we designed 8 Experiences* overall in 3 breakpoints. We created payment patterns for the Master Widget Library and collaborated closely with cross-functional teams like Purchase Path- Lower Funnel, Manage Account and Billing for design consistency.
*One-time payments, AutoPay, Scheduled Payments, Stored Payment Methods, Refunds & Adjustments, Redeem a Gift Card, Add One-time Funds and Payment Arrangements
Responsive wireframes in three breakpoints: 320, 768, 992 pixels
One-time payment UX (Select Amount, Date and Payment Method) was the base design for all payment UX.
One experience to rule them all?
Regarding where users' functional needs diverged and where the omni-channel UX didn't work, on the Pay team, it was the Review page. Our client is highly regarded for their customer service, but time-on-call was costing them a fortune. Since the Assisted Channel is taught to review the information on the Set-up page with the customer, Reps wanted the freedom to go right to a Confirmation page. In design reviews, reducing the number of clicks was very popular with the business as it would save them millions per second on volume. However, the Unassisted Channel needs an opportunity to reflect and maybe change its mind which the Review page provides, both from a design perspective and a legal one.