⚠️Before you scroll
This case study is about the MVP of the project "Opening a bank account while a business" i recommend to visit it first for context. To visit it, click here
Project recap
The company was Banco Galicia. My role was UI / UX Designer (Research, prototyping, testing, Information Architecture, Interaction and UI design) in a team of 2 designers, 4 developers, 1 product owner, 2 product analysts, 1 QA and 1 scrum master, using as methodologies: Scrum, Design thinking, Atomic design. Duration: June 2018 - August 2019
A web based platform for business account executives in branch offices to upload new clients documentation.

Powered by Optimal character recognition and Machine learning, this tool provides the capability to read legal document and extract the necessary legal data to open a new account. 
Why this MVP and not other?
Because it was the part of the vision that could provide the most value in several aspects:
On the customer's side, it would ease the most important pain point that we find during our discovery phase, which was the amount of time the customer had to wait to have their account available: up to 20 days.

On the business side, it contributed to one of our main KPIs, which was release of FTEs (full time equivalents) of operative workload of not only account executives who uploaded the documents but also teams in the legal and credits department. 

On the executive's side, it released them from heavy operational tasks, leaving them with much more time to dedicate to acquiring new clients (also impacting our conversion KPI) or enhancing their relationship with current ones, on order to reach their monthly sells objectives.

On the technology side, the solution was totally feasible and it would imply the gain of a new set of capabilities for the entire company to use.
The interface
1. Introduce the business identity number (CUIT)
User accesses the tool through a web browser and is welcomed by this view, where they have one main task to complete. When introducing the CUIT number, the interface returns the name of the business associated with it, allowing the executive to flag any error in this stage instead of having to wait until the next step to find out.
We were using an 8 point based grid to make sure the new components we created for this project were scalable, and our 12 column grid, the preferred grid for desktop devices according to our design system.
2. Upload the documents
After step one, user continues to this view where they can see as a headline the company they're uploading the documentation for. This is key as account executives manage dozens of accounts every day and work in a fast paced environment were mistakes can be easily made.

Each documentation has their own box, with the name of the document, where the executive can upload each document. Executives handled this documentations every day, so in most cases they are experts on differentiating and handling it.
But, given that every month a lot of business executives are hired or promoted from lower rank positions and might not be entirely confortable with the documents, we incorporated tooltips with a short explanation regarding what each of them is. 
Explorations on the upload component
We did some explorations on the document upload component using existing atoms in our design system, along with new ones we created for this purpose.
The purpose of this new design pattern: Allowing our internal collaborators, and eventually our business customers, to upload specific types of documents to send to us. 
Requirements: Being highly modular because as the project scaled to more types of businesses, the interface should support more types of documents while mantaining consistency within the context of our design system.
Provide clear communication and feedback on whats going on, error prevention, control an freedom to mage the documents, affordance (browse, drag and drop, delete, cancel).
After testing some of these options with executives, decided to move forward with a component with more affordance regarding the drag and drop gesture, and where documents have their own box where the status of the upload and feedback is clearly separated from the rest. 
3. When ready, send the documents
After dragging or browsing for the documents, user can see the progress of each of them and cancel the upload, delete documents or manage errors if necessary. Feedback is provided in a clear and consistent manner in every possible case. Consistency is key to reduce our user's cognitive load.
An information component is displayed to remind the user the format of document allowed and also documents that are not in PDF format appear disabled if user browse for them, and if they drag it to the interface a 5 seconds alert message is displayed in the location where the user would expect to see the document they dragged, informing that the format is invalid.

The "send" button only enables after uploading the Estatuto, which is the minimum documentation with which an account can be opened (if the business has no other document). 
Possible outcomes
For the feedback screen, we incorporated some relevant informations that we knew through interviews with executives that they felt most anxious about. 
We incorporated a help tab to prepare for the tool's scalation to the entire network of branch offices, where new users could consult information regarding all the important aspects of using he tool, knowing the documents, understanding the process and so on. 
For this we relied on our existing insights from the first release of the tool, where we received tons of questions and started to notice patterns in the doubts. For the information architecture we did a card sorting workshop with executives.
Full flow
Back to Top