Timesheet Management system
- Boon Siang Leok
- Apr 24
- 10 min read
Updated: 4 days ago
Project Overview
The goal of this timesheet management system is to automate the process of submitting timesheets and to reduce human errors.
Project Length: 1 Month
Role: UIUX Desigener
Team Size: 1
Competitor Analysis
1) BIPO HR System
-Users has to create entries individually which can be cumbersome
-Days are not set by user thus they have to refer to an actual calendar
-Default set to 10 rows per page which might cause minor hindrance to the user if they want to edit other dates
-User has to key in the start time and end time even though they are not working that day (i.e weekend, public holidays)
+Approval structure is transparent to the employee + Save as draft helps user to prefill the information without submitting which enables them to prep in advance.
2) Manpower Group's HR Portal
+Saturday and Sundays are marked out by the system and does not require any actions from the user
+Use of icons to indicate call to action and each action is separated by column
-User has to go into each day to edit the man hours they had worked
3) Current timesheet system
-Errors can be made because it allows all keyboard inputs in the field
-Multiple unfilled projects which might make it difficult for approver to check
-Timesheet is for 15 days thus out of 31 days, half would always be un-utilized
+Weekends are blacked out the moment the user enters the date
+Users can edit all 31 days in a glance
Strategy/Features
Some features that I thought of which can help the users to submit timesheets would be ways to make it easier to use for the users and ways to reduce human errors in the process as well.
Autofill - Allows user to auto-fill the entire week
Drop downs - Preset the value that the user is able to fill (i.e. 0,0.5 and 1)
Calendar Days - Ease of use
Disable submit button - when there is an error, the submit button would be disabled to reduce human error
Error messaging - If a man day does not equates to 0 or 1 it would be highlighted in red to garner user's attention
Preset holidays - To disable the fields when there is a Public Holiday which can help reduce human error
4 Statuses and call to action for the Approvers
Pending - Review
Resubmission - Remind
Due - Remind
Approved - View
Prototyping on Figma
I spent quite a significant 2 weeks creating the UI needed based on the requirements that was given, working on the main pages whilst also building the in between pages to ensure that the front end developer would know how I had envisioned the webpages.
Approver Dashboard
Timesheet Submission
Configurations
Conducting Usability testings
Participant's Criterions
Participants should be individuals who will be using the timesheet in the future to gather relevant feedback as they would have vested interest in providing authentic feedback (I.e. individuals from App Dev). However, due to the re-organization, the determinant of deciding the participant’s criteria could be changed to either IT- BSG or under common services Department or CMS Modernization
I wanted an odd number of people to be tested for each round of testing, this is to ensure that there is a tie-breaker if there was a case of neutrality. Having that tie breaker would let me know if the task was slightly more usable or less intuitive which would then shape my design decisions moving forward.
Exclusion Criterias
Participants should be excluded from the Usability testing if they have worked on the application before as they would have some understanding of how the system would work already. This might render the results biased. (i.e. Out systems Team, UX Team)
Breakdown of usability testing (30 minutes)
5 mins for introductions and closing.
5 mins for Task 1
5 mins for Task 2
5 mins for Task 3
5 mins for the pre and post-test survey
5 mins buffer
Prompt Library
If the participants are too quiet, I have prepared a list of prompts to help the user to vocalize their thoughts
What is on your mind right now?
What are you looking at?
Why are you stopping?
What are you trying to do?
What does this remind you of?
What are you thinking when you look at this?
What would you do next?
How are you feeling?
What is missing?
What do you think happened?
What makes you feel confused? Layout, language, menu, icon etc.?
Surveys
I had based my survey on the System Usability Scale test which helps the user to determine the intuitiveness and usability of the current timesheet submission system and the prototype which i had created. I sprinkled in 3 open ended questions to gather more insights from the user to better understand their preferences, frustrations and ways to improve the prototype as well.
Pre-Usability Survey
A pre-usability survey was done to determine the usability of the current timesheet system that the user has accustomed to. This allows me to hear the user's frustrations with the current timesheet system.
This also anchors their frame of mind to the older system as they attempt the tasks with the new timesheet system. This would then enable the user to draw out contrasts of the 2 systems better.
Pre-Usability testing Survey Results
Using the formula from. https://blog.uxtweak.com/system-usability-scale/ I calculated the System Usability Scale.
Pre-usability System Usability Scale: 54.6
Positive Comments:
It's on excel thus fairly straightforward to use, partially automated using Excel Macros, I Just need to enter 1,or 0.5 on the workday required. Greyed out weekends will display according to month selection, Some macros are in place to tabulate man days and has calendar months of the year. Easy to edit in Excel
Negative Comments:
Need to manually fill in timesheet information every month, Manual verifications and rectifications required and chasing team members for late submissions and error entries. Public holiday and leave is on the same row called leave when there is a new template, need to update to that new one again, very manual. Repetitve and have to manage separate files. Have to duplicate and create excel doc each time.
Areas of improvement:
Change the system? Platform with full integration and validation, automating to connect to agency timesheets, centralized system to manage all time sheets. Auto change month, each team should have their own timesheet so that users do not fill up wrong rows.
Tasks
For this testing i created 3 simple task for the team member and approvers, this is to ensure that the core functionalities of the timesheet system would be user friendly and intuitive for the users!
Team Member's Tasks
Task 1
Task 1 observations
User 1:
Started to type in the dates one by one until towards the end she noticed the autofill function and questioned if it worked. Prompted her on why did she use the autofill towards the end? And she mentioned that she simply didn't notice it because it was placed at the end
User 2
User manages to finish task and used dropdowns to fill up, User was confused with the term “autofill” and figured out how it works after clicking on it. User tried to submit but was not able to due to the disabled button and noticed there was a red text in the man days. She then proceeded to click on the dropdown to change working days to 0.5
User 3
User manages to finish the task, User tried using the keyboard to key in the working day info, but it does not work. The user proceeded to use the dropdowns one by one to fill up the timesheet. Eventually, they used the autofill after they had noticed it at the end of the row. User mentioned that they are used to copying and pasting for the old timesheet system because it was using excel and feels that the dropdown becomes a bit of a hindrance.
User 4
User manages to complete tasks with ease and used the dropdown to fill up the timesheet individually. Eventually the user noticed the autofill and used it to fill up the entire table. User also mentioned that it could be better if the timesheet has a draft function because they have a habit of force-prepping ahead of the submission date so that. The users also mentioned that they prefer the autofill function because clicking on a data grid and dragging would usually cause issues with the formulas in excel. User commented that he was glad he does not have to look for the SharePoint folders for submission anymore.
User 5
User was able to complete the task with ease. The User clicked on the dropdown one by one and eventually noticed the autofill button which was at the end of the table. User asked what happens if I pre-submit my timesheet but eventually, I take off on the last day of the last month? Because these are cases that do happen. I then explained the current process. User then mentioned that being able to edit their timesheet after submission is quite important as it can reduce workload for the approver especially if the user knows that they have made a mistake. Waiting for a mistake can cause the user to lose track of the mistake over time as well.
Task 2
Task 2 Observations
User 1
Mentioned that it was straight-forward
User 2
User manages to complete tasks but commented won't it be difficult for me to look my information.
User 3
User manages to complete the task with ease. User mentioned that the task might be easier to complete if the total number of man days and leaves on the dashboard instead since there is not much information on the dashboard now.
User 4
User mentioned that they would prefer to check their agency’s HR system instead because that is where he would need to apply for leaves and has less room for human error compared to checking through the current system. Proceeded to ask the user if this was the only resource at the moment how would he work on the task? And he was able to complete the task and answer the number of leaves correctly with ease.
User 5
User started off looking at the date of submission first but realized that User commented that the task was “fairly easy” because “it's just 2 clicks to get my answer”
Task 3 Observations
User 1
Mentioned that it doesn’t make sense that the project is in the file even though there weren’t any days filled up. Proceeded to explain to Participant how the previous submission as template function. She mentioned that it makes sense to have that because as a BA she only has one project title of BAU, and she would be constantly repeating the same project every 15 days thus that is a good feature to have. Giving the user to add directly from the page makes it easier for them to add project but having it as a separate popup helps the user to focus more.
User 2
User was able to complete the task and commented that it was easy to add and remove projects.
User 3
User immediately tried to create new timesheet instead of clicking on the re-submit timesheet button. User realized that the date was not available and was confused for a moment. User went back to dashboard to find the re-edit button. User then tried to click on the project but noticed that it does not do anything. User then mentioned won’t it be easier to edit the project directly instead of adding and deleting projects especially since it was pre-filled by her already.
User 4
User clicked on the resubmit timesheet button and was able to delete project and add new project with ease.
User 5
User started off looking through the date of submissions before looking at the statuses. User clicked on the resubmit timesheet button and was able to delete project and add new project with ease. User commented that the version number seems to be a bit small for him to see and he mentioned that he might make the same mistake when submitting the timesheet again if he was not careful.
Approver's Tasks
Task 1 Observations
User 1
Assumed that approvals would indicate her whole team.
Clicked the call-to-action button immediately. Mentioned that a bigger text field might be better, in case if there are other information that is missing
User 2
User mentioned that for “Joyce” it would be good to remove the rows that she did not populate because if she has 10 projects, it would be very difficult as an approver to check through.
Mentioned in this case there was no way to know that Shawn had made a mistake and that it might be good to have tools like leaves integrated to help inform her to make the right choices.
She mentioned that it would be good to have some information to explain the status of the users. Although she can understand them now, it takes some time to process the information and make assumptions on what each status means.
Task 2 Observations
User 1
Mentioned that the task is quite straight forward Having the call to action to be named
User 2
Mentioned that it would be good if the buttons were color coded . Mentioned that it's good that the call-to-action buttons are named appropriately which makes it intuitive for the user.
Task 3 Observations
User 1
Mentioned that it is less intuitive
Commented that it would be good to indicate the last day of the user, even though it's greyed out it might not be understood by the approver. It's not a must have feature
User 2
Confused the term “file.” Mentioned that proxy submission would be more intuitive compared to file because that is the naming convention that she is used to. Nang commented that having a leave system integrated would be helpful in ensuring that the approver can tell when the team member takes leave.
Observations: Rainbow Mapping
Through the usability tests, I realized that there are similar behaviours that occur during the tasks. Thus by mapping the behaviours out in a chart helps me to visualize which observations are common whilst some only occur only once. This would help me evaluate the severity of the usability issue.
Post Usability Survey
Having a post usability testing survey done after the tasks allows the user the to anchor to the tasks that they had just completed.
Post Usability Survey Results
System Usability Scale: 78.6
Positive Comments:
Features are straightforward, Standardised timesheet reporting and approval within system validation and reminders in place. UI is clean and smooth. It is simple to use and it helps with the autofill function. Simple to use and straightforward
Negative Comments:
I can't edit project and have to delete and re-add project, Too many record entries but no search button to find specific date. Not able to edit after submission. Unfamiliar with the new layout and human errors can still happen.
Room for improvement:
Dashboard feels quite empty, integrate with leave portal, Missing filters, indicate approvers, dropdown for re-selection of project, display total work days and leaves on the records of main page, autofill can be shifted to the left for ease of use, edit button to edit the project immediately.
Analysis
Overall the feedback has been positive, the new system has a higher usability scale than the older system by 24 points! This shows the positive reception of the participants for the new features in the timesheet system.
That said, there are still some issues which needs to be addressed like the placement of the autofill button, missing filters, indicate approver/reviewer of the timesheet which would be addressed later in the affinity mapping when suggesting changes for future enhancements.
Analysis: Affinity Mapping
Using the rainbow map and the post usability test survey as evidences, I broke down some changes which would improve the usability of the current time sheet system.
Post development UI fixes
Looking at the developed Timesheet system, I collated and sorted out the UI issues which was found on the platform onto an excel sheet. I then sorted them into the Nielson's severity scale and Nielson's ease of fix scale, this would help the developer to prioritise which UI issues to fix and informed the Business Analyst to review the the indicated issues and create tickets for the developer to change.
Demonstration Feedback
Before the timesheet system was used, there were some observations which I made and some key feedback from the audience who would be using the timesheet system as well.
Future Enhancements
Add approvers onto the timesheet
Integrate leaves onto the timesheet for approver's ease of use
Rename file to proxy submission
Comments