Invoices
Keep track of all the clients invoices with ease, reducing the risk of missed payments and improving overall organization.
Keep track of all the clients invoices with ease, reducing the risk of missed payments and improving overall organization.
Upped events is an event management company that manages events for clients. The company currently bills its clients through invoices that are sent directly to them. However, as the company grows, it has become increasingly difficult for the super admin (Upped Events Team) to manage and view all clients' invoices in one place.
As a Product Designer, I was tasked to solve this problem which is to develop an invoicing tool for Upped Events. During the design process, I collaborated closely with the product manager to establish the project scope and with the Upped Events - Super Admin team to identify pain points and gain a deeper understanding of their user processes.
Product Designer, UX Research, sketching, prototyping, Visual Design & Testing
Product Designer (Me), Product Manager, Admin Team (Users)
3 weeks (June 2022)
Figma | FigJam | Slack
The current invoice management process involves the super admin logging into each client's profile to view their invoices, leading to increased administrative time and a lack of visibility into the company's financial performance. The goal is to find a solution that simplifies the invoice management process and provides a single view of all clients' invoices for the super admin.
The project requirements were clearly defined by the product design manager and it served as a guiding light for the UX design process. The manager outlined a vision for a comprehensive invoicing system, with the following key features in mind:
Single View of Invoices: Offer a single view of all invoices belonging to a specific event owner.
Search & Filter Invoices: Enable search for Specific EO’s and allow filtering based on date range, past, and upcoming invoices
Payment Status Overview: To provide a quick overview of each event owner's payment status and total amount owed.
Super Admin Control: To allow the super admin to view, edit, and pause invoices.
Discovery and Understanding: In this phase, I engaged in brainstorming sessions to understand the needs and requirements of the super admin. This allowed me to develop a clear understanding of the user and their goals, which helped me to come up with quick user flow ideas.
Ideation: With the user flow ideas in place, I moved on to the wireframing phase where I created sketches to test the feasibility of the ideas. This phase helped me to refine the user flow and identify any potential challenges.
Prototyping: In this phase, I created both low-fidelity and high-fidelity prototypes to test the ideas and evaluate its effectiveness. I later used these prototypes to gather feedback and identify areas for improvement.
Refinement and User-Centered Design: In the final phase, I focused on improving the user experience and refining the design. This involved revising UI elements, conducting usability testing, and making changes based on user feedback. My goal was to create a comprehensive design that met the needs and expectations of the super admin.
The first step of our design process was to understand the needs and pain-points of our users, the super admins. I conducted user research by interviewing the super admins and observing the current invoice process. This helped me to identify areas for improvement. During the interviews, I discovered that the super admins were not able to edit invoices in case of mistakes. To gather a more comprehensive understanding of the problem, I set up a call with the entire team to hear their needs and the problems they faced.
I later held a brainstorming and ideation session with the super admin team.
I wrote down insights and quotes from the interviews on post-its and grouped similar post-its together. This led to four clusters that gave us an understanding of the most common problems regarding Invoices.
The need for Invoice Management section within the Super Admin Portal - The team wanted a section within the portal that looks similar to other sections of the application. They were looking for a user-friendly design that would allow them to quickly find their clients' invoices. The team wanted a clean and simple interface that would make it easy to navigate and locate specific invoices.
Quick Preview of Invoice Details: The team also expressed their desire to be able to view a quick preview of the invoice details, including the amount they owe, without having to download the invoice. They wanted to be able to quickly access information about their clients' payments, including the payment status, amount due, and payment history.
Ability to Make Changes to Invoices: The team also wanted to have the ability to make changes to their clients' invoices. They wanted to be able to add new items, delete items, and pause invoices for specific months. This would give them the flexibility they need to handle any changes that may arise during the course of the event planning process.
Different Types of Invoices: Finally, the team highlighted the need to be able to distinguish between different types of invoices. They wanted to know whether invoices were settled or unsettled for each event's owner. This would help them keep track of their payments and ensure that they are able to resolve any issues quickly and efficiently.
While the research findings allowed me to narrow down the problem, I needed some inspiration before I started wireframing. I initiated by examining the existing super admin portal to ensure consistency in my design. Then, I looked to other design sources such as Behance, for inspiration for invoices, bank statements, and HR management software.
To create a solid foundation for the product design, I developed a user flow that outlines the steps super admins will take to achieve their goals. With this user flow in place, I had a clear understanding of the structure of the product before moving on to the next phase.
To save time, I sketched out low fidelity wireframes that could be changed easily. Here, I focused on high level functionality before adding the details.
The Invoices Landing page was the first step in this process. The login page was designed as a table to display a large amount of data in a compact and organized way. The main purpose of the table is to quickly view all invoices and their information. The table includes a search feature to search by name, organization, or invoice number, and two filter options (drop down and upcoming/past invoices). The green text on the page is clickable, allowing Super Admins to access and edit invoices, pause their sending, and mark them as due.
.jpg)
The client invoice screen starts with the invoices home page. Admins can view all invoices for a specific event owner on this page. Unsettled invoices are listed at the top and settled invoices are at the bottom. Invoice type (payable or receivable) is shown using a red or green arrow. Invoices are organized by month, with the most recent first. Admins can edit, pause, or mark unsettled invoices as paid before they are sent out, but they can only view settled invoices, not make changes.
The invoicing line items can be edited in this final screen for invoices. The top drop-down menu displays the header information, such as customer information, contact details, title, summary, and logo, reflecting the current Upped Invoicing template. Admins cannot make changes to this section or the footer section. However, the center section is fully editable, allowing for the addition, editing, or deletion of line items. A notes/description area is also available for event owners to add additional information for their clients. This will be helpful for admins to communicate any issues or important messages.
One month after launching the invoice section, the impact shows that there were significant improvements in time savings, user-efficiency, and brand loyalty.
Time Constraints:
Constant & clear communication:
Simplicity is strength:
In an agile setting, the design must be complete before developers can begin their tasks. To ensure that the design was approved by the client and that the user stories were clearly specified before being given to the team during sprint planning, I had to present the design two weeks before the sprint. It was challenging to move the product development along and produce the design assets on time given the short deadlines.
Early on in the project, we dealt with some last minute scope creep that forced us to rush certain aspects of the product in order to get it into the release. As a result, we learned to be clearer with our communication by providing a roadmap early and setting stricter cutoff dates but also making sure any updates were communicated to the larger team as soon as possible.
As a designer, we are often lured by attractive, trendy and out of the box designs. But We must always remember the ‘Why’. The primary goal is to understand the user, their problems and then come up with a design that solves it.
%201.svg){kind=small}
