Design process
In this project the standard complete design process was required for a correct creation of a good product:
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.
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.
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.
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.
.svg){kind=small}