White Panda UX Assignment
23 February 2024 00:45
Assignment - Create mobile UX for
invoicing features, from the existing
Desktop UI shared
First of all, thank you for the opportunity to work on this project. It allowed me to look
into a problem statement I hadn't noticed before.
Entire Process
I began working on my assignment by gaining a deep understanding of how online
invoice generators work and the important aspects required to generate an invoice.
Due to few of my relatives being in business,I already had some insights such as GSTIN,
New Section 19 Page 1
Due to few of my relatives being in business,I already had some insights such as GSTIN,
customers, items, types of goods and services, and their rates. I examined popular
applications like Zoho Bill Generator, Invoice Simple: Invoice Maker, and Invoice2go,
which helped me identify areas where they were lacking and causing major user
experience issues, such as:
- Human errors: Missing or inaccurate information on invoices.
- Unprofessional appearance: Invoices that do not reflect your brand image.
- Lack of numbering system: Duplicated or missing invoice numbers.
- Paper overhead: Excessive paper usage in the invoicing process.
- Late payments: Strategies to get paid faster or on time.
Major assumptions
• This is a tool that allows you to create simple invoices with your company
information, customer details, and product/service details. You can then save,
print, or email the invoice to your customer.
• It uses data history to prevent users from repeatedly entering the same
information when generating an invoice.
• The GSTIN has already been recorded by this interface upon the initial login of a
supplier.hence, it will be directly reflected in the invoice.
Major decisions
• Breaking down the entire process into five main sections.-By presenting the
form in smaller, more manageable sections, users can focus on one set of
information at a time. This reduces cognitive overload and makes it easier for
users to understand and complete the form without feeling overwhelmed.
• A preview option -A preview allows users to review the invoice for accuracy
before finalizing it. They can spot and correct any errors or omissions, such as
incorrect pricing or missing information, before sending it to the recipient.
• Customization by adding and Theme-Allowing customization enables
companies to align their invoices with their brand identity
Following are the screens and the explanations for choosing the elements-
1.The Onboarding Screen- This screen provides an overview of the
information required from new users when creating an account for the first
time.
○ The GSTIN number and other details of the supplier will be added
automatically to the invoice, preventing users to take repetitive
actions.
○ The information given here can be edited later by going to settings.
New Section 19 Page 2
2.Choosing Customers
▪ This screen lets you select a customer from a list of those you've
previously dealt with.
▪ If there are new customers, you can add them by clicking the plus
sign and entering their details.
3.Selecting Item:
○ This screen enables you to select items/services from a provided list.
○ If you need to add a new item, simply click on the plus sign.
New Section 19 Page 3
4. Adding details of a new item
○ On this screen, you have the option to add a new item along with its
description and other details.
○ Once added, the item will then appear in the list of items.
5.Invoices List: This screen displays a list of invoices. To create a new one,
simply click on the plus icon.
New Section 19 Page 4
6. Creating the invoice: This screen is vital as it enables you to add or edit
customer details, item specifics, charges, discounts, payment options, and
more.
○ An option to include discounts or additional charges has also been
provided, which will be automatically reflected in the total cost.
○ To accommodate the large number of details to be added, an option to
save progress has been provided to prevent users from having to repeat
the same task.
○ In India, there are around 42.50 million micro, small, and medium-sized
businesses that use an invoice generator for their operations. Out of this,
only 0.5% or approximately 3.3 lakh small businesses work within the city
and mostly prefer pay-on-delivery or partial payment modes. In the latter,
the customer pays half or one-third of the money before shipping and the
rest after it has been shipped. However, the majority of online/mobile
invoice generator apps do not have the option to pay after delivery or
partially, which I believe would be a unique selling point and a convenient
feature.
New Section 19 Page 5
New Section 19 Page 6
7. Customisation-
○ By allowing users to customize their invoices, they are empowered to take
control over their branding and communication strategies.
○ Providing a preview before downloading or sending the invoice offers
transparency and an opportunity to prevent any potential manual errors.
Note: Due to time constraints, I couldn't create a high-fidelity design.
However, I've outlined my thought process for streamlining the process of
invoice generation. Thank you.
New Section 19 Page 7
