Case Study: A friendly bookkeeping app for SMEs and freelancers
Tired of having always piles of paper on your desk?
💭 What is this about?
So, I arrived almost at the Ironhack UX/UI Bootcamp end.
As you can imagine huge pressure.
Just joking, besides the normal pressure, this has been a really interesting project to work on with my newly acquired skills.
I had the chance of being paired with my colleague Maximilian Stoll to work on this 9-days Design Sprint to design an end-to-end MVP iOS native tracking app called Expé.
We used: Notion for project management tasks and Figma for every visual component and whiteboard tasks.
Following, a short read about the process for the design and what happened in these 9 (and something more) days.
👀 Deciding the topic
After some nice ice-breaker talk with Maximilian, we started thinking and taking into consideration which option would have been interesting for us to go through.
We both have two different background, but we’re constantly in contact with SMEs, freelancer colleagues, and hobbyists and we wanted to create something to help our users with an important task:
business and personal finance management.
👥 Empathize: know your audience
📊 Quantitative Interviews
First, we wanted to know more about who are those we’re designing for and what are their habits when it comes to personal financial management.
We initially excluded those who have no absolute (direct or indirect) experience with generating their own invoice — the base for business bookkeeping.
We opted for creating a quick but well-addressed Google Survey that provided us with the following information out of 20 surveyed individuals.
- They use Microsoft Word or Excel to generate & produce invoices
- They mostly get paid via Bank Transfer
- 70% find that keeping track of their own expenses is extremely important.
- They keep track of mostly forecasting, budgeting, and generally, as a good practice.
- Most of them use Banking Apps to keep track of the expenses, the rest are using spreadsheets, tracking apps, and last but really interesting:
they note them down on paper.
🗣 Qualitative Interviews
We scheduled open-question interviews with 6 people with experience as self-employed, business owners, or simply, doing side jobs where it was required them to generate invoices.
We kept the conversation really open and spontaneous and as expected, this brought us really useful and unexpected insights that validated our findings so far and gave us a really important help for our defining phase.
We want to share with you the most interesting quotes from our qualitative interviews:
“Don’t be a freelancer, paperwork is too complex.”
“I like automated features when it comes to finances.”
“I need an easy-to-access dashboard to have a clear overview of my finances.”
“I can be bothered to do invoices and I end up leaving it to the last minute.”
We started to have a more clear overview of whom we were designing for and what they would need from this mobile app.
👤 Our User Persona: Alex
We understood that our priority was to know exactly who we were going to design for: a combination of the findings & insights so far — our user persona.
Alex gave us a key to identify issues and stay focused on our goals.
🏗 Define: identify the problem
After identifying where the possible design opportunities were, we proceeded with defining independently which were the How Might We statements that seemed relevant to us.
We then proceeded in combining them and obtained:
HMW create a system that allows SMEs to effectively and confidently manage and keep track of invoices, payments, expenses, and taxes?
HMW creates a system that saves SMEs ’ resources by automating basic tasks and processes?
HMW makes SMEs be in control and knowledgeable about their financial situation before, during, and after?
Nice, at this point, being satisfied with the new HMWs, we felt safe with going further and defining:
The problem statement
Busy SMEs need to find an efficient system to keep up with their financial situation on the go, while effortlessly tracking expenses and gaining a clear overview of their financial situation
The hypothesis statement
We believe that providing SMEs with a friendly and effective all-in-one solution that allows them to customize their process of tracking and maintaining clear financial records, in order to gain confidence over their bookkeeping. We know that we are right if we see an increase of 15% in mobile-app users.
🚩 Market analysis
We decided to analyze 4 bookkeeping apps — differentiating them on their features and value proposition and creating a spreadsheet with the details.
This validated our direction and gave us a helpful insight into what we should have looked for in our Minimum Viable Product.
💡Ideate: MOSCOW, Use Case, Lo-Fi Sketches
We opted, therefore, to follow the MOSCOW method to define and prioritize what feature Alex would need from the app.
The MOSCOW process was followed while writing down and defining 3 use cases (one per each feature category) for our user persona — for this design sprint (and also based on our survey) we decided to focus on the Expense submission side.
Expenses
Alex is on a custom job for a small business.
Need to buy some acrylic color for the specific piece of the artwork.
Only a shop has it. Need to bike all through the city to get to the shop.
Alex stops on the way to have a snack.
Not to forget about the expense, immediately shot a pic and record the expense.
After the shop, goes back home and starts working — the receipts are getting lost in the mess of their room (or pockets). But the expense is duly recorded.
🛠 Prototyping and Testing: Lo-Fi & Mid-Fi
We started sketching to brainstorm and put on paper the task we decided to analyze for this sprint.
After testing it and gathering feedback on the simple lo-fi, we decided to build quickly the Mid-Fi to test and iterate as much as possible and have satisfactory results due to the complexity of the task.
We found out that the burger menu icon, the button on the bottom-right were particularly confusing.
Iteration Results
- The burger menu is confusing;
- The icons are a bit unclear;
- Buttons are changing a bit too much;
- Categories don’t need a pop-up screen dedicated — not to break the data insert flow for the invoice.
🖌 Let’s go into UI!
At this point, we had a nice starting point to get into the visual part of our project.
I’m gonna show you, how we got to the Hi-Fi Prototype through:
- Visual attributes Mood boards & Survey Results
- Style Tile & Visual Attributes
- Components & Atomic Design
- Final Result
With Alex in mind, we defined which visual attributes our app would have.
• Friendly
• Honest
• Creative
• Uncomplicated
• Professional
Sounds cool, no?
We then created 4 mood boards based on the attributes above.
We surveyed 21 people, giving them about 12 terms and asking to choose the 5 which better represent
Here, it’s where we encountered our first blocker.
To be honest, I wasn’t a huge expert on mood boards, but slowly getting there!
It’s important to insert different elements inside and when surveying, to use fewer terms but more diverse.
From the survey, we realized that even though the “Light” mood board had the most of the votes, the difference was really small — so we decided to take also the elements from the “Dark” that was relevantly similar.
Illustrations, smooth shadows, a playful and friendly combination of icons, and a deep cyan as the main colour will be the main element for our style tile.
As you can see here below, we started working keeping in mind the Atomic Design workflow–it allowed then to quickly convert our style tile elements into usable elements for our Hi-Fi Prototype.
👇 Hi-Fi Prototype
As you can see here on the left, we included the following features in our MVP:
• Main Dashboard
• Project Dashboard
• Expense Scanner, Adjustments, Tooltips
• Expense Categorisation and Submission
• Updated Dashboard
🔑 Key Learnings
We arrived at the end of our 9-Days Design Sprint, and we realized that the topic is really wide and requires particular attention and some more time to deliver a more complex and complete product.
Nonetheless, this has been a really exciting experience that teaches us a lot:
- Diversify the range and content of mood boards to develop stronger results.
- Create a clear and concise roadmap, to ensure an efficient process.
- Detach yourself from your personal preferences to avoid blockers and move forward swiftly.
- Notify and interact with the user.
- Highlight negative information.
- Keep it simple.
⏭ Next Steps
In the future, of course, when the Ironhack course is finished — would be nice to go back on this project and focus on these tasks:
- Start implementing and add additional features, especially in regards to content navigation.
- Design and develop an onboarding session for new users.
- Analyze and assess API integrations with third-party service providers.
- Polish MVP and improve micro-interactions.
- Proceed with desirability testing and amend the MOSCOW method accordingly.
Thank you for reading! 👍
That’s it so far, and hope you have found this case study interesting as I did working on it. :)
Ciao!
