Banc Sabadell mock-ups
Banc Sabadell Consumer
As one of the main banks in Spain Banc Sabadell is also offering specific products to companies and retailers.
With this responsive dashboard the business clients are allowed to control their loans and credits related with their cards.
Banc Sabadell
UX-UI Designer | Prototyping
About Banc Sabadell Consumer
As one of the main banks in Spain Banc Sabadell has multiple products. One of this products is BS Consumer, an app that allows business costumers and companies that have retailer credit and debit cards to manage their transactions and cards from a centralized dashboard.
The challenge
Banc Sabadell with this project wanted to create a dashboard that could be used from the client and the retailer side. For this challenge the development code selected was Angular so the design the Angular Material Design System was followed.
The team
This project was developed in an Agile approach with a cross-functional team created inside Worldline Iberia managed by a Product Manager with the help of one Scrum Master. The design part for this project was mainly conducted by myself, always having the support and feedback of the team.
My role
As the only designer involved in this project my role was to develop the whole process from the client contact as UX specialist to the delivery of prototype, assets and measurements, including UX research, wireframes and UI Design.
Design and research tools
Axure RP
User Interview
User Journey
Design process
In this project the standard complete design process was required for a correct creation of a good product:
UX Strategy
Together with the Product Manager and the Scrum Master the role of UX for this project was defined and planned before starting with the real work. When the internal organization was clear, we presented it to the client and explained the importance of a proper UX process with a workshop.
As one of the biggest banks in Spain, Banc Sabadell has a big amount of different channels and products that they offer to they different target groups. To understand the overall audience of the bank and the specific target group of our product different methods where used:
User interviews: user interviews and email surveys where done from a mind-map of questions to gather qualitative and quantitative information from the different target groups of the bank and obtain specific information from the potential users that will be using Banc Sabadell Costumer. From these answers an analysis was written with conclusions from a quantitative and qualitative perspective.
Personas: from this analysis, archetypes and personas where created in order to have a clear reference of the clients that the app might have in the future and define user journeys for each of these personas.
User journey: a user journey timeline was created for each of the personas created. With this information and knowing the business and security requirements from the bank a first wireframe prototype was created to showcase to the client.
Besides the UX research an exhaustive research on the design system from Angular Material Design was performed to ensure easy and perfect coherence between design and development. Also, an UI analysis of the different channels and products of the bank was done to ensure coherence between already existing channels.
After the UX and UI research was completed it was presented to the client. The final decision was to take a conceptualization workshop together with the IT departments of the bank. For this a design sprint week was used and conducted in the client facilities where changes were decided.
As a result of the design sprint, a definitive version of the wireframes was created. With the approved wireframes on the table a prototype was created with the objective of using it for usability testing sessions with clients of the bank.
Usability testing
With this prototype two different rounds of usability testing were performed:
Usability-Lab Studies: a round of one-on-one testing sessions with 15 users of the bank in the usability lab. All of them passed through different scenarios and tasks to see the usage of the product and how potential users might react to each part of the prototype.
Unmoderated Remote Studies: Lookback's recruitment system and platform where used to collect data and insights that allowed to refine the wireframes from a more numerous of users using video recorded sessions.
User Interface
With the last refined wireframes flow using the brand research and applying the UI to all the components of Angular Material the mock-ups and final prototype were designed.
Feedback session
The work methodology followed in this project was a continuous implementation and Agile.
Therefore, for each part of the app a feedback session with the complete design team and the client was needed to validate and approve before delivering to the development team.
The delivery to the developers was always done in an Agile continuous improvement form. Each part or section of the app were reviewed before implementation. InVision was used as tool for delivery and communication in this project.