OVERVIEW
We created a faster, safer and error-proof solution to manage the Fixed Income Shelf in both Nubank's and NuInvest's app.
When we first started working with the Middle Office team, they were managing all the investment assets in excel spreadsheets. This process was outdated, manual, error-prone and created several risks for the company.
To solve this problem, we ended up migrating this process to an internal web-app and creating an intuitive step-by-step flow to automate 80% of the process in a more user-friendly way.
This project had a R$1.6m impact on reduction of order cancellations, and a ~2.5m reduction in operational risk for the business!
CONTEXT
The "Middle Office" team is responsible for curating and managing the fixed-income class of investments assets.
In order for fixed income assets to be made available on the Nubank and NuInvest apps for clients to purchase, a dedicated team of specialists at the company must carefully select the most attractive assets, calculate their prices and fees, and manage their registration, updates, and shelf visibility within both apps.
Once a specialist selects a product and adds it to our portfolio, its rates and expiration dates must be updated at a specific frequency. Pre-fixed and IPCA-indexed products require daily recalculation, while post-fixed products can be updated less frequently. These updates in the spreadsheet were taking about two hours of work for the Operations Desk employees every day.
Problem
A very outdated and manual process in need of automation to reduce business risks.
Although these processes are critical for Fixed Income, the entire fixed income shelf management was conducted through an archaic, manual process involving mainly Excel spreadsheets. These files were saved only on employees' machines, and much of the data entry was done manually. This increased the potential for errors, which could have significant impacts, such as an incorrect product entry leading to the cancellation of all transactions for the day—sometimes amounting to hundreds.
Business risks
Typo risk
Incorrect asset property registration leading to purchase cancellations. (we had R$ 4.9M in Ticket Cancellations in 90 days)
Customer impact
Frustrated customers with canceled purchases often complained to the call center
Stressed employees
The daily pressure to avoid making any mistakes made the process highly stressful for the team
Restricted knowledge
As the files were saved on only a few employees' computers, other teams couldn't access the files and didn't know how they worked
Objective
Create a faster, safer and error-proof solution to manage the fixed income shelf
We wanted to migrate all these processes from the excel sheets to the internal company tool we call "EMS". This would give us more safety, flexibility to add different features and the ability to save the history of the assets rates.
- Reduce process completion time to increase sales window and decrease work time
- Reduce the number of canceled purchases due to wrong information
- Increase the percentage of asset registered in the EMS vs. in the excel
My Design Process
1. Empathize
First, it was necessary to deeply understand this long and complex process of updating the assets.
To achieve this, I first conducted several shadowing sessions with the Operations Desk team to understand their daily routine in detail and all the necessary steps involved in updating the fixed income shelf.
1.1 Shadowing Findings
Long process
The procedure took almost 2 hours daily, with significant pressure to be quick. Any delays in updates equals reduced time that assets are offered in the app, which means less company revenue.
Manual calculations
Users performed some calculations by hand and checked details like "due dates" using an actual calendar in their computer or phone.
Lack of validation
The absence of error validation in the worksheet was opening up room for errors and generating feelings of insecurity in the users that had to go through it manually.
Data loss
As the information changed every day in these files, the company did not have a history of the products and rates that were offered.
1.2 Blueprint mapping
Along with the team's product manager, we designed a comprehensive blueprint mapping out this entire workflow.
Our main finding was that: even though users navigated through almost 20 different tabs on the spreadsheets, they ended up consulting only a few pieces of information!
This meant that we could drastically simplify the process, using the main spreadsheet structure as the base to all of the actions they needed to perform, instead of jumping from one tab to another. This would improve not only the user experience but also the cognitive load and the time consumed to execute the task.
1.3 Jobs to be done and Prioritization matrix
With all the insights we gathered, we identified key takeaways that helped us define our priorities for this project.
With a complete view of the process, we proceeded to conduct several sessions using the Jobs To Be Done framework, prioritization matrix, and How Might We methodology with the technology team to deeply understand the best path forward.
1.4 Main driving questions
- How might we implement validation and reduce typo errors?
- How might we optimize the process to enable a faster and efficient experience?
- How might we demand less cognitive effort during the process?
- How might we make it so simple that anyone can do it?
2. Ideate
With a clear direction in mind, we moved into this phase to brainstorm design solutions and assess their feasibility.
For one last time,I revisited and analysed the EMS interface and using all the information gathered, I created a blueprint for our proposed solution. Next, I developed wireframes to illustrate my vision and presented them to the Operations Desk and technology teams to gather feedback and try to understand if this solution would meet their needs.
2.1 Current EMS interface analysis
In order to reuse existing assets, users would need better filtering functionality than what was in the existing EMS table.
One of the reasons the team kept using the excel sheet for so long was that the old EMS app wasn't good enough for them to execute the actions they needed on a day to day basis. So one of our first actions here was to figure out how we could improve the already existing platform. And for that we ended up redesigning the main table and adding some very much needed improvements.
Before:
- Table row heights and filters occupied too much space.
- Filters were overly simplistic and not tailored to users' needs.
- Included redundant columns that cluttered the interface.
- Lacked critical information necessary for decision-making.
After:
- Implemented advanced filtering options for better usability.
- Added sorting functionality to the main columns.
- Reorganized information by replacing redundant columns with more relevant ones.
- Introduced pagination to improve loading speed.
2.2 Wireframe
Inspired by registration and onboarding experiences, I decided to create an interface containing phases, indicating to the user what needs to be done in each step.
The steps would be:
- Edit: Input all the changing asset information.
- Analyse: System returns pricing analysis based on the input data.
- Review: A dashboard displaying all assets and their changes.
- Confirm: Upload the changes to the investment shelf.
.png)
2.3 Review & Feedback
When we brought the wireframe to the team, they were glad that it could drastically improve their experience, but they also realized that they would need some more information if they were going to actually use the new interface.
Add and modify some information
Add a new column and make other specific columns editable
Provide a quick way to compare
The numbers of assets by properties after completing the edition
Allow the addition or removal of assets
To provide greater flexibility during the editing step
Enable updating individual assets
Instead of limiting updates to assets based on the issuer
3. Prototype & test
Then it was time to polish our product and ensure a seamless experience from start to finish.
It was my first time designing a data grid, so I collaborated closely with our developer to ensure all edge cases and interactions were considered.
3.1 EMS Library
But then, we faced a problem!
We discovered the EMS platform was built with no design system, components whatsoever. This meant we had to create everything from scratch, which would be time-consuming. To save time and meet our deadline, we requested the company to invest in the MUI library (design and front-end), facilitating the design process and ensuring a solid foundation for the project.
So I built out a EMS library in figma with the main components we needed for the project based on the MUI material, to have a better documentation for the engineers and also to make it reusable by other designers in the future
3.2 Usability Test & Insights
We conducted a usability test with 2 Middle Office employees to gather valuable feedback on our interactive prototype in Figma. Our mains insights were:
Merge two steps for a quicker flow
Step 2 calculations could be integrated into Step 1 with real-time column updates
Add filters and "sort by" functionality in Step 1
To align with the issuer's email format
Incorporate micro-interactions for more trust
Toasters, confirmation modal and a fake loading screen to convey more security and peace of mind four our users
Solution
By the end of the project a new workflow was designed, tested, and shipped to reduce the number of steps, making the process faster, more efficient, and more user-friendly. This new system ensured that the process was no longer dependent on a few individuals and their personal files.
