Elevating User Experience for Prepaid Debit Cards
A Comprehensive UX/UI Case Study on the Customer Portal
Introduction
At B4B, I collaborated with the marketing team to align the customer admin portal with the new website in terms of aesthetics. It's worth noting that, during this phase, the focus was not only on the visual aspects, but UX considerations were also worked on.
Upon completing this phase, I dedicated focused efforts to delve into researching, conceptualising, and implementing an enhanced UX for the customer admin portal.
Customer Portal First Steps
The practices outlined here serve as a comprehensive blueprint for any project, emphasising the systematic approach I adopt and showcasing the strategic utilisation of various aspects in my toolkit.
Planning and Discovery
Conducting a strategy workshop was pivotal to establish a shared vision for the ideal user experience. The product, though feature-rich, lacked cohesiveness. Workshops with key teams - Senior Management (SMT), Customer Management (CMT), and Sales (ST) - were conducted to identify successful aspects, such as the user-friendly corporate expenses feature, the superior app, and the growing connectivity to accounting systems.
Employing the TRIAD methodology (Informative, Automatic, Authentic), we crafted a concise elevator pitch for B4B. The link to the B4B portal is provided here.
User Journey Defined
Creating a visual representation of the customer journey, particularly for new customers acquiring cards promptly, aimed at evaluating the efficiency of the process and identifying areas for improvement.
User Research
Informed by user concerns, behaviour patterns, and real-world product usage, user research involved short, recorded interviews with customers. Scenarios were presented, and notable findings highlighted issues like disjointed desktop cardholder registration, prolonged two-factor authentication, and confusion in card ordering.
Comparative Assessment
Beyond evaluating direct competitors, we considered products and services likely to be encountered by our customers. Discovering a unique feature missing in competitors' products prompted its prioritised integration into our UX, aligning with our emphasis on ease of use and time sensitivity.
Wire framing & Development
Sketching lo-fi prototypes with a specific focus on UX challenges like cardholder registration and card reordering, these were presented to the development team. Technical discussions with developers led to the endorsement of Tailwind as a new build tool, addressing critical UI/UX drawbacks in the existing system.
Refined High Fidelity Prototype
Changes in UX, incorporating a search facility, were made based on user testing feedback. A decision tree approach was employed in collaboration with the CMT to streamline the card ordering system, resulting in a clearer process.
UI Design System and Implementation
Collaborating closely with developers, a versatile and future-proof design system was developed using Tailwind to implement new UX functionalities. A mini-project, focusing on card sign-up, underwent internal testing before guerrilla user research in the field.
Results & Conclusions
The implementation of Tailwind across the entire site, coupled with a well-established design system, facilitates the rapid incorporation of new UX ideas for internal and client review. Significant improvements were noted in client processing times, a substantial reduction in client complaints for the CMT, and increased engagement from existing clients for idea suggestions. The SMT now actively addresses identified issues and collaborates with clients for testing.
Tailwind's successful deployment, coupled with the established design system, has streamlined the implementation process, making it more efficient and responsive to client needs. The positive results affirm the impact of a user-centric approach in enhancing both UI and UX for the prepaid debit cards customer portal.