Case study
Payroll Documents Mobile Upload
Project Overview
Role
UX Designer
Duration
April 2023
client
Self-initiated
Software
Figma
The Challenge, Problem & The Solution
The Product
HR and Payroll Software (let’s call it Corporate) is a real product used by medium to large companies to manage employee administration, tax refunds, holiday bookings etc. The software currently only runs as a web-based app, and has the ability for employees to upload scanned or digital documents. The software looks for various official documents to store in an employees record, for example completed Tax Declarations, ID’s or Medical certificates.
The Problem
After having an opportunity to see the software and talk to its users, I realized that the problem with Corporate is that it can be very frustrating and uninformative, especially for users who do not know the local labour laws, i.e. foreign employees.
The Solution
To improve my skills in this area, I decided to create a mobile app for uploading documents as part of Corporate, with the goal of significantly enhancing the usability of the software and make understanding the documents and the law easy for all employees, not just local ones.
Understanding the users
Summary of user research
In order to understand the users, I conducted several user interviews to verify my hypothesis based on heuristic analysis. The main focus was on how the users used the software and what their pain points and actual needs are.
Based on the interviews I identified two groups of users; domestic and foreign employees. Both groups face the same problems when it comes to using the software. In addition, foreign employees have problems finding and understanding the limited instructions in the software.
User research: pain points
Information architecture
Users have trouble finding what they are looking for and spend a lot of time clicking through various screens.
Scanning documents
If the user has to upload a document, they have to manually scan it, which is time-consuming and often very difficult if the user doesn’t have easy access to a scanner.
No explanations
SW does not explain the items that users work with. They often don’t know what document to upload.
Incorrect translations
English translations are machine-made, imprecise, and users don’t know what they mean.
Ideation
Based on findings in initial research and framework heuristic analysis, I did a quick ideation to come up with ideas for how to address the identified gaps.
I focused in particular on speeding up the process of uploading documents, ensuring the understanding of what documents are required of the user, and providing quality feedback during the workflow.
The main feature is a simple process of document uploading, which is connected to the main system.
Initial ideation; paper drafts
The design
Technical overview
I created the design of the application based on Material Design 3, using modified components. Based on the principle of Atomic Design, I created Master components for the needs of this project. I used all components with Auto layout for easy adjustments during work with possible changes, and trying to take into account the principles of HTML when creating the product.
Log in
Users log into the system with their company username and password.
Login states mockups
Home screen and main categories
The following is the home screen, in which the main areas for uploading documents are highlighted, Tax Refund Clearance, Statement of Tax Payer and Documents of Employment. Another section can be added for some employees, for example to upload visas to a certain country in case they go on business trips. All uploaded documents are marked with an appropriate icon to identify their status.
Home screen and the main areas mockups
Explanation of documents
To help the employees in identifying which document is required, I created several hints, including an explanation of what the document is and an example of what the given document looks like. The employee is thus sure they are uploading the correct document.
Understanding the documents
Uploading files
I designed the uploading of new documents to be simple, functional, and intuitive. For areas where it is allowed to upload only specific documents, a selection of options is shown (shown below), or for other documents the user enters the type and name of the document that they wish to upload. After a one-off confirmation of allowing the app access to the camera functions, a zoom camera will appear, where the user can take a picture of the document. The uploaded document and a confirmation system message for consent and submitting the document will then appear. After uploading, the status of the document changes to under review and awaits acceptance by the HR department or manager.
After uploading a document the user can go back to home screen to upload another file or logout.
Uploading a new file screens
Takeaways
Impact
If the Corporate software implemented this simple app as part of the web-based application, it would significantly improve administration for employees. The main advantages of the app are a clear explanation of the types of uploaded documents and a very simple process of uploading documents without the user having to use a scanner every time. Both functions are missing from the desktop version. There are also hints and examples given for each document type.
What I learned
It was inspiring for me to identify the pain point of the current application and design a concept of a simple app for a part of this software that was not considered usable by the users. My app would solve the problems that users are currently facing and help enhance the usability of the software. Another interesting area was working in Figma using Material Design and creating master components, which greatly simplified the implementation of modifications during the process.