Dashboard redesign • www.payabl.com
Payabl. is a payments institution with regional offices in Cyprus, Germany, Netherlands, Italy, Poland, Lithuania, and the UK. They offer banking services to merchants and businesses. Payabl.'s existing B2B banking platform was functional but not user-friendly. We proceeded to redesign it to improve the usability of their dashboard.
Duration: 3 months (2022)
My role: Product designer
Team: 2 designers , 1 product manager, 2 frontend developers
Tasks included: Research, stakeholder interviews, wireframes, prototyping
In compliance with my non-disclosure agreement, I've excluded and obscured confidential details in this case study. All information presented is my own and may not necessarily align with the viewpoints of Payabl. Any similarity to proprietary information is purely coincidental. Additionally, I do not own any copyrights of this brand, like the logo, imagery, or any related elements.
With the collaboration of the insititution's employees, I conducted online research on other banking platforms who put the discoverability of services and information first and had a well-thought-out IA. A challenge we faced was that B2B banking platforms are not openly available to individuals. After extensive research, we discovered a well-known bank that was offering an online demo of their B2B services which helped us understand main differences between private and business banking.
Before designing any screens, we interviewed the stakeholders to define the requirements, identify pain points, goals, and context of use for the new banking platform. Following the interviews, we analysed the insights on FigJam.
The stakeholder interviews as well as our experience of the existing banking platform brought to light information architecture issues as well as copy issues. The terminology used to name the tabs on the side menu was unclear, making the navigation difficult. With these issues in mind, we proceeded to create an information architecture diagram that reflected clear navigation with commonly used terminology in banking platforms.
After defining the IA and navigation of the new banking platform, we continued with wireframes. We intended to help define the layout and structure of the dashboard, plan functionality and get early feedback from the stakeholders without focusing on the final design. I created a wireframe library focused on banking elements to iterate quickly which was also shared to other designers in the team.
In the existing platform, the form to initiate a transfer was presented to the merchants as one page with multiple fields to fill in. To improve the user experience, we created a step-by-step flow, presenting fields gradually to the user. We included a stepper at the bottom to guide the user and inform them of the nature and number of the upcoming steps. Lastly, we introduced a right-side menu that would aid the users in finalizing their actions without having to move to another page.
To make the platform more user-friendly, considering individual preferences, comfort, accessibility, and the diverse contexts in which users interact with the application., we introduced light and dark mode.
Responsive design is crucial for a banking platform as it ensures a consistent and optimal user experience across various devices. It improves accessibility, encourages mobile banking adoption, is cost-effective, prepares for new devices and screen sizes, ensures compliance and security, and provides a competitive advantage in the digital banking landscape.
To improve the user experience of Paybal.'s existing B2B banking platform, we redesigned it with usability in focus. We delivered the new flows in the form of wireframes as well as mid and high-fidelity prototypes.
The company intended to launch this concept to five of its merchants to test it. Shortly after delivering the designs, we were asked to extend our contract with them to continue exploring and improving their new banking platform.