.png)
.png)
A new-age banking experience adapted to the needs of entrepreneurs that is efficient, attractive and affordable.
At Qonto I am designing expense management features, like the one in this project, focused on enhancing the banking experience.
Qonto wanted to integrate a Bookkeeping offering in their product as a way to generate more revenue and upsell customers. They estimated that a bookkeeping offering was worth a €30 bump to the next pricing bucket.
As companies on Qonto grew, they would start to invest in external bookkeeping tools to manage their transactions, instead of doing so on Qonto. Qonto didn't have complex bookkeeping tools, which meant users weren't motivated to document information on Qonto or willing to upgrade to more extensive plans.
This meant that other useful features for documenting and tracking expenses on Qonto were also being undervalued. Qonto estimated that a bookkeeping offering would increase the usage of these other tools, and thus create added revenue.
The average usage of the receipt collection tool on Qonto, an average of 12 uploads per user per month. Very low given the 1000s of transactions.
The experience of reviewing transactions on Qonto didn't serve the bookkeeping needs of our users, and were not up to par with our competition.
.png)
Images from left to right: Limited filtering, missing transaction information, no validation option, no reviewing on mobile
To understand how Qonto wasn't cutting it, and what our users preferred, the product team and I conducted interviews and observed how our users currently use Qonto. We spoke to:
Their role is to ensure that company transactions have all the required information and are "safe" to be exported for accounting. They review 100s-1000s of transactions on a weekly or monthly basis.
Must upload all transaction information to ensure that financial managers have everything they need. They primarily use Qonto to upload receipts.
Financial manager explaining her review process, which is unchanged week to week but tedious to configure over and over.
Here were the main elements our users expected from Qonto's bookkeeping solution:
"When I'm connecting to Qonto, I want to see if I have any transactions to review in order to take action and estimate the amount of time required for the work."
"As a CFO, I must be able to create my own workflow, showing a clear status of my transactions and those requiring an action."
"When I have reviewed one transaction, I want to pinpoint this transaction easily so that I don't need to go through this transaction again."
"When I'm reviewing a batch of transactions, I want to take as little time as possible and avoid annoying and repetitive tasks. Also, I want to see the value of each transaction when reviewing the receipt."
To do this, we focused on:
Providing better filtering possibilities:
Saving filter combinations into views:
.png)
Before exploring any designs concepts, there was information we needed to look into.
Reviewing our compeition brought three main takeaways:
1. Clear workflow
2. Mark a transaction as reviewed
3. Quickly navigate transactions
The PMs and I met early on with the product marketing (PMM) team to strategise how this feature should be displayed in the app. We ensured that the design could be easily marketed and fit into the PMM product vision.
I met often with the tech team from the beginning of the project to challenge and collaborate on ideas. This also gave the tech team ample time to create proof of concepts that would help us dig deeper into possible solutions.
I worked closely with another designer to evaluate what existing patterns we could re-use. When building the filters from scratch, we collaborated with our Design Systems expert to sure the designs could be adopted in to our design system.
.png)
Qonto was scaling fast and the company was releasing several features on a bi-weekly basis. That meant that the UI was quickly becoming overloaded, and we needed to ensure that our feature didn't contribute to that problem. Our design explorations focused on:
We realized that we could lean on micro-interactions to show users feedback without adding too much to the UI.
Copy played a huge role when defining the UX of filter presets, verification workflow, labeling, and more. One big challenge was how we wanted to name our verification button, while taking into account different languages. We explored:
.gif)
Design and solution challenges from the Product design team helped us tweak and improve the feature to create higher quality experiences. Design challenges also ensured that designs and expectations were aligned across the product for all designers.
I collaborated with the copy team to test initial concepts of the experience and get feedback about the quality of the feature. We conducted usability testing using Maze, a remote user testing tool, and gained insights about how users were interacting with the prototype.
After, we evaluated and improved the feature based on:
We also interviewed users 1-on-1 and gained insights about:
After defining the concept we passed through a few rounds of solution challenges and got the project approved by our CPO and lead designer. Then, we moved on to finalizing the specs that would be delivered to development.
Providing better filtering possibilities:
We also made the filters into an overlay to avoid losing horizontal space in the table.
We added customization:
.png)
We improved the verification process by adding:
.png)
Finally, users could now verify transactions from their Qonto app while on the go. They could:
The success of this feature is being measured in three significant ways:
The goal is to see in an increase in upgrades from lower paying plans to more complex, high valued plans. We are observing to see changes.
This feature is intended to encourage greater documentation on Qonto, and therefore we will have succeeded if users begin adding more receipts and other transaction information to Qonto.
We are waiting to see results on three main feature trackers:
.png)
Engineers: Frantz Gauthier, Sabin Hertanu, Pericles Theodorou
Product Manager: Pierre-Geoffroy Pasturel, Thomas Brach, Maxime Champoux
Design Team: Allison Kapps, Dean Siriščević, (and the rest of the incredible design team)
UX copy: Clara Perrot
