Your browser is no longer supported! Please upgrade your web browser now.

New Harvest Timesheet Interface

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.

timesheets_comparisonT

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.

timesheet_project

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.

newtimer

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:

  1. 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.
  2. 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.
  3. 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!

Thoughts or questions about this post? Need some help?
Get in touch →

This was posted in New Features, Product News, Time Tracking.
  • Great job on this update – aesthetics and usability is much improved.

  • Brandstrup on December 2, 2009

    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.

  • Michael Moore on December 2, 2009

    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.

  • Barry Hess on December 8, 2009

    @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.

  • Scott Davidson on December 20, 2009

    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.

  • Chris Scharf on December 23, 2009

    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

Comments have been closed for this post.
Still have questions? Contact our support team →