top of page

Invoice & GST Registration 

PROJECT: Invoice & GST Registration

The goal:

Design a basic mobile app that allows small merchants to create and manage invoices for their business.

ROLE: UX/UI Designer
DURATION: 40 Hrs

Challenges:

1) Merchant onboarding and registration to be GST compliant.

2) See your Invoice and status.

3) Create a New invoice.

Process
 

Part 1

This section takes a deep dive into understanding the user by forming a user persona and articulating their journey and thus the application required

Understanding the user:

1) Energetic and alert.

2) Familiar with digital technology.

3) Tech-savvy.

4) Partially fluent in English.

User stories:

User stories helped to understand content, motivation and desired outcome:

1) I want to easily and quickly create a new invoice
So that I can have peace of mind and empathize with my customer.

2) When searching for the cars
I want to translate the application language into my preferred ones
So that I can easily use the application without language being a barrier for me.

Process
 

Part 2

This section states some of the assumptions requirements, constraints and eventual trade-off that I made

Goals & Tasks:

Reliable:

1) Display accurate data and information.

2) Be transparent about the information.

Usable:

1) Understanding of user scenarios and goals.

2) Timely and non-distracting. Eg. helps the user get from A to B efficiently and easily

User stories:

The followig assumptions were made for this project:

1) User has access to wifi or cellular data so we can assume that they have no problems accessing the website.

2) User requires personal details to login or create an account.

3) User is using this website for the first time.

Constraints:

Reliable:

1) Display accurate data and information.

2) Be transparent about the information.

Usable:

1) Understanding of user scenarios and goals.

User stories:

The followig tradeoffs were made in order to focus on user achieving their goals:

  • Push notification

Allowing user to enable to push notifications would be a great idea for them to get a reminder. However, due to time constraints this option explored, as was not required for the user to achieve their goals.

2) Timely and non-distracting. Eg. helps the user get from A to B efficiently and easily

App Flow(1)

The following flow was designed to help articulate how a user would move throughout the website and reach their goals:

  • You’ll notice upon overviewing the flow that there were some unnecessary steps that have been crossed out to keep in line with the requirements etc.

App Flow(2)

The refined flow omits the unnecessary and additional steps and instead focuses on the core flow and simplified A to B experience:

Picture4.jpg
  • Now the user is presented with a screen that lets the user to log in or create an account.

  • After pressing create invoice button user is then taken straight to the create invoice page.

Process
 

Part 3

This section explores wireframing and prototyping of the users experience

Paper Wireframe

High Fidelity Design

You can view the design file by clicking Here

Interactive Prototype

To get a sense for the flow and test the experience an interactive prototype was created of the high fidelity design.

https://www.figma.com/file/e9i2zXKAq6tZEtjiWcaZJ1/Ungrammary-Assignment?node-id=4%3A47

The purpose of the prototype was to:

  • Test whether the wireframe and  designed flow are helping user to achieve their goal.

  • Assess whether the interactions are clear.

  • Test and fine basic animations and transitions.

High Fidelity Prototype

bottom of page