Project Overview
The goal of this project was to develop an accounting tool specifically tailored for small businesses. The tool was designed to have the capability to create invoices, efficiently manage expenses and employee reimbursements, as well as organize tax forms, providing comprehensive financial management solutions.
Design Process
User Research
With a general outline of the different modules in mind, we conducted user research to delve deeper into understanding the user workflows for our target audience. Since our primary user base consisted of small businesses that frequently interacted with other small businesses, we recognized the importance of incorporating estimate/quote creation before sending invoices. To gain insights into how bookkeepers of small businesses managed estimates, invoices, and expenses, I dedicated time to observe their workflow and understand their specific needs and challenges.
Designing the Information Architecture
To gather insights and input from various stakeholders, I facilitated a card sort workshop with team members. During the workshop, I instructed them to group the cards in a way that made sense to them. Additionally, I conducted the same activity with our company accountant and the bookkeeper I had previously interviewed. While there were evident patterns emerging from the card sorting exercise, there were also certain cards that didn't seem to fit into any specific groups. Based on the outcomes of these workshops, I developed an initial iteration of the Information Architecture for the tool.
Recognizing the need to structure each module effectively, I observed that certain pieces of information within the application were relevant across multiple modules. To address this, I employed the principles of atomic design, utilizing the concepts of "molecules" and "templates". I created a set of cohesive components and reusable elements, ensuring consistency and efficiency in the design. This approach allowed for greater modularity and facilitated seamless integration of shared elements across the application's modules. Here's an example of what I did for the Invoice module.
Aligning with Stakeholders
Designing the information architecture for both the main navigation and individual modules involved extensive collaboration and iteration with stakeholders. To ensure the effectiveness of the navigation design, I conducted multiple rounds of user research to gather feedback and validate the proposed structure. Additionally, I created low-fidelity mockups to visually represent the user flows and demonstrate the intended interactions. This iterative process helped refine the design and ensured that the final solution aligned with the needs and expectations of the users.
Designing the Prototype
The invoice module was one of the initial modules that received complete validation and approval from stakeholders. Here's the prototype of the module.
During the development process, I simultaneously worked on creating a mobile experience specifically for the expense module. Although our application was primarily designed for web usage, user interviews highlighted that individuals commonly capture bill images using their smartphones. Consequently, it became clear that incorporating an expense workflow on mobile was crucial to meet user needs and expectations. Here is one of my initial prototypes for mobile
Next Steps
Throughout the development process, the application underwent several rounds of validation and prototyping. One of the significant challenges encountered was aligning with stakeholders and ensuring their satisfaction. To address this, I consistently applied the principles of atomic design, which greatly aided in structuring the other modules and streamlining the prototype design process. Employing low-fidelity wireframes proved invaluable in effectively communicating user flows and gathering feedback from stakeholders. Once we achieved alignment among all parties involved, designing the final prototype became a relatively smooth and straightforward task.