Bank WebApp (B2E)
Service Design, UX Design
March 2020
Client: Classified
Agency: Doing
Role: Service & Product Designer
An Italian bank started a project to meet Italian Central Bank regulations and transform their procedures in terms of transparency and efficiency.
First version of Homepage UI
About the Project
For many years the Bank had been expanding and merging different institutions resulting in a combination of personel and legacy platforms. This project was focused on the massive reimbursement procedure, that currently involves users with different tasks and locations in Veneto and Lombardy. The Bank wanted to create a unique web application where all the users could access the information about reimbursement and complete their tasks.
Early blueprints drafts and requirements docs
The Research
A picture of the desired solution was build through a series of meetings with the stakeholders, the development team and the users.
Blueprints were used to document every single user’s point of view, the various layers, the platform requirement, the systems impacted and the key points to solve.
An exploratory test using paper prototyping helped test and discover the user’s needs, required actions and information priorities.
Draft Blueprints
Exploratory tests
Paper prototype
UX Challenges
One of the many challenges of this project was different users vision of the platform. It was noted that each type of user had a different priority within the platform. It was necessary to create an application that could be flexible enough to adapt to the different tasks users had to complete, while being uniform in a way that users could communicate the information offline.
Different versions of Homepage according to every user
UX Solutions
The application starts from a homepage where users select functionalities. The massive reimbursement lists start with a overview of the totals and last updates, then it presents the filter and search tools, followed by a section dedicated to all the possible actions and finally the list with a checkbox to select the single items, get details and modify them. The details page presents all the information of the single reimbursement followed by the information about the client and the project it belongs to.
The components where designed in a way that they could be reused from the list pages to the details pages in a way that helps the coherence between the pages and eases the UI development phase.
Main pages wireframes
