Payroll Documents Mobile Upload
Role
UX Designer
Duration
April – May 2023
Client
self-initiated
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.
Having had the chance to explore the software and engage with its users, I came to understand that the challenge with Corporate lies in its potential to be both frustrating and lacking in clarity, particularly for those unfamiliar with local labour laws, such as foreign employees.
My objective for the design was to enhance the software’s functionality, making it easier for all employees to access and understand both the documents and the relevant legal information. It’s worth noting that my intention was not to produce a final outcome ready to dev, but to refine and elevate the user experience.
01/ Understanding the Users & Key Pain Points
To gain deeper insights into user experiences, I undertook a series of user interviews aimed at validating my assumptions derived from heuristic analysis. My primary focus was to explore how users interact with the software, identifying their pain points and genuine needs. Through these discussions, I discovered two distinct user groups: domestic and international employees. Both groups encounter similar challenges while navigating the software. Additionally, international employees struggle with locating and comprehending the sparse instructions provided within the software.
Information Architecture
Users have trouble finding what they are looking for and spend a lot of time clicking through various screens.
No explanation
The SW does not explain the items that users work with. They often don’t know what document to upload.
Uploading documents
When manual scanning is required, the process can be laborious and frustrating, especially for those without convenient access to a scanner.
Incorrect translations
English translations are machine-made, imprecise, and users don’t know what they mean.
02/ Ideation & Concept Solution
Drawing from the valuable insights obtained through our initial research and a thorough heuristic analysis, I embarked on a creative ideation journey to develop innovative solutions for the gaps we’ve identified. My primary emphasis was on streamlining the document upload process, clarifying the specific documents required from users, and enhancing the quality of feedback provided throughout the workflow.
Image: Conceptual beginnings; handwritten sketches and notes
03/ Mid-Fidelity Wireframes
The design of the application was crafted with a foundation in Material Design 3, incorporating bespoke components tailored to our needs. Embracing the principles of Atomic Design, I developed Master components specifically for this project. Each component was designed with Auto layout, allowing for seamless adjustments throughout potentiall development process while adhering to HTML principles.
Login
Users can effortlessly log into the system using their corporate credentials, making the login process smooth and efficient. The redesigned interface offers a more intuitive experience.
Image: A visual representation of login states, featuring three distinct screens that enhance the user’s understanding of the interface.
Home page
Home screen is the central hub for document uploads. The user can navigate through essential sections such as Tax Refund Clearance, Statement of Tax Payer, and Employment Documents with ease. There is also a dedicated area for uploading visas. Each document they upload is accompanied by a unique icon, allowing them to quickly identify its status and stay organised.
Image: A visual representation of login states, featuring three distinct screens that enhance the user’s understanding of the interface.
Understanding the Documents
To assist employees in determining the necessary documents, I have crafted a series of helpful tips. These include clear explanations of each document’s purpose along with visual examples to illustrate what they should look like. This way, employees can confidently ensure they are submitting the correct documentation.
Image: A comprehensive list of documents for upload, complete with insightful explanations for each selected document. This includes detailed descriptions and visual representations of the specimens.
Uploading Files
I designed the document upload process to be straightforward and functional. In sections where only specific documents can be uploaded, users will find a curated selection of options displayed below. For other types of documents, users simply input the document’s type and name before proceeding. Once the app receives permission to access the camera, a zoom feature activates, allowing users to capture a clear image of their document. Following the upload, a confirmation message will appear, ensuring users are aware of their consent and submission. The document’s status will then transition to ‘under review’, pending approval from the HR department or management.
After completing an upload, users can easily navigate back to the home screen to submit additional files or log out.
Image: Set of 10 mocks showing the process of document upload.
04/ Key Takeaways & What I learned
I found it truly motivating to pinpoint the challenges within the existing application and to conceptualise a straightforward app that addresses a segment of the software deemed unusable by its users. My app aims to tackle the issues users currently encounter, significantly enhancing the overall usability of the software. Additionally, I enjoyed working in Figma, employing Material Design principles and developing master components, which streamlined the process of implementing changes and improvements.