I have a few more Hawai’i posts in the works (see the previous posts), but I wanted to step aside for a moment and talk about my new iPhone App HourTracker, which is now available on the App Store.
The Pitch
First, the obligatory self-promotion (feel free to skip ahead to the next section).
Keep yourself on track with HourTracker! At just $0.99, it’s a steal! Track your time across numerous projects and clients using an intuitive punch clock and time card interface. Visualize your data in new and interesting ways. Export your data for further analysis. If you have questions, take a look at our handy-dandy FAQ and if you cannot find what you need there, please join the discussion in the forums.
And now back to our regularly scheduled programming.
The Design Process
Since this blog is meant to be a record of my creative endeavors, and with the app now in the wild, I thought I might blog odds and ends about my design process, both up to now and moving into the future. I’ll focus especially on things like the user interface (UI), iconography, and graphic design. Though I hail from a primarily technical background, I will steer fairly wide of programming minutia here. And as I (hopefully) collect new users, I will report back about what seems to be working for folks and what does not. Hopefully we can learn something together as we go.
My Initial Approach
Today I will start with a quick overview of what the app does and how that informed the first big picture UI decision.
As often works best when designing a piece of software, I was solving a problem for myself, which is that as a recent entrant into the world of freelancing, I wanted a good time keeping app. I was trying to use Excel and later Apple’s Numbers to record my hours, but I did not always have my personal machine with me when I needed to record my time, and it was just a cumbersome way to do things. So I looked around to see what time keeping apps existed for iPhone, and I found that there were indeed some, but none that looked exactly like what I thought a timekeeping app should look like, or did exactly what I wanted.
Apple pushes the idea, and I agree with it, that an app should be simple and streamlined, should perform one task very well, and should look and feel like what it pretends to be. Take their Voice Recorder app as an example. It looks like a giant microphone with a record button and a level indicator. No question what to do with that. It does one thing — record your voice. Yes, there are a few views besides the main one, for example to sort through your previous recordings, but this is kept to a minimum. And you dwell mostly on that central view.
I wanted to do a time keeping app like that, except in my case, based around a punch clock and time card. I’d seen apps composed entirely of tables jammed with text, and I could not tell how to punch in. Tap around a bit, and I guess you eventually figure it out. But it should be obvious. Big fat clock and big fat punch button, just inviting you to tap it, right in the middle of the screen. My solution looks thus (as of the 1.0 release):
I designed my app around this central interface. Yes, there are other views that support other activities, such as modifying individual entries, exporting, etc., but they all hang off this main view. You start on this view and you dwell on this view. Everything else orbits around it. I felt this was a critical design decision and it colored much of what came after.
Furthermore, it was important to me that it have the feel of a traditional punch clock and time card, to the extent that I was able to mimic that in my graphic design. I think I captured that reasonably well.
The challenge, of course, is to make the UI appealing and clean, but also to give the user enough information when they want it. As you can see, the time card in this view is rather small, with half the screen given over to the clock. So in 1.1, which is now in development, I have added a feature which allows you to pull the time card up over the clock, revealing more entries. More on that later.
One last thing to mention up front is that something I really want out of my time keeping app is quick and easy data visualization. I want to be able to see what my hours look like over various time scales, where the time is going (which projects, which categories within a project), and so on. Toward that end, in 1.0 I have implemented a bar chart that shows the last week of activity.
You swipe the time card aside to reveal this graphical view, something like what you find in the native Stock App. For now, it is fairly simple, but in upcoming updates, I will be adding significantly to this feature, with lots of new ways to visualize your data without substantially disrupting this main view.
Well, there is a lot more going on here, but that is enough for now. I will post additional bits and pieces as I continue to develop the app.