Platform Web App
Service Customer Care & Billing
Tool Adobe Xd
E-INVOICER - BILL GENERATOR
Disclaimer: All the names and screenshots have been modified to comply with my non-disclosure agreement. This case study reflects my own opinions, not necessarily the view of the company.
OVERVIEW
E-Invoicer is a simple browser-based application to generate e-Way bills (EWB) online for B2B transactions with limited settings for end users to customize. It is, indeed, our humble experiment for an ambition to build a more thorough and sophisticated billing and invoicing platform for all types of businesses.
Customers can access E-Invoicer when they purchase the premium e-commerce website package. This tool is quite efficient in generating EWB quick and dirty. It is also equipped with the capability to generate the EWB via the API and export the invoices into JSON or XML file to be used as sample file.
THE PROJECT
As a product designer, I work with other members of the product team to work out a solution, which is achievable in a short time, to introduce the Discount functionality to the E-Invoicer, and ensure the new functionality to fuse other parts of the app nicely in a short time.
ORIGINAL STATE
In RocketMarket, the marketing workflow automation feature is named Marketing Journey (MJ) and occupies a humble one-third widget on the home screen’s real estate.
THE PREP
USER CROSS-TEAM MEETING
There are 2 types of discount users want to have: Overall Discount and Line-item Discount.
The product team sits down with the Customer Success team to see how often the team has got questions from users on how to set up discounts. At the end, we all arrived at some agreements:
We can apply the discount on the level of single HSN code, using the custom object mentioned above, then save it within the E-Invoicer.
Due to the time/resource limit and free of charge, there is no synchronization of discount data back in the e-commerce website.
Any data saved can be utilized at a later stage when we decide to extend the functionality of the E-Invoicer.
WORK BREAKDOWN
I always kick things off with a concise epic statement. The epic then is broken into 2 tasks.
THE WORK
NEW DISCOUNT PROPERTIES
The new section Discount Details is added to the Invoice Generator page, placed under the Consignment Details.
There are 2 discount methods:
- Add a discount to a transaction
- Apply a discount on an HSN Code
ADD A DISCOUNT TO A TRANSACTION
When this discount method is selected, it shows:
-
Discount Unit
-
Amount
-
Discount Description
APPLY A DISCOUNT ON AN HSN CODE
If users select this method, all the fields are populated with the data from the HSN codes page and non-editable.
DISCOUNT ITEM ON INVOICE INTERFACE
I did some research on a lot of popular invoice layouts, from various platforms such as Freshbooks, Quickbook, Avaza. What we can learn is that the total discount is usually positioned under the sub-total, and above the Total Amount.
Therefore, the Total Invoice Value is split into a separate row, and put the discount amount right above it. The new row contains Discount Description and Discount Amount.
DISCOUNT SETTINGS ON HSN CODES
Currently, HSN Codes is a static table of all the codes. The Discount setting is added to the table in order to make the method “Apply a discount on an HSN Code” work.
The team went through a lot of discussions to on the design approaches, and decided to implement the In-line editable table. The rationale is:
-
It keeps the users in the context and it occupies little screen real estate.
-
It loads faster
-
It does not take much development work
Sometimes compromise is unavoidable no matter how vocal you are about the product experience. After quite a while working in several projects, small or large, billable or non billable, I finally look at the term “compromise” in a new light - Compromise is just another way we designers adapt to the situation and find a sweet spot among conflicts.
In the E-Invoicer project, thanks to all the micro-compromises I encountered along the way, I’ve had a chance to loosen up myself gradually so that I can be open to all the possibilities.
