The Problem
Many small business owners find the current expense receipt submission process to be stressful and time consuming, while the accountants and bookkeepers receiving the receipts are frustrated and overworked when it comes to client communication surrounding receipts.
The Solution
An expense receipt uploading feature that streamlines and speeds up the submission process, as well as consolidates all relevant communication between business owners and accounting firms.
To Rewind…
I started working as a Product Designer at Qwix in October 2022, as the company’s first hire. Qwix is an early-stage startup working on an a SaaS product for Israeli accounting firms and their small business owner clients.
This case study follows my design process when designing the first feature for the MVP: the business owner-facing expenses feature. Intertwined in that process where foundational activities such as general discovery research, design system management and overall product strategy.
Continue reading to learn about my design process ⤵️
No Pain No Gain
The first thing I did when joining the company was get acquainted with the subject matter- Israeli taxes and bookkeeping standards as they apply to small businesses (I wrote more about that experience here).
For the purposes of understanding this feature, here are two things to keep in mind:
The business owner is responsible for making sure they generate and receive the proper receipts, but most business owners turn their receipts over to accounting firms so that they can handle all of the reports and payments to the government on the business’s behalf.
🙁 Despite the fact that submitting expense receipts saves the business money, most business owners we had casually spoken to had shared that this was an annoying and stressful part of owning a business.
Our team felt equipped to tackle many of the steps involved in the receipt submission process, but this feature in particular was aimed at streamlining the process of the business owner uploading expense receipts to their accounting firm and communicating with them regarding receipt details.
Uncovering User Needs
Before jumping to solutions, we needed to better understand our users and the problems they were experiencing.
In the first round of research at Qwix, I tackled some foundational questions we had about user needs, behaviors and workflows, which not only informed this feature but also helped us shape our overall product strategy (If you want to hear more about the research in its entirety, shoot me a message- I’m a research nerd!).
I heard from and observed business owners, accountants and bookkeepers based in Israel, using the following methods:
I used topical grouping and affinity mapping to find themes in the research, and. then distilled my findings into the most critical insights. I then thought about how to translate those insights into overarching principles to guide the rest of the design process.
Insights → Design Goals
Balance and prioritization were critical to my mindset for this design process. The business model of the company pointed to the bookkeeper/accountant being the user we needed to solve for the most, but it was still very important to us to ensure that the business owner’s needs were being met. Designing the business owner side of this feature while keeping in mind (and sometimes prioritizing) the needs of the other users was challenging!
Four Minds are Better Than One
After presenting the research to my team, I facilitated a collaborative brainstorming session to generate ideas for solutions. This enabled us to get all of our wildest ideas out on “paper” and then narrow them down into categories and talk about the pros and cons of each.
Here’s a small snapshot of our brainstorming session:
User Flows and Design Patterns
In order to get a better understanding of how the user should move through the tasks involved in the uploading, managing and viewing a given receipt, I took a closer look at other products in the market to see how they do this.
I analyzed the flows and design patterns in these products to gain inspiration, and then circled back to the user needs we uncovered, our unique product vision and the technical constraints we were working with in order to decide on the appropriate flow and patterns - accounting for happy and unhappy paths.
Rapid Sketching
I sketched out multiple ideas for each flow and then multiple solutions for each screen. I then decided which designs would be most impactful yet feasible.
Before moving on the high-fi wireframes, I consulted our design system.
Collaborating on the Design System
The company decided early on that we would purchase a “ready-made” design system with a Figma library and corresponding React library to speed up the design and development process. However, I soon discovered that:
- The design system was built for English but our MVP was going to be in Hebrew.
- While the design system was built for a dashboard-style product, it needed to be tailored better to our exact needs.
- There was no documentation to go along with the UI library, so I needed to create standards for when and how components were to be used.
Deciding when it was worthwhile to make changes to the design system and figuring out the best way to track those changes were challenges I tackled head-on during this process.
Getting High-Fi
Since I had a design system to work with, I went straight from sketching to high-fi designs. During and after the first draft of high-fis, I shared the designs with the engineering team to get their feedback on feasibility and edge cases. Since this was the first feature being designed and built out in its entirety, this was a great to have early and preemptive discussions about things like micro-interactions, annotation preferences and what the developers did and didn’t need in a prototype.
Here’s a peek at how the research and guiding design principles translated into the high-fi mocks:
Data Table Design
One of the major elements of this flow was the data table, which needed to display information regarding receipts that had already been reviewed by the bookkeeper and enable the user to filter according to specific parameters.
I combed existing dashboards and design systems, scoured a wide range of articles about best practices and consulted with several other complex systems designers in order to help me iterate on the data table until it was ready for that first round of usability testing.
Iterations, User Testing, More Iterations and… Implementation!
After a few rounds of getting feedback on the designs (from dev and a more experienced designer), I did moderated usability testing on several users. I mapped out the results and then prioritized the changes to be made based on how impactful they would be vs. how much effort they would require.
After iterating on the designs, it was time for the engineering team to implement them. I worked together with the engineers to ensure that the designs were implemented perfectly, down to every pixel and micro-interaction.
Here’s a peek at how I annotated my designs for the developer:
As the engineering team worked on the designs, I communicated with them daily to get updated on their progress, review elements to ensure alignment with the original designs and collaborate on solutions as various edge cases and technical considerations came up. I was lucky to work with phenomenal engineers who care a lot about UX - many of the modifications were a product of fruitful collaboration.
See it in Action
Looking Back & Ahead
The product has not yet been released, but it’ll be exciting to see how this feature fairs in the hands of real users. Whenever the product is released, we’ll measure user behavior and satisfaction carefully to ensure that we are solving the right problems with the right solutions.
Every design process is also a learning process, and this one was definitely no exception. Here are a few things I learned:
⚖️ Balancing the needs of multiple user types within a complex system is challenging, but it’s the kind of challenge I thrive on.
🏎️ Pre-seed startups are constantly refining their vision and roadmap, so flexibility is important.
🔍 Putting in effort to understand the industry your designing for pays major dividends (fintech joke intended 😉).