Timesheet

The project was to redesign an existing time-sheet being used by my office staff. The goal is to make the experience of feeding in the work logs easy and less frustrating.

Problem

Most of the staff at my office complain about filling in their timesheet. They always call IT staff to assist them in feeding the log. The following are some of the major problems they face:

1. It’s difficult to search for a project.
2. It requires 15 minutes to do the entry for a month.
3. There is no provision to add overtime.

Existing Timesheet

User research

User interviewing

So to get an insight into these usability issues, I decided to interview 4 staff members of the age-26, 34, 42, and 54. Selecting users from different age groups helped me to find more variety of usability issues. I prepared a list of elicit questions followed by an open-ended question. The interview was in the form of a conversation of 8–12 minutes each.

Based on the insights from the interview, I brainstormed for ideas and came up with user stories, persona, and a journey map to guide me through the rest of the project.

User stories/Findings

Sign-up/Sign-in

1. I should be able to access the timesheet system instantly without searching for the URL.
2. I don’t want to fill in my user id and password each time I want to do the entry.
3. I should get a quick tutorial on the web page.

Selecting dates

1. I should be able to do the entry for multiple dates together because I work on one project for a few weeks.
2. I should be able to pick requisite dates quickly to feed in my work logs.

Adding projects

1. I should be able to add projects quickly because sometimes I do multiple projects in a day.
2. As a staff in the company, I should be able to sort the projects alphabetically or by date to pick it quickly.
3. I want my previous day’s entry as prefilled projects.

Keying in time

1. I want to key in the time manually because I note down the time in my notebook whenever I start or end a project.
2. I don’t want to spend much time ticking the boxes under every half an hour because that’s very frustrating to do.
3. I should be able to retrieve the last key in time.

Checking the feed report

1. I should be able to see the feed report while making the entry because I need to work for a specific number of hours on a project.

Persona

Based on the ideas generated, I made a user persona to guide me throughout the design process.

Journey map

The journey map highlighted that entering time for the projects is the main pain point for most of the staff.

Opportunity area

How might staff at my office are able to fill in their timesheets easily everyday

Design

User flow

Keeping in mind the opportunity areas, I created a user flow to do the required tasks.

Paper Prototype

I built the paper prototype using the task flow and invited two participants for user testing. I gave them the following user tasks:

1. Make project entry for Monday morning.
2. Add projects to the saved list.
3. Add overtime.

Heuristic evaluation

I got the paper prototype evaluated by the other two UX designers who are working in the industry. The evaluators took note of the Heuristic violations with a severity rating.

Feedback: Users wanted color coding for different projects to identify their inputs.

Wireframe

I used the feedback received on the paper prototype to solve the usability issues and build the first fully navigational wireframe. I asked one of my friends to complete the task on the wireframe and I watched him doing that.

A/B Testing

In the previous stage, I figured out that one of the components was really causing pain for the user. So I redesigned that component and invited 4 of my friends to do the user testing over coffee. I assigned two of them with Design-A and the other two with Design-B. This helped me in improving my design further.

Visual Language

I used the visual language to develop the wireframe into a high fidelity prototype. Then I ran another user test to find our other usability test. This helped me in doing some more iteration in the design.

Final Prototype

Click here to see the final prototype

Login Page

Landing page / Timesheet

Add a project in Timesheet

Learnings

1. Don’t make users think

Users don’t want to think while they are using a Webpage, so I had to make it very easy to understand. I introduced drag and drop features to make things faster.

2. All users are different.

Different users use the same webpage in different ways. There can be multiple ways to solve a problem, so I made the provision to add projects in different ways like “right-click” and “drag and drop”.