Jesica Chu logo

Mindless Invoice

An Invoicing App for Freelancers on the Go

Overview

Overview

  • Role:
    UX Researcher, UI/UX Designer, Visual Designer, Presenter
  • Collaborators:
    Trini Nguyen-Don
  • Tools:
    Adobe XD, Illustrator, Photoshop, Pen & Paper, Google Docs
  • Platform:
    Mobile App
  • Timeline:
    Apr - Jun 2019 (part-time)
    Refined in Oct 2020

Background

Project management is about achieving all of the project goals and meeting criteria in a specified time within the given constraints. To effectively manage schedules, tasks, and overall data is essential to the completion of projects. Aside from executing the requested projects, freelancers need to be extremely organized and keep track of all other elements involved that include managing clients, payments, and overall admin tasks. As occasional freelancers, Trini and I decided to explore different options that could help freelancers out there to improve and simplify their workflow; therefore, we decided to focus on freelancers who are often on the go.


Problem

Unclear terms that lead to communication issues are a pain point for both freelancers and clients. Additionally, when freelancers take on new projects, top issues that then arise are administrative upkeep including invoicing and payments. Freelancers are always searching for their perfect invoicing software to help streamline and reduce the amount of time spent on accounting tasks so they can spend their time working on projects, getting paid, and keeping happy clients.

How might we bridge the payment process between freelancers and their clients in order to create a more seamless interaction?

Solution

We designed a mobile application to help streamline and reduce the amount of time freelancers spent on accounting tasks while easing their communication, invoicing, and management of clients so they can spend their time working on projects, getting paid, and keeping happy clients.

design solutions mobile app solution

My contribution

I co-designed the project with Trini Nguyen-Don and we both worked on the scope, research, and design. We both did research, user interviews, user flows, information architecture/site maps, quality assurance, usability testing, user personas, and presentation slides. Aside from the shared tasks, my responsibilities included sketching, wireframing, prototyping, visual design, interaction design, designing the style guide as well as presenting and demoing the project.

After the project finished, I did more research as well as refined the branding, user experience, and UI design to enhance the overall app. Aside from that, I wanted to continue improving my skills.

Approach

design process

Research

Market Research & Competitive Analysis

We started by researching what was already in the market while keeping in mind our assumptions regarding our target users - freelancers. Along with the market research, we did a competitive analysis of the most popular software on the market.

Assumptions

  • They are influenced by other to be productive
  • They use cafes, libraries, and other places as meeting and work locations
  • There’s a feeling of alienations for some freelancers
  • It’s hard to manage projects when they take too many projects
  • They use several apps and software for communication, invoicing, and payments
competitor logos
competitive analysis

Research

Interviews & Affinity Diagram

Then we conducted user interviews to learn how freelancers from different fields work, communicate, and track their projects. Unsurprisingly, most of them were having difficulty with invoicing and any type of interaction with clients.

We initially conducted 6 interviews but felt the data gathered wasn’t as valuable and complete as we anticipated. Therefore, we decided to update the interview questions and conduct 3 additional interviews.

interview questions

We then used the affinity diagramming method to really understand users' pain points so we categorized the different answers into similar groups to see what were the main areas that needed more attention.

affinity diagramming - pain points affinity diagramming - motivations and behaviours

User Needs

After both rounds of interviews, we analyzed the results and found out most interviewees had similar needs and pain points when it comes to freelancing despite the type of work they do. Mainly, their needs were in the categories of communication, management, and customization related to projects and clients.

  • Client communication and invoicing are the most challenging aspects to freelancing
  • Freelancers have a difficult time organizing their freelance earnings while having to balance multiple projects with inconsistent deadlines
  • The amount charged to a client can be subject to factors such as prior relationship or type of project which turns invoicing take too long and hard to create on the go
interview notes

Design Opportunities

How might we bridge the payment process between freelancers and their clients in order to create a more seamless interaction?


Based on the previous research and How Might We question, we identified several gaps between freelancers and their clients; however, the most common design opportunities we found include:

  • A single point of communication to track agreed-upon terms
  • A high-level overview that tracks both budget and projects
  • An easy invoicing system that freelancers can customize to suit their project needs

Personas

We created personas to help us with the process of creating an app that was focused on the user experience for different types of freelancers. Our personas age range between young adults and adults that have different goals in life; however, they do share a few similar motivations when it comes to freelancing.

persona one persona two

Design

Ideation

Designing an entirely new app and experience challenged us to brainstorm the app design, solutions, and features. We evaluated different solutions and sketched out a few user flows to get the ideas flowing. Then, we created an information architecture to organize all the information we had so we could focus on creating a user-centred mobile app rather than another invoicing app.

Design

Information Architecture

To get started with our solution, we jot down the main content we wanted to include. We then looked into how we wanted that information to be organized to make it easily accessible for users while providing better functionality to find everything they needed without too much effort.

information architecture

User Flows

