Responsive Website Design
online card manager: enhancing and simplifying how users can effortlessly manage their cards
Coronation Merchant Bank sought to simplify and enhance how users manage their cards by integrating card management features into their internet banking platform. The goal was to create a responsive website design that would allow users to perform tasks such as activating a card, setting a PIN, blocking a card, checking card information, and changing the PIN, all on their own.
The goal was to automate and simplify how users could manage their cards by making it easily accessible, user-friendly, and secure.
By providing a self-service solution on the internet banking platform, we believed users could manage their cards more efficiently. Our aim was to automate common tasks and provide an intuitive user experience to reduce customer reliance on service representatives.
My Role:
I was the UX/UI designer on a cross-functional team, which included:
> 3 developers (back-end and mobile)
> Project manager
> Quality assurance engineer
> Marketing and communication specialists
Collaboration:
> Worked closely with developers to ensure the technical feasibility of the integration.
> Partnered with the project manager to align the app redesign with business goals.
> Collaborated with the QA engineer for extensive user testing and feedback incorporation.
> Cooperated with marketing to develop user guides and communication strategies to promote the app's new features.
At Coronation Merchant Bank (CMB), one of the key services is managing bank cards for personal and corporate clients. We observed that customers frequently contacted the bank for basic card management tasks, such as activating cards, setting or changing PINs, blocking lost cards, and reviewing card information. These requests resulted in a time-consuming and inefficient process for both clients and bank staff.
Furthermore, with the rise of digital banking, we recognized the increasing demand for self-service options that would allow clients to manage these tasks independently, securely, and seamlessly, without needing to contact the bank's support team. Our stakeholders all agreed that improving the card management experience would increase customer satisfaction while reducing operational costs.
Stakeholders were identified through a comprehensive mapping process:
Coronation Merchant Bank customers
Coronation Merchant Bank management, IT and development teams, customer service representatives
Marketing and communications teams
Gathering Information
To better understand the problem, we conducted comprehensive research that involved both internal and external sources. Internally, we collaborated with the customer service team to analyze the frequency and nature of client requests related to card management. These findings showed that nearly 40% of service calls were related to tasks that could potentially be automated.
Externally, we gathered feedback directly from clients through surveys and interviews. Customers expressed frustration with the slow process of card management, including waiting times for customer service assistance. Many were eager for an easier and faster way to manage their cards through the bank's digital platform.
We also reviewed competitors in the market, noting that several leading banks had begun offering automated self-service card management through their mobile or web banking platforms. This further confirmed the need to provide a similar service to remain competitive.
Identified User Needs
CMB’s corporate clients needed a secure, efficient platform to manage their financial operations, including:
> Users wanted an easy and efficient way to manage their cards (activate, block, change PIN, etc.) without the need to contact customer support.
> Users preferred the ability to perform tasks independently, such as activating cards and setting PINs, in a quick and intuitive manner.
> Users required a responsive design that allowed them to access card management tools from both desktop and mobile devices.
> Users needed step-by-step guidance and real-time feedback to ensure they could complete tasks confidently and without confusion.
Identified Business Needs
> The bank needed to decrease the volume of card-related inquiries and support tickets, which took up significant time and resources.
> CMB aimed to enhance user experience by offering a seamless, self-service solution, improving overall customer satisfaction and loyalty.
> By simplifying the activation process, the business sought to boost card activation rates and overall card usage.
> Automating card management would allow the bank to reduce operational costs and optimize resources, freeing up customer service for more complex tasks.
Ideation: Proposing a Solution
Based on our research, we proposed a fully integrated "Card Manager" feature within the existing Coronation Merchant Bank internet banking platform. The goal was to automate and simplify how users could manage their cards by making it easily accessible, user-friendly, and secure.
Key features of the proposed solution included:
Set Card PIN
Allow users to set up
Activate Card
Enable newly issued or replaced cards to be activated directly from the platform.
Block Cards
Provide an option to block cards if lost or stolen .
Check Card Information
Modify their card PIN securely.
Check Card Information
Give users easy access to view their card details such as expiry dates etc.
We aimed for a responsive website design, ensuring it would function seamlessly across devices, particularly on mobile phones, to cater to the growing number of users accessing banking services on the go.
Why This Solution? This solution aligned with our objectives of improving customer experience and operational efficiency. By empowering clients to manage their cards independently, we would reduce the need for customer service interventions, thus lowering operational costs while enhancing convenience and customer satisfaction.
Additionally, this approach provided a level of control and flexibility that users increasingly expect in digital banking environments.
This persona helps illustrate the typical CMB customer who would benefit from the automated Card Manager tool, highlighting her need for convenience, security, and efficiency.
Login Page: User accessing this application directly from other CMB platforms is required to login with CMB internet banking credentials.
Soft Token Page: User logging in from other CMB platforms is required to enter the soft token after logging in with the credentials for them to proceed while user accessing this application through CMB internet banking platform is only required to enter the soft token.
Dashboard
Activate Card Page
Card Information Page
Success Metrics
After integrating the card management automation into the CMB internet banking platform:
Faster Card Activation
Challenges
> In early iterations, we experimented with having the card management tools hidden under the "Settings" menu. This led to low discoverability and user frustration, as many did not realize these features were available.
> We also tried implementing a card management feature through a pop-up modal. However, testing revealed that users found the pop-up disruptive, especially when they were performing other tasks on the banking platform.
> We had some challenges around ensuring real-time synchronization between the card management system and backend card services, but our development team solved this by optimizing API communication between the systems.
Impact on Users
Users were empowered to manage their cards independently, which resulted in faster resolutions for common card-related issues. The self-service feature significantly enhanced customer satisfaction, reflected in a 20% increase in positive customer feedback.
Impact on Business
By automating card management, the bank reduced operational costs associated with handling card-related inquiries, saving time and resources for customer service representatives. Furthermore, the streamlined card management process helped drive a 15% increase in new card applications, as users found the system more user-friendly.
Key Takeaways
> We learned that frequent usability testing is essential in refining the product design to match user expectations. Testing early and often helped us avoid design pitfalls, like hiding key features in the wrong sections or using disruptive pop-ups.
> The project’s success was heavily dependent on collaboration between the design, development, and product teams. Constant communication allowed us to address challenges quickly and iterate on the design efficiently.
Conclusion
The Card Manager automation on the Coronation Merchant Bank internet banking platform successfully addressed the need for a more efficient and user-friendly way for clients to manage their bank cards. The responsive design allowed users to access the tool across devices, empowering them to perform tasks independently and securely.
By reducing the reliance on customer service teams, we not only cut down operational costs but also improved overall customer satisfaction. Adoption rates exceeded expectations, with more than 70% of users managing their cards through the platform within six months of its launch. The project demonstrated how automating a traditionally manual process can deliver significant value to both the business and its customers.