Document UI Rework CezanneHR
Web design | UX/UI Design | Figma
The Document Module in CezanneHR allows HR teams to upload documents to all employees with added functionality, these four are:
Create and Merge - create a new document from an existing template.
Create and Merge with eSign - create a new document with eSign.
Upload and Assign - upload one document per person (e.g. payslips) in a 1 to 1 relationship.
Upload and Track - upload one document to many people, can check status e.g. read or signed.
However, the current UI is not user-friendly and struggles to allow users to flow through the process due to a lack of consistency in the design and how it is presented. As you will see below (1) shows how users are presented with a splash screen with a warning if an option is not available. Its traditional confined look fails to utilize the space around it, in an efficient way.
The second issue is the overview screen (2) it lacked any true usage, it only showcased the files uploaded and all other corresponding details in a table, subsequently causing a lack of engagement with this screen, despite its importance for the module.
1. Original Splash Screen
2. Original Overview Screen
Re-worked Designs
After extensive ideation and re-working the new designs incorporated the original features but with a practical and refined look. The new Splash Screen (1) now followed a list view with large buttons and made use of the surrounding space, the warning banner was moved to the top to grab the user’s attention if an option is not available. and to simplify the process rather than clicking an option and then having to click next, a user could now simply click on the enlarge button and be taken directly to the page (2).
The second biggest change was the overview screen (3), which now had a refined modern look, with the use of accessible colours we were beginning to transition towards. The first big change was the introduction of boxes, which broke down key numerical data about the uploaded document, such as how many people it was sent to, or how many have read and signed it. But in a clear and enlarged font so users can grab the piece they need more easily. The next change was the grid, it was simplified to include just the name, no. of files, and when they were uploaded, with an added option of selecting a specific person and deleting that file for them.
Finally, a few minor enhancements were the introduction of a search bar for the efficiency of finding a file, an information strip above the boxes, informing you of the document type, the file name, what category you chose, and what had been changed
1. New Splash Screen with Warning message
2. Selected Button
3. New Overview Screen