With the information architecture settled, we came up with user flows and user tasks to help with the design of each interface screen. We established that each of our personas should have a task with a flow so we could use them to create scenarios and tasks for our usability testing sessions.

user flows

Sketches & Wireframes

At this stage, I sketched all screens that we needed and tested the flow on the low-fidelity paper version so we could make changes as needed before translating them into digital wireframes. At the same time, we generated scenarios for each of our user flows so we could do usability testing later on.

sketches for flow 1
sketches for Anna's flow
sketches for flow 2
sketches for Bradley's flow

User Feedback

I created the initial wireframes and conducted the first round of usability tests. Following that, I incorporated all feedback and iterated the design for our next round of tests while adding and enhancing the screens into mid-fidelity interactive wireframes to help better test the user flows. The updated version was shared with Trini to conduct further usability tests using both the Thinking Aloud and Observation methods to gather detailed insight. The Thinking Aloud method helped us gather users' thoughts and opinions of the app as well as write down anytime they encountered a problem or were confused at specific steps. Additionally, the Observation method allowed us to complement the former method by observing and writing down anything participants were doing but not describing.

Style Guide & UI Design

In the beginning, I developed a simple style guide to help establish consistency for the mockups and presentations. However, after a few rounds of prototypes and usability tests where the focus was on the user experience, I was able to spend more time iterating and crafting a new style guide for the mobile app. These helped enhance the mockups and the high-fidelity prototype as I was able to simply focus on the UI and visual design.

new style guide and ui design
new and updated style guide

Evaluations & Iterations

Usability Testing Process

We conducted a final round of usability tests with coworkers and friends who aren’t freelancers to test the ease of use for those who aren’t familiar with this type of software. Doing so, allowed us to gather multiple perspectives from non-freelancers who aren’t focused on testing software that they think works in a particular way. With the new feedback collected, I did another round of iterations to improve the screen design and user experience.

tasks

Evaluations & Iterations

Feedback & Design Iterations

Overall the feedback was positive as most users were able to complete the given tasks without problem. Certain tasks took slightly longer than expected as users were already able to complete the tasks and show the results but they were not confident with the visuals. That meant that some of the UI and UX had to be improved to make it simpler for users to understand what’s shown on the screen.

With that in mind, we iterated the dashboard design to make sure it’s as easy to understand as possible since this is the main screen as well as their quick overview when they are on the go.

interface iterations

Latest Design

A mobile application was created specifically for freelancers to ease their communication, invoicing, and management of clients. The app was designed based on the top pain points freelancers encounter, even with the vast alternatives in the market. Besides, there was a chance to take advantage of the time freelancers are on the go.

After a few iterations, I updated and improved the mobile app to reflect a better user experience with the use of UI interface and visual design.


dashboard, clients, and invoices
invoice with auto complete
invoice with overdue attached
client profile and invoices
hey! try me, i'm interactive :)

Results

In the end, I delivered a presentation and demonstrated our application. There was a lot of positive feedback, inquiries, and comments from everyone regarding the future of the idea because they were interested and wanted us to continue with the app so they could use it in the future.

Latest Design

Future Steps

There were still so many elements and steps we wanted to achieve with this project that we had to just pick a few of them to start. Ideally, I would like to continue working and improving the project to a point where I can make it functional to use it and hopefully ship it to an app store to help other freelancers. As of now, the next steps I would like to focus on are:

Further Usability Testing

Although we conducted a few usability tests, it would be nice to test it with real users and have them go through their usual workflow to see if there are gaps we missed or specific features they would like to see in the app.

Gamification

We would love to make invoicing feel less like a chore and include a goal-setting component. For that, we would have designed a fun, reward-type feature that would allow our users to set specific budgeting goals following their needs.

Future Steps

Reflection

As a group, we feel like we successfully designed and created a mobile app that can fill some gaps that were missing from all current software for freelancers in the market. The project was a challenge as we started with assumptions that were later “proven” wrong with the data gathered during our first couple of interviews. Nevertheless, we learned to use all the data to create a true user-centred solution.

Reflection

Achievements & quotes

I would like to use your app. It makes everything so much easier and I wouldn’t need to use different software per client.

Maria S., Graphic Designer

Your research is sound, clearly asked the right questions that allowed you to truly appreciate the type of life progress your freelancers were seeking and identifying what was getting in their way. You met those pain points with realistic and well thought out solutions which have resulted in an app I would honestly use as a freelancer myself.

Kenan J., UX Architect at Best Buy Canada

...your design prowess has set you up for great success because you took the time to learn and put value in the human-centred design process and let your research do the talking. So proud of your work - made my day.

Kenan J., UX Architect at Best Buy Canada

That’s what I need! Can you make it a real app and I will buy it.

Liz B., Software Developer and Freelancer

Achievements & quotes

Image mockups created by d3images and aleksandr_samochernyi from www.freepik.com
Previous Project

Booking.com

Next Project

Inventory Management System