An invoicing solution for small businesses

SwyftInvoice is a mobile app designed to streamline the invoice process for small service-based business owners. With its simple invoice creation process and multiple automated tracking options, it helps users decrease the time spent on sending and tracking invoices.

While many small service-based business owners send invoices digitally, they usually rely on manual processes such as spreadsheets for tracking and monitoring. This process is time-consuming and can cause costly errors. There is a need for a more efficient means of sending and tracking invoices.

At the core of this project is the goal of creating an app that provides a faster, more effective means of sending and tracking invoices. This app will help service providers automate the invoice tracking process and reduce the time spent on invoice management.

This case study was an independent project for the Google UX Design Certificate. Therefore, I was the UX Designer responsible for the entire process: User Research, Problem Definition, Design Ideation, Wireframing, Prototyping, Usability Testing, and User Interface Design.

January 2024 to March 2024

Context

Small business owners need timely payment.

Small service-based business owners can attest to the importance of invoice management. It is essential for maintaining a healthy cash flow while keeping accurate records of sales and transactions. The frustration of not knowing if or when a client has paid an invoice is one to which many small service-based business owners can relate. Consistently following up with clients about payments takes a toll and shifts the focus from income-generating activities. Therefore, they need a solution that will enable them to decrease the time spent sending invoices and manually tracking payments.

My process

A multi-stage iterative process

I employed an iterative design thinking process throughout the conceptualization of the SwyftInvoice app. Therefore, I always prioritized user needs while designing the product.

Empathize with users

Early insights into what users need

Target users: Small service-based business owners aged 20 to 50 who send invoices to clients.

Before brainstorming solutions to this design challenge, I interviewed four potential users who matched the target demographic. The purpose of these interviews was to:

• • Understand how small service-based business owners currently send and track invoices.
  • Understand common challenges and frustrations they face when sending and tracking invoices.
  • Understand what will make sending and tracking invoices easier for small service-based business owners.

Because I asked open-ended questions, participants elaborated on their experiences and pain points with invoicing. This type of interaction was necessary to fully understand potential users’ perspectives and needs. These valuable insights informed the design process to ensure the app was intuitive and user-centered.

I transcribed each interview and built empathy maps to distill what I learned about my potential users in an easily digestible format. Empathy mapping was a valuable exercise that caused me to observe common pain points.

I learned that:

Users need a way to ensure that the details in their invoices are accurate.

Users should be able to use the software even if they are visually impaired.

“It would be great to have a centralized platform where I can easily send, track, and manage all our invoices in one place.”

My understanding of the potential users’ needs allowed me to create the following persona.

I wanted to narrow my focus on the persona’s point of view, so I created the following user story for Aaliyah:

As a marketing consultant and the mother of two children with hectic schedules, I want to get automated reminders about invoice due dates and payment transactions so I spend less time worrying about tracking invoices.

I then created a user journey map to document the sequence of events Aaliyah undertakes to find an invoicing system that saves time by sending automated reminders about due dates and payments. This process allowed me to understand where my solution would fit in the day-to-day experience of running her small business.

Define the problem

How can SwyftInvoice address users’ needs?

After interviewing and empathizing with users to identify their pain points, I needed to define the most significant problems or needs the SwyftInvoice app would address effectively or uniquely that would create value for users.

I used the 5Ws and H framework to create the following problem statement for my persona:

Aaliyah is a busy marketing consultant who needs a faster, more effective way to send and track invoices because manually tracking invoices takes up too much of her time and can cause her to make errors.

Now that I had a vivid understanding of the main problems my product needed to solve, I started brainstorming possible solutions. I formed the following hypothesis:

If Aaliyah uses an app that sends automated notifications about due dates and payments, she can reduce her manual workload and manage invoices more effectively.

My thinking then shifted to determining the tangible ways the SwyftInvoice app will meet and exceed users’ expectations. I brainstormed a list of potential features and benefits of the product and matched them with the actual user needs that emerged from the research. Addressing Aaliyah’s needs as a busy marketing consultant who requires a faster and more effective way to send and track invoices meant that the app needed to incorporate several key features and benefits. These are the value propositions of the SwyftInvoice app:

• • • User-friendly interface
    • Quick invoice creation
    • Invoice previews
    • Late payment reminders
    • Client database
    • Payment gateway integration
    • Template customization
    • Screen reader compatibility
    • Offline access

Ideate design solutions

Generating ideas to solve users’ problems

With the insight I gained from empathizing with users through interviews, empathy maps, personas, user stories, and the user journey map, I felt ready to focus on the scope of my designs.

I devised the following goal statement to describe my product and its benefits:

Our invoicing app will let users automate invoice tracking which will affect busy small business owners who previously manually tracked invoices by reducing the time and errors involved in the process. We will measure effectiveness by the number of on-time payments received per month.

