Grid Timecard
Inspiration
The inspiration behind this project came from how the project managers in construction industry still use pen and paper on job sites to keep track of their employees’ work hours, jobs they worked on and many other related details that need to be mentioned in the employee timecards.
I along with one other team member shadowed our target users, the project managers of construction industry, on their jobsites to observe how they created and maintained their employees’ timecards, situations that caused them to create new timecards again, what the project managers did if the timecard got lost or was misplaced, etc.
Synthesis
The observations were written and clubbed via post it notes and classified into various tags. This helped me in identifying common pain points the user faced among the various disconnected observations.
Tags developed to parse the data collected
Ideation and Experimentation
I created userflows to prioritize the steps and the information that would go on each screen which in turn helped me in identifying the pain points to create rough paper prototypes to quickly test with our target audience. User testing results gave a glimpse of not only the interactions that the target population had within our product but also as to how they held devices in their hands to input information at various stages, how they changed the device orientation for various tasks, how they preferred thumb interactions for certain tasks but finger interactions for others, etc. This feedback helped me in creating a more robust prototype that ended up closely mimicking the actual product. The step by step user flow of how the user can create a new timecard is given below.
Example of Workflow and paper prototype
The userflow of the product when creating a new timecard
Implementation
The images are the high fidelity designs of the screens that were used for the final user testing. These designs represent the final product that was shipped.
High Fidelity designs of screens: When user selects employees, cost codes and creates a new timecard
High fidelity designs of screens: When user enters hours for the employees and wants to add extra information
The inspiration behind this project came from how the project managers in construction industry still use pen and paper on job sites to keep track of their employees’ work hours, jobs they worked on and many other related details that need to be mentioned in the employee timecards.
I along with one other team member shadowed our target users, the project managers of construction industry, on their jobsites to observe how they created and maintained their employees’ timecards, situations that caused them to create new timecards again, what the project managers did if the timecard got lost or was misplaced, etc.
Synthesis
The observations were written and clubbed via post it notes and classified into various tags. This helped me in identifying common pain points the user faced among the various disconnected observations.
![Tags developed to parse the data collected](resources/images/projects/timecard-entry/tags-developed-to-parse-the-data-collected.png)
Tags developed to parse the data collected
Ideation and Experimentation
I created userflows to prioritize the steps and the information that would go on each screen which in turn helped me in identifying the pain points to create rough paper prototypes to quickly test with our target audience. User testing results gave a glimpse of not only the interactions that the target population had within our product but also as to how they held devices in their hands to input information at various stages, how they changed the device orientation for various tasks, how they preferred thumb interactions for certain tasks but finger interactions for others, etc. This feedback helped me in creating a more robust prototype that ended up closely mimicking the actual product. The step by step user flow of how the user can create a new timecard is given below.
![Example of Workflow and paper prototype](resources/images/projects/timecard-entry/example-of-workflow-and-paper-prototype.png)
Example of Workflow and paper prototype
![Example of Workflow and paper prototype](resources/images/projects/timecard-entry/example-of-balsamiq-wireframe.png)
Implementation
The images are the high fidelity designs of the screens that were used for the final user testing. These designs represent the final product that was shipped.
![Screen to enter hours for employees](resources/images/projects/timecard-entry/screen-to-enter-hours-for-employees.png)
High Fidelity designs of screens: When user selects employees, cost codes and creates a new timecard
![Screen to enter extra information for the selected employee](resources/images/projects/timecard-entry/screen-to-enter-extra-information-for-the-selected-employee.png)
High fidelity designs of screens: When user enters hours for the employees and wants to add extra information