GST Calculator

How we designed and developed a simple, customizable app to calculate GST.

Simple calculator

Carry out simple calculations like a regular calculator.

Custom keys

Define the GST rates on the 5 custom keys!

Change mode at tap of a button

Switch between the GST mode and standard mode in just a tap.

Share, copy and save results

Share, copy and save the calculations using special buttons.

The Goods and Services Tax (GST) is a multi-level value added tax to various stuff that are bought and consumed. The GST is simply calculated knowing the percentages that would be charged in a given product or a service.

Details of the app

Duration: From April ‘18 till May ‘18 for 8 hours per weekend.

Client: ZoοΜ-ΤoοΚ

My role: UX researcher and consultant.

Total team: 2 UI/UX designers and 4 developers.

The brief

How might we make the calculation of Goods and Services Tax (GST) a breeze for our customers?
The market survey of the client found business opportunity in creating a GST calculator. Their findings are listed below.

  • An app that can be used by business persons as well as regular users.
  • Sees a breakdown of the GST.
  • The results can be shared and saved, if needed.
  • User should not have to use another calculator for this.
Corporate branding colors as provided in the brief.

Our Process

Learn Phase:

Understanding technical jargon

I needed to research the following technical jargon to know what I was going to design:

Central Goods and Services Tax (CGST) – CGST is a tax levied on Intra State supplies of both goods and services by the Central Government and will be governed by the CGST Act.

State Goods and Services Tax (SGST) – SGST is a tax levied on Intra State supplies of both goods and services by the State Government and will be governed by the SGST Act.
e.g.
Price of an item       10,000
– CGST @ 9%           + 900
– SGST @ 9%           + 900
Amount Payable    11,800

Integrated Goods and Services Tax (IGST) – IGST will be applicable on any supply of goods and/or services in both cases of import into India and export from India.
e.g.
Price of an item       10,000
– IGST @ 18%           1,800
Amount Payable     11,800

HSN Code of GST – Harmonized System Nomenclature. HSN code or Harmonized System Nomenclature code number is an internationally adopted commodity description and coding system developed by the World Customs Organization (WCO).
HSN code is used by more than 200 countries as a basis for their customs tariffs.
Source: https://www.edc.ca/en/about-exporting.html

Roles and behaviours

Role 1 : A businessman
This person owns some sort of business and has fairly good idea about what and how much GST would be needed to be paid or collected.

Behaviours:

  • Has in depth knowledge of the GST norms and percentages.
  • Presently is calculating GST on a simple calculator. And is bored of repeatedly needing to enter percentages for GST.
  • Needs to set prices of the things, hence needs to see the prices without GST.
  • Realize profits even after paying GST to the government.
  • Needs to calculate prices and GST many times a day.

Role 2 : A lay person
The lay person buys some stuff and needs to know how much GST would they incur.

Behaviours:

  • A lay person needs to use a normal calculator along with some GST calculation functions.
  • Calculates GST only 2 to 3 times a day.
  • Uses a calculator to calculate finance, tips and other regular numbers and expenses.
  • Does not want to get overwhelmed by a complex financial calculator.

Think Phase

Features list

  1. GST calculator would have two modes:
    1. Standard mode:

      1. Designed for lay persons.
      2. Would function as a regular calculator and would have GST features.
      3. There would be 5 user defined percentage keys for quick entry.
      4. These 5 keys can hold values even for tips calculation (e.g. 10%)








    2. GST only mode

      1. Designed for calculation of GST exclusively by businessmen.
      2. Quicky gives breakdown of IGST, CGST and SGST
      3. Has both ‘add’ GST and ‘subtract’ GST for calculations.
      4. Has 5 user defined keys percentage keys for quick calculations.
  2. A button to quickly clear whatever was entered.
  3. A separate pop-over which shows the details of the calculations.
  4. Copy to clipboard, so that it can be posted elsewhere.
  5. Save feature allows the user to save the results a file for future use.
  6. Share feature allows the users to share the results with other users.
  7. Settings
    1. Ability to switch between ‘Standard’ and ‘GST only’ modes.
    2. Custom key settings
    3. Setting to turn the detailed GST calculations ‘On’ or ‘Off’

Create Phase

Initial Wireframes

This is how the features were arranged in the initial wireframes.
Task flow: The wireframes were made to quickly capture the requirements.

Paper prototype testing

The wireframes were shown to 7 users. They were asked to perform various tasks using the static wireframes. Their feedback proved to be invaluable in updating several features.

Photos of different users carrying out the tasks using paper prototypes.

Feedback and improvements

Based on the feedback from the users, the following changes were made.

Several changes were made based on user feedback

Creation of Visual Designs

Visual Designs are created keeping aesthetics in mind. The corporate branding colors were followed and several changes were made from the wireframes. These are shown below.

This is how the wireframes were translated into Visual Design

Visual Designs could be best appreciated through a task flow. The following is task flow for changing the mode as shown in final designs.

Visal Designs showing task flwo for changing the mode.

Design Challenge: Marketing!

Problem: After the Visual Designs were presented to the stakeholders, the Head of Marketing, came up with a thought of making the app more visible on Google Play and make it more sharable to community.

Solution: I included the ‘Rate and Review’ and ‘Share this app’ features and updated the Visual Designs.

Rating and Sharing features added for improving the market value of the app.
This screen appears when the app is started for 25 times because the user might really like this calculator. It never appears once user has clicked on any of the two actions.

Design Challenge: Single most useful feature!

Problem: Many users needed to show or hide the calculation box frequently. The current task flow needs to be simplified.

Solution: A simple, one-tap button which allows the user to show/hide the calculation window easily. This feature is represented by a meaningful icon.

The flow shows old and improved GST calculation box

Design Challenge: App icon design

Problem: App icon should be simple enough, yet quick to recognize and following the corporate colors.

Solution: A number of concepts were created and presented to stakeholders and users to test which one was the best.

App icon design, with logo No. 7 being finalized and used on the menu. This icon represents both GST and calculator functions well.

Conclusion and future scope

In 2019, the app went live and as of today, there are more than a thousand downloads.

Get it on Google Play