Last week we pushed through a major interface overhaul for our timesheet section. We’ve spent a lot of time thinking, designing, and tweaking the experience, flow, and interface elements on the timesheet – and we’re really excited about the latest improvements. Here’s a summary of what we have done, and why.
Overall Structure and New Skin
The new timesheet might look completely different from the old one, but we have maintained the overall architecture from the previous design. We experimented with different layouts that could have improved the experience and speed of the timesheet, but in the end, we decided to not introduce such a radical change for our current users.
The biggest change you’ll notice is the new silver, metallic skin. The old look was yellow and boxy – and completely out of date (it is three years old, after all). We wanted to sport a fresher, lighter look. We stripped out unnecessary lines and headers, rounded the corners, and increased the overall font size, so that you don’t need to squint your eyes to read the 11pt text. The add entry box is now part of the timesheet, so adding and editing entries shares the same look-and-feel.
Client, Project and Task
The most important pieces of information on the timesheet are the client, project and task of each entry. We used to lay out that information using one line: client / project (task). It works, but it’s hard to quickly scan down the timesheet to find a particular time entry, so we decided to improve the experience.
From our research, we found that some customers care most about which project they’re working on; other customers generally work on the same project each day, and they care more about the different tasks within the project. We wanted to design the information so that everyone can scan the lines to pick out the piece of information that is most important to them.
We broke up the information into: Client > Project, and on a separate line, the task. Client and project are naturally paired, and we gave the client name a lighter tone than the project name. The three pieces of information look slightly different, so that your eyes can quickly scan and pick out the information you care most about.
Timer and Buttons
Many new customers used to write in to ask us how to start a timer, or edit an entry. The main culprit for the confusion is the poor design of our icons. The edit control used to be the gray pencil, which, admittedly, did not look like a pencil. We’ve switched it out and replaced it with a plain ol’ “Edit” text button.
The old timer icon was cute, but it did not look like a button you can click on. Since the icon was small, our customers had to aim for that little circle to click on it. The new timer button is clearer and much bigger. The hit area includes the clock, the word “Start”, and the hours.
We also spent a lot of time tweaking the interaction, so that each button has a hit state and a visual change if you click on something. These are small details that should make the overall experience feel snappier and smoother.
Bigger Notes Area
Harvest used to have just a short one-line input box for timesheet notes, and it served many customers well. We noticed that if you had more than one line of notes, it was not only hard to type in, but when you edited it, it was difficult to find the exact place of the edit. We switched out the old input box, and replaced it with a more generous textarea, which will auto-expand as you type new lines into it.
Once we released the new interface, we quickly received feedback from many of you that the new textarea no longer allowed you hit the Enter key to start the timer, or to save your time entry. We responded by re-introducing support for the Enter key to trigger start timer/save; and for those of you who need line breaks in notes, you can still do that with Shift-Enter (like you would in a spreadsheet cell).
Under the Hood
Our development team has re-written and cleaned up the code behind the timesheet. There may not be a significant difference in the experience, but a smoother engine means a more stable Harvest Timesheet. A big thanks to Barry, Dee and Doug for carrying out this big launch!
Upcoming Tweaks
We’re not done! The new timesheet interface is still settling in for all of us, and we’re gathering feedback from all our customers. We have already been working on some small updates, and there will be more to come soon. Here’s a list of changes you should expect in the coming weeks:
- A better “Stop Timer” button. We have added the spinning clock back, and we’re going to make the animation smoother and make the button more obvious.
- On the old timesheet, the notes field was a regular input field, and your browser would auto-fill data. The new notes textarea does not support auto-complete, and we realize it’s inconvenient for some customers. We’re thinking of ways to solve this.
- We’re still tweaking the timesheet interaction to make the flow even smoother and faster.
The new timesheet isn’t just a prettier face. We’re also adding three new features: the ability to duplicate timesheets (it’s already in your Harvest account, and we’ll have a write-up soon); a recent tasks dropdown; and timestamp support. Stay tuned!
As usual – thank you for your continued support and please let us know if you have any suggestions or feedback! And in case you haven’t checked it out yet, we’ve launched the Harvest Forum, feel free to join in on the conversations!
Great job on this update – aesthetics and usability is much improved.
Very interesting post. I’m curious about a few things:
1) Where did edit and delete entry go? It seems to be missing now, but maybe it’s visible on mouseover.
2) Is the increased font size implemented in other interfaces, e.g. the weekly timesheet, and can you still find space for everything everywhere with the bigger text?
3) Notes could be like tags. Often you’d like to reuse the same text for ease of use and consistency. I think Freckle has some good ideas in that area.
I like your attention to detail. It may not be obvious for the user, but that’s the whole point. It gets out of the way.
I really like the new UI for timing, and the fact that you’re clearly polishing it and refining it as you go is great. Nice job everyone!
These improvements in the timesheet are very good. I was going nuts with the previous notes section as I am long winded in explaining to clients what I do …. but I love this new format. Thank YOU!!!
And support for subtasks is coming soon too, right? Please oh please oh please…
This is much easier to use. Thanks for your continuing efforts. Harvest has made my life better and more profitable.
One problem I’m seeing, aside from the lost autofill (which I’m pining for), is tabbing between fields. The page now has a vertical layout without a break between filed lines and add-new. So if I edit an entry, tabbing between time and notes takes me from the existing entry to the new-task line, *then* back up to the entry I’m editing. Niggling, but worse UX than before.
Actually, I’m playing with it, and the above is true across all fields. Right now I have one submitted entry for Friday. This is the order in which the form fields are highlighted when using the tab key to navigate:
1. Submitted entry (SE)’s Client drop-down menu
2. New entry (NE)’s Client menu
3. SE task menu
4. NE task menu
5. SE hours
6. NE hours
7. SE hours
8. NE hours
Then, when tabbing past the newest hours field, no submit button gets highlighted, so I’m not sure what the next action is.
The old interface was simple and logical in its tabbing behavior. It was a great way to quickly get time entered. Looking forward to the new UI supporting the same ease of use.
YES to timestamps! Yes. Yes. Yes. It’s like, you’re in my mind!…..
PS: Thanks for the great product. One of the few web services that i feel is actually worth the expense.
@David Thanks for taking the time to investigate your tabbing issues. I will contact you directly and we’ll get them sorted out.
How about moving the “Yes” and “No” buttons that show up after hitting “X” (delete time sheet entry) over to the right. So I don’t have to mouse back and forth, back and forth, if I don’t end up using all the entries from the “duplicate timesheet” feature.
The changes to the interface are phenomenal! You removed our number one challenge that was driving mis-entries: side by side vs. stacked Project/Task dropdowns. Previously people were missing the task entry or defaulting to the first project. We’ve seen an immediate improvement, so thanks for listening!
Brian
I’ll second the comment Ben made about moving the “Yes” and “No” buttons for record deletion. They should appear close to where the delete click action occurred.
How about a single bar for entering time, starting timers and choosing clients? http://minutedock.com ;-)
+1 for the single bar entry method. Kind of like quick add for Google Calendar.
I am really missing the row highlighting in Week view… it used to be a lot easier to tell which project I was entering hours for (I almost never use Day view). I’ve already made mistakes on my timesheet since row highlighting went away (even though the design change happened awhile ago).
A couple of weeks after the new design launched, I have to say that I’m still very unhappy with the client, project and task on the weekly timesheet. I’m one of the people who mostly cares about task, and I have multiple tasks under each project. When the tasks were at the end of the line, I could quickly scan down and identify the one I needed. Now that they are buried under client and project, they’re much harder to see.
It’d be great if you could offer a choice of project-focused or task-focused layouts, rather than giving everyone the same view.
When will be able to change the work week? Our week has always been Sunday to Saturday. It’s embedded in our QuickBooks history so we can’t (and don’t want to) change it.
I personally enjoy the new layout for the “client, project and task” information. I’m curious if it’s going to carry over into the mobile/iPhone view as well.
@Chris There’s a new iPhone native app in the works and we promise it looks (and works) great. Hang tight for updates on this in the coming weeks.
Timestamps would my feature request. Thanks for the improvement so far.
Mike – timestamps feature is coming next week.
one of the simplest & easy to use application i have ever used. just liked your application very much. Thanks for making by business life simpler