timecard -...

TimeCard Process Book

Art 337 – Interaction Design

David Clayton

Contents

Chapter 1 | Presentation

Introduction

Exploration

Demo

Chapter 2 | Process

Sketch Prototype

Wireframe Prototype

Wireframe Revision

Final Prototype

Learning Summary

Contact

Home

Chapter 1

Presentation

Home

TimeI’ve been doing some freelance work lately, and found a need for keeping track of my hours. Some people may not trust you if you can’t prove that a

design job is worth how much you say it is, so having a detailed record of your hours can be an advantage. After all, time is money.

Home

Home

Money So I went looking for an app to track and manage my hours. There’s a whole slew of them on the App Store, but the ones that looked actually useful were

a little pricey. They ranged from around 2.99 to 6.99. I know it often takes money to make money, but there had to be a better solution.

Home

What’s out there? Each of the affordable apps had elements of what I wanted, but I didn’t see one that had everything. After reading through the reviews for

each one, I decided that I should just compile a list of everything they lacked and make my own app to clock in and out of work and track my hours.

Home

Home

TimeCard

So TimeCard was born.

Home

Home

Clean. Straightforward. It works.

Home

No. Yes.

TimeCard needed to be beautiful. I was tired of seeing apps with pixilated, generic backgrounds with random pasted text.

The app to the left makes no sense. A digital scroll with a random pot of gold (or whatever that is) sitting on it? Timecard needed to be clear and simple.

Home

Home

Features lacking in other apps:•Change the day the

work week starts on•Add/Delete days•Have no break•Auto Save•Military Time•Simple design•Overtime settings•Change hourly wage•More specific than every

15 minutes

Home

http://vimeo.com/76447899

Click the above image for a demo of TimeCard in motion.

Otherwise, continue for a frame-by-frame of how TimeCard works.

Home

Home

TimeCard

(someday)

Home

Chapter 2

Process

Home

Sketch Prototype

Home

The Start

My initial idea was to have an app that showed how many hours have passed between two time periods. I found a need for this while doing my internship because I had to keep track of my hours in decimal format, which is contrary to the way a clock displays time.

Home

Findings

Upon user testing this design, I found that the clock format wasn’t as intuitive as I expected. In fact, the way the information was displayed was confusing and caused more harm than good. Aside from the clock face, there was no sense of natural mapping.

Home

Smartphones Only

I wanted to use some of the features that are unique to a smart phone, and thought that having “In” and “Out” buttons would be more helpful. These could be pulled apart to reveal a “Lunch” button. Below that would be a scrolling display of the hours worked for the current pay period.

Home

Findings

In the end, there was no particular need for separate “In,” “Out,” and “Lunch” buttons when they could be replaced with a “Clock In” button that would transform when pressed. Simplifying the design was the right direction, but at this point the user still needed some cues as to what the app was for.

Home

I had other ideas for the app to make it a full-fledged digital time card.

Home

I took them further, and was able to user test each screen along the way.

Home

Wireframe Prototype

Home

Wireframe Start

One reason for the first iteration of the wireframe was to create something that was more familiar to the user so that user testing would result in natural feedback. Many of the screens in the sketches were kept the same.

Home

One thing that confused the users was the link at the top of each screen, pointing to a page they could go to, which appeared to be a page title.

Home

Other Suggestions

One user suggested that I should add a back button to each screen. Another suggested that there be a way of seeing how many hours they worked in any given day, month, or year.

?

?

Home

Wireframe Revision

Home

Wireframe Revision

Based on user feedback, I added a title to the home screen so the user would know where they are, the current date, and a quick reference to how many hours they worked yesterday and today.

Home

Home

Click one of the above images for videos of two user test examples.

Otherwise, continue for descriptions on some of the changes made for the

wireframe revision.

https://vimeo.com/76314806 https://vimeo.com/76314807

Home

Settings Revision

Based on user feedback, I included the much needed “Back” button, allowing the user an easy way to escape from the current screen. I also clarified the on/off buttons and made more similar to the format in iOS 7.

Home

Settings Revision

I also utilized some smartphone conventions to make user input easier. I have a scrolling menu for days of the week, a keyboard for input of the job name, and a number pad for hourly wage.

Home

Day, Month, Year

I simplified the day, week, month, and year screens by including a straightforward navigation and maintaining the “back” and “home” buttons at the top. User testing proved this to be the right decision as there was much less confusion.

Home

Final Prototype

Home

Home

http://vimeo.com/76447899

Click the above image for a demo of TimeCard in motion.

Otherwise, continue for a frame-by-frame of how TimeCard works.

Home

Home

Home Screen

Time displayed

Clock in/out

Access timesheet

View hours worked today and yesterday

Access Settings

Home

HomeHome

Home

Settings

Military Time

Change hourly wage

Overtime settings

Autosave on/off

Change job name

Change day week starts on

Home

Home

View zooms when user clicks on editable field.

Home

HomeHome

Home

Today

Adjust time at work

View cumulative hours worked and different shifts

Home

Home

Week

View hours worked for each day

Edit hours worked

View cumulative hours worked for the week

Home

HomeHome

Home

Month

Scroll up and down through months

View individual days

See cumulative hours worked for the month

Home

Home

Year

Scroll up and down through years

View individual months

View cumulative hours worked for the year

Home

HomeHome

Home

TimeCard

(someday)

Home

Learning Summary

The user has all the right questions. It’s the designer’s job to get the user to share them.

When I began this project, I entered it with the

mindset that I could predict what the user really

wanted. I realized my mistake when I first tested

my sketches, and I’m glad that I did early on

because it would have been hard to change later.

I quickly learned that through user testing, we can

extract the questions we need (the problems) and

we are put in a position to find answers to those

questions (solutions).

Home

Questions or comments?Contact me:

David [email protected]

808 .895.6147

Home

timecard -...

Documents