counter1

Counter App

Goal: Systems for counting measurable activities
Class: Designing Meaningful Interactions, ITP, New York University
Duration: 2 Weeks
Role: User research, Wireframes, Visual Design
Tools: Adobe Illustrator, Adobe Photoshop, Adobe AfterEffects, Balsamiq

This project evolved into a minimalist physical object (walnut + turned aluminum) and later to a concept app that allows a user to keep track of their measurable activities by counting up and down. The target audience is someone who wants to keep a numeric tally and have a physical reminder of their progress to display for themselves on their desk.

Jon is a Sales Rep for an IT giant. His job is stressful and he has developed a habit of drinking too much coffee. This week he was up to 4-5 cups a day. He is trying to cut back because he knows the ill-effects of overconsumption.  He loves coffee and doesn’t want to quit, he just wants to scale back from almost 30 cups a week to a limit of 15 cups per week. He is looking for a way to easily track his coffee consumption by counting the number of cups he drinks each week.

Rachel is a 30 year old PR Account Manger. She finds her job tedious and lives for her vacation. Some days she feels she cannot make it to 5pm without knowing that there is a vacation on the calendar. Rachel is constantly tracking the number of days until her next vacation. She would enjoy a fun way to motivate herself by tracking the number of days until her next vacation.

I started with a mindmap, jotted down scenarios and tasks around this activity, and looked at the possibilities that this product can offer:

mindmap

I decided to take a step back and stick only to counting up and down for the physical object, becasue

  1. Introducing too many smart features for a seemingly simpler activity might backfire. Achieving usability by sacrificing delight could be a risky tradeoff.
  2. The users are surrounded by a huge number of gadgets already. Introducing another one should be a very careful decision.
  3. The device should look inviting and feel satisfying when operated. I think this is the key to this exercise.

I enjoyed spending a few hours on band saw, metal lathe and Adobe AfterEffects. Much inspired by Dieter Ram’s design principles, I made this prototype:

The prototype offers a knob and a display. The knob affords clockwise and counterclockwise turning with regular rotary steps, which changes count up and down respectively by 1. It is a knob with fixed snap-to points. This offers a satisfying, tactile feedback when the count goes up or down.

IMG_6815

I considered following points while translating the earlier physical prototype into a smartphone app:

  1. The physical device had a tactile feedback that made it a unique and beautiful. The smartphone should deliver similar sense of acknowledgement.
  2. The smartphone app can take advantage of what could not be (and should not be) achieved by a simple physical object: Connectivity, tracking and perhaps memorizing user’s behavior.

Following are the sketches of digital version created using Balsamiq:

The first row shows a landing screen with Add New action screens next to it. User can write a title (and select one from the list of already used titles, as they start typing), select whether to count Up or Down, assign start and stop points, and attach a background image.

The second row shows the list of ongoing activities and a specific entry from that list (Coffee). Third row and the last screen show further explorations within the activity, divided into three categories: Settings (edit, delete), Performance (count up/ down, undo, see performance graph- this is default view within a selected activity), and Share(share your performance on social media such as facebook, twitter, instagram, google+ etc.). Smartphone would vibrate to provide a quick haptic feedback when user counts up or down- this retains the impact of acknowledging every single step the user takes towards achieving their target.

New Mockup 1

COFFEE3

coffee_countup coffee_edit

Tools: Balsamiq, Adobe Photoshop, Aftereffects