Since I understood the user’s challenges and emotions when sending and tracking invoices, I wanted to examine existing solutions to the problem to determine where my product would fit in the market.

Therefore, I audited two direct (Zoho Invoice and Wave Invoice) and one indirect competitor (Dubsado) to analyze their strengths and weaknesses and identify gaps in the market. These were my findings.

I identified the following opportunities that SwyftInvoice could capitalize on:

• • • Offer a free trial and paid plans with tiered features and customization levels.
    • Design a clean but captivating visual identity that reflects the industry and aids the user experience.
    • Create a product that has both robust invoicing and business management features.

This understanding of the competitive environment and my earlier empathy work led me to start generating a wide range of ideas that would lead me to possible design solutions to the user’s problem.

I used the How Might We exercise to brainstorm possible solutions for the invoicing app.

• • • How might we make the invoicing process less stressful for small business owners?
    • How might we help small business owners reduce the time spent manually tracking invoices?
    • How might we automate the tracking process?
    • How might we help business owners ensure that the details of their invoices are accurate?
    • How might we integrate invoicing with their other business processes?

I then proposed the following user flow that outlines the path a typical user will take on the SwyftInvoice app to achieve the goal of sending and tracking invoices.

After creating big-picture and close-up storyboards to visualize the user’s experience with SwyftInvoice, I outlined the information architecture and created a sitemap for the app.

With the main user flow and sitemap in mind, I drew paper wireframes to outline the intended functionality of the SwiftInvoice App. I iterated on these paper wireframes until I was satisfied that they accomplished this goal.

Considering the users’ busy lifestyles, I wanted the home screen or dashboard to allow users to initiate the invoicing process while having an overview of their recent invoices and payments. Therefore, the bottom navigation bar will have a central “New Invoice” button. Users could also access key screens such as a client listing, invoice overview, and settings from the bottom navigation bar. I also wanted the screens for the primary user flow to be as simple and intuitive as possible to ensure that the invoicing process was seamless for users.

I used Figma to transition from paper to digital wireframes to pay more attention to the details comprising the invoicing app and prepare the product for low-fidelity prototyping and the first round of usability testing.

Usability testing

Understanding how users interact with the low-fi version of SwyftInvoice

I then planned a research study to determine how users use and perceive the product. I conducted an unmoderated usability test with six small service-based business owners who fit the demographic profile of the invoice app’s potential users. The usability test had two goals:

1. 1. To determine if users could complete the main user flow within the prototype of the invoicing app.
   2. To determine if the invoicing app was easy to use.

After interacting with the prototype, the participants completed a System Usability Scale to rate their experience. They were asked to answer each question on a scale from 1 (strongly disagree) to 5 (strongly agree). These are some of the responses:

The participants shared a lot of commentary about their experiences with the prototype, so it was necessary to organize the data to find patterns and themes. I created an affinity diagram to categorize the data and gain a clearer picture of the user experiences.

“You don’t have to search for anything if you just want to get an invoice to a client quickly.”

Some key themes emerged from the data, allowing me to develop actionable insights. I prioritized these insights to improve the design to create a better user experience.

Priority 0 insights

1. The option to create an invoice from the bottom navigation is difficult for some users to find.
2. Most users need to understand what automated tracking means and how it will benefit them.
3. Some users need larger navigation buttons.

Priority 1 insights

1. Some users need to be aware when tracking is enabled.
2. Some users are unfamiliar with the term “dashboard.” 

My solutions

• • • Add a more prominent “New Invoice” button on the home screen that users can find easily.
    • Refine the automated tracking feature and use more user-friendly language to describe it.
    • Ensure that the navigation buttons are accessible when the high-fidelity mockups are designed.
    • Add a checkbox so users can be aware when tracking is enabled.
    • Use “home” to describe the dashboard because it is more familiar to users.

This first round of usability testing showed me that I needed to make some iterations to ensure users have a more enjoyable experience that solves their problems.

Iterate on low-fidelity designs

Making research-based design changes

I used the insights from the usability study to iterate on my low-fidelity designs.

Create high-fidelity prototype

Designing a visual identity for SwyftInvoice

Before creating high-fidelity designs, I needed to give the SwyftInvoice brand a visual identity. I wanted the visuals to represent the brand’s values: speed, efficiency, and effectiveness. The user interface needed to be simple, minimalist, and free of unnecessary distractions to ensure users could quickly complete their tasks.

After designing the logo, I created a style guide to ensure I followed a consistent standard when I designed the mockups.

I used Figma to create high-fidelity mockups of the main screens to prepare the SwyftInvoice app for high-fidelity prototyping and a second round of usability testing. 

Second round of usability testing

Testing the high-fidelity prototype

I replicated the research study from the first round of usability testing to determine how the participants would interact with the high-fidelity prototype. I was interested in hearing their opinions about the overall user experience and the features of the SwyftInvoice app. The participants were required to follow a series of prompts that would enable them to create an invoice, set up automated reminders, and send it to a client hypothetically. They would then proceed to answer a System Usability Scale survey.

These images show the responses when participants were asked to rate their experiences from 1 (strongly disagree) to 5 (strongly agree).

As the data indicate, there was an increase in positive perceptions of the high-fidelity prototype compared to the results of the first usability study. All users found the prototype easy to use and navigate at this stage. However, three key insights emerged from this round of usability testing:

1.  Some users wanted the option to bypass the automated reminders feature.
2. Some users wanted the option to limit the number of reminders that the app would send to a client.
3. Some users wanted to set up recurring invoices automatically.

My solutions

• • • Add a button that enables users to proceed to the invoice preview screen without setting up reminders.
    • Add a drop-down in the invoice reminders screen so users can limit the number of reminders the app will send.
    • Add a toggle in the invoice reminders screen for users to indicate if the invoice is recurring and add a drop-down so they can set its frequency.

Iterate on high-fidelity designs

More research-based changes

I made the following iterations based on the insights from the second usability study.

Finalize designs

An invoice management solution for small service-based business owners

Now that I was satisfied with the potential users’ perception of SwyftInvoice, and made iterations to the designs based on their insights, I added some finishing touches to the user interface.

The following is a walkthrough of the final designs.

Welcome to SwyftInvoice

After the splash screen introduces SwyftInvoice, users can log in or sign up for the app.

Welcome home

Once users have successfully logged into SwyftInvoice they will have access to a home screen that provides valuable information about their business.

Create an invoice

This screen allows users to fill in all the details needed to create an invoice.

Set up automation

Users no longer have to worry about manually tracking invoices with SwyftInvoice’s automation features.

Preview your invoice

To ensure the details in the invoice are accurate, users can preview the invoice before it is sent to the client or saved as a draft.

Get notified about payments

SwyftInvoice sends real-time notifications to users once a client has paid an invoice.Users can then send a personalized message to the client if they wish.

N.B. Users can go to automation settings to create an automated thank you message to send to clients.

Money management for small service-based business owners

SwyftInvoice helps small business owners understand their revenue. This feature is a significant step in cash flow management. 

Integrated client management features

SwyftInvoice allows small service-based business owners to keep records and maintain healthy client relationships.

Personalize your experience

Manage preferences and settings to enhance your experience with SwyftInvoice. 

Navigate through the app

Users can navigate effortlessly through SwyftInvoice to accomplish their goals of sending and tracking invoices.

Accessibility considerations

I designed SwyftInvoice with accessibility and inclusivity at the forefront to ensure that the app provided an equitable user experience to everyone, regardless of abilities or disabilities. I prioritized simplicity and perceivability throughout the design process. These are some measures I employed to ensure that SwyftInvoice is accessible to a wide range of users.

• • • I used the WebAIM color contrast checker to ensure that there was always adequate contrast between text and background.
    • I used text labels in addition to color to convey invoice status information.
    • I maintained consistent placement of buttons in the main user flow.
    • I wrote its copy using clear and concise language for users to understand easily.
    • I used appropriate font sizes and maintained a consistent hierarchy throughout the app.
    • I tested the prototypes with a diverse user group that included neurodivergent participants.

Though beyond the project’s scope, the goal is for SwyftInvoice to be compatible with assistive technology such as screen readers and voice control systems to ensure that users with visual and other impairments can have an equally enjoyable experience.

Reflection

This case study presented an exciting opportunity to apply the UX design principles from the Google UX Design Certificate to solve a problem affecting many small service-based business owners. I was pleased by my ability to understand the potential users’ pain points and integrate their feedback into the design process to create a product that better suited their needs.

This project was not without challenges. I needed to maintain focus on the primary problem and solution consciously. Despite numerous potential features that could add value to users and create a competitive advantage for SwyftInvoice, the project demanded concentration on the core issue: the efficient sending and tracking of invoices.

I learned valuable lessons throughout the process. Iterative design and continuous improvement proved essential, emphasizing the importance of user research and feedback. The evolution of the invoice automation screen exemplifies this iterative approach.

Furthermore, attention to detail emerged as a critical aspect of this project. While the mantra “done is better than perfect” often prevails in the design field, my meticulous nature benefited the creation of SwyftInvoice, ensuring a polished product of which I am proud.

In the future, I intend to create a landing page for the SwyftInvoice brand to align with company objectives and attract users. I will also design a desktop version of the software. As I continue my UX design journey, I intend to demonstrate a continued focus on accessibility and inclusivity in future design projects.

“Everything was seamless. You thought about the entire process and incorporated it into every step.”