SalaryMaster

Salary packaging benefits management system
PROJECT type
Freelance project
PROJECT ROLE
UI/UX designer
PROJECT YEAR
2021
main tools
Figma
Project overview

Benefits and claims management system

SalaryMaster is a freelance project starting from the end of 2021. It was designed to digitalize the benefits application and management process of a local salary packaging consulting company. It is a smarter way to use your salary to pay for a vehicle, a mortgage and many of your other everyday expenses before you pay tax. Using your pre-tax salary to pay for things allows you to increase your disposable income and pay less tax – often thousands of dollars less each year.

Users can log onto the web application and apply benefits entitled,
track the application progress, request reimbursement, monitor income and expense performance and more.


Work responsibilities
- Optimise user flows
- Design guide
- Redesign UI
- Establish reusable components
Design challenge
When the client came to me, they have already developed an early version that works as an MVP. What they wanted me to do was mainly redesign some of the pages based on the flows they have already established. Therefore, my main job is to polish the UI elements and maintain consistency and connections in both design and processes.

The is a massive amount of form designs and table designs in this project including both the employee and employer portal.
KEY CHALLENGES
01
Evaluate the usage of input fields across the project
02
Maintain clarity and information hierarchy of huge form content
03
Design of tables, steps, and application process.
04
Understand product logic and connect them approapriately
User flows

User flows

Before jumping into designing the screens I prepared flows of the required modules by the client. This way I can map out how users will move through the app and meanwhile make a list of screens that I needed to design.
Final design

Apply mortgage forms

Based on the fact that there are generally 10+ fields within each form. Firstly, I had several meetings with the client to understand what is each form for and the meaning of fields where I felt confused.

In order to create a clean and organised form,
- I grouped fields based on their purpose with a heading.
- I added a leading icon within the input to identify its nature.
(Searching/amount/picker/dropdown list/date)
- I added a delete button to the filled input fields.
Final design

Components

This project involves a lot of reusable form elements. I have created reusable components for both a quicker design process and handoff purposes.
Design guide

Typography
& Colors

NEXT PROJECT ->