A new-age banking experience adapted to the needs of entrepreneurs that is efficient, attractive and affordable. At Qonto I designed expense management features focused on enhancing the banking experience.
THE PROBLEM
Qonto wanted to be more than just a bank
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.
Bookkeeping features were missing
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.
Low usage of expense management tools
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 ROOT CAUSES
There were no bookkeeping tools or workflow
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.
- Filtering for specific transactions was limited and repetitive: The filters forced users to create multiple search queries over and over, each time they wanted to review.
- Reviewing took a lot of time: When comparing against receipts, the right transaction information wasn't available.
- No validation: There was no way to indicate that a transaction was reviewed and didn't have to be looked at again.
- Reviewing was web only: CFOs in particular wanted to review on the go, as reviewing was a menial process.
USER INTERVIEWS
Our aim was to understand how to bring bookkeeping to users
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:
Financial managers / CFOs
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.
Collaborators / employees
Must upload all transaction information to ensure that financial managers have everything they need. They primarily use Qonto to upload receipts.
USER PREFERENCES
Users had 4 main bookkeeping needs
Here were the main elements our users expected from Qonto's bookkeeping solution:
A summary of transactions to review
"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."
Custom workflow steps
"As a CFO, I must be able to create my own workflow, showing a clear status of my transactions and those requiring an action."
Transaction triaging
"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."
Frictionless and efficient review
"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."
THE CHALLENGE
The goal was to create a flexible and efficient bookkeeping workflow
To do this, we focused on:
1. Re-designing the filters
Providing better filtering possibilities:
- Filtering as a group (AND /OR)
- Filtering with exclusions (IS/IS NOT, Contains)
- Additional search categories
2. Creating custom workflow steps
Saving filter combinations into views:
- Re-use filters in the future
- View number of transactions per view
3. Improving the review process
- Adding relevant data to document review
- A "reviewed" stamp
- Reviewing from mobile
STRATEGIZING
Defining the approach
Before exploring any design concepts, there was information we needed to look into.
Benchmarking competition
Reviewing our competition brought three main takeaways:
1. Clear workflow
2. Mark a transaction as reviewed
3. Quickly navigate transactions
Product marketing
The PMs and I met early on with the product marketing (PMM) team to strategize 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.
Aligning with tech team
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.
Design System
I worked closely with another designer to evaluate what existing patterns we could reuse. When building the filters from scratch, we collaborated with our Design Systems expert to ensure the designs could be adopted into our design system.
EXPLORATION
Re-imagining the Qonto interface (without breaking it)
Qonto was scaling fast and the company was releasing several features on a biweekly 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:
Inventory of the existing UI
- What parts of the app would our designs impact (for ex: the filters)?
- How can we build on top of existing design system elements?
- What feature teams should we align on before making any changes?
Micro-interactions
We realized that we could lean on micro-interactions to show users feedback without adding too much to the UI.
Strategizing with copy
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:
- Mark as done (Marquer comme fini)
- Approve (Approuvée)
- Mark as validated (Marquer comme validée)
- Mark as checked (Marquer comme verifiée)
- Verify (Verifiée)
Design challenges
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.
User testing
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:
- Direct / Indirect success metrics
- Misclick rates
- Bounce / failures rates
- Average time to complete tasks
- Follow-up survey about the experience
We also interviewed users 1-on-1 and gained insights about:
- Future improvements
- Copy questions & issues
- Interpretations of how the feature worked overall
THE SOLUTION
Qonto's Bookkeeping Workflow Tools
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.
Filter re-design
Providing better filtering possibilities:
- Filtering as a group
- Defining AND /OR statements
- Filtering with exclusions (IS/IS NOT, Contains)
We also made the filters into an overlay to avoid losing horizontal space in the table.
Creating custom workflow steps
We added customization:
- Edit the names of saved filters
- Update the contents of a filter view
- Create new, edit, pin / unpin templates from the bar.
Efficient transaction review and verification
We improved the verification process by adding:
- A summary of the transaction (this previously did not exist)
- A button to verify directly from this view
- Navigation to quickly review all transactions
Verifying on the go
Finally, users could now verify transactions from their Qonto app while on the go. They could:
- Swipe left on the transaction
- Verify from the summary page
IMPACT
A powerhouse banking and expense management software
The success of this feature was measured in three significant ways:
1. Solo to Premium plan upgrades
The goal was an increase in upgrades from lower-paying plans to more complex, higher-value plans, and we observed movement.
2. Increase in receipt and bookkeeping documentation on Qonto
This feature was intended to encourage greater documentation on Qonto, so success meant users adding more receipts and other transaction information.
3. Usage
A sample of the feature-level metrics we tracked:
- Number of clicks on the "mark as verified" button
- Types of complex queries used in the filter
- Frequency and types of workflow steps saved
- Average number of documents uploaded per user per month
TEAM
Working together
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