I designed a mobile banking app as part of a two-person team. It's an alternative to the bank's primary personal banking app, built specifically for small business owners, but equally useful for solo entrepreneurs and medium-sized companies. Transactions, invoicing, analytics, payroll and more, all in one place.
This case study focuses on the invoicing feature - a core part of keeping any business moving forward.
While grounded in professional design practices, specific details of this Case Study have been modified to protect confidentiality.
3 months (2022-2023)
Portfolio Adaptation of Commercial Project
Mobile ( iOS & Android )
Desk Research
User Flow
Wireframes
Prototype
Mockups
Designed complete journey from creation to summary
Downloads on Google Play
To design an invoicing system that reduces the time-consuming paperwork for small business owners while maintaining financial accuracy and compliance
First step was to gather business requirements from client. As an established bank representatives they had a clear vision of requirements needed for invoicing, but they also left enough space for design explorations.
Interviews were out of scope for this project, so I conducted my own research, based on available information about invoicing and competitor analysis, which I concluded in creating high-level user journey map.
Based on my research findings, I created a user flow for the invoicing feature. The flow maps the core path users would go through in order to create new invoice. Once confirmed with the client, the flow served as a base for creating wireframes.
I created wireframes that covered the entire invoicing flow, from the dashboard view to the summary screen. I combined them into a prototype and handed it off to the designer responsible for conducting usability testing. At that stage, the application had an established component library, so the wireframes were fairly high fidelity.
I see I'm in the incoming tab, but I probably wouldn't be interested in paid invoices. How do I just see the ones that are overdue?
We conducted eight moderated usability testing sessions with participants representing our target user segment. The wireframes included only the core functionalities, so in addition to verifying the design, a significant part of the testing focused on uncovering users' expectations for the invoicing feature.
The main insight from the interviews was the need for additional filters beyond the existing "incoming," "to-pay," and "all" categories. Participants had different needs for searching specific invoices, some prefered to look by client name, others by time period or payment status.
I added additional filtering options in final mockups, allowing users to refine their views based on time period, payment status, client name, invoice number, min-max amount and currency. Multiple filters can be applied at the same time, with option to clear them on main invoicing dashboard.
The rest of the flow was also enhanced based on user feedback. Some additions include option to include notes while adding items and additional tags for items quantity in the summary view.
This project allowed me to grasp the complexity of creating an application with multiple features, containing dozens of user journeys. While creating the invoicing feature, which was one of the last added to the application, I learned about how design decisions made a few months earlier affect the design that is being added as the application grows.
The most valuable lesson was the importance of considering future expansion during early design phases. Several elements of the navigation system created constraints that required creative solutions when incorporating the invoicing functionality.
