Prototype, iOS, Swift
Counting Eye is an iOS app, created for the iPhone 5-7 Plus, that lets you count things without looking away. I came up with the idea while counting the number of children and childcare workers at an event.
Role: UX and interaction designer
Methods and skills: Sketching, Prototyping, Development
What's the Problem Being Solved?
Moving targets are hard to count and interruptions can force a re-count. Existing tools are limited to pen and paper and note-taking apps. A major pain point is that each tool requires a free moment for the eyes, brain, and fingers. Formatting—"kids: 23, adults: 14"— is time-consuming and sharing the recording with others is equally clunky.
Here's what the process looks like:
How's the Problem Currently Being Solved?
Next, I looked for answers to: What makes one solution more attractive than another? What is it about their current solution that makes it difficult to try something new? What anxieties surround potential solutions?
Based on an analysis of the information gathered from researching the domain and situation, I summarized what success looks like with a short story:
"When it's my turn to report the number of kids and workers on the playground and I’m worried I’ll get distracted and forget the numbers before I record them, I want to count and record at the same time, so that I can move on to other tasks."
This short story captures the problem being solved, the surrounding context, the customer's vision of progress, and answers the question, "what can they do now as a result of our solution to their problem?".
"When..." This is the context surrounding the problem.
"I’m worried..." A moment of frustration occuring between counting and recording.
"I want..." How progress is visualized.
"so that I can..." How life is better.
Designing the System
Laying everything out on the table & clustering
I wrote down everything that I believed the app needed to be and accomplish. This became a list of items that I grouped into clusters.
Sketching flows to show how a user will interact with the system
Next, I took my clusters (parts of the system) and began sketching flows. This process allows me to sketch out a rough schematic of how the customer interacts with the system. It also lets me refine the clusters and discover new clusters.
Mapping the Capabilities & Prioritizing the Work
Each grouping represents a capability or area of concern that I prioritized as follows:
- "Must Have"
- "Nice to Have"
I decided to work on the "counting" capability first, since it is the most valuable area of the app.
Designing the "Count" View
Referring to the "Counting" capability cluster, I began to sketch a few ideas for the count screen.
My first few sketches looked something like the one below. The UI is a typical pattern found in similar apps in the app store. It consists of 2 buttons for increasing and decreasing the count, a title for the count, and the current count.
As the image above depicts, this UI pattern fails to satisfy the "Counting" cluster for the following reasons:
- 1. Each count should be easy to increase & decrease the current count
- Buttons get easier to tap as their size increases, but they still make for difficult targets when walking and counting or when counting moving objects.
- 2. Counts can be given titles
- 4. I want to be able to count without looking at my phone
- Multiple buttons require the person who is counting to look first before tapping.
- 7. Should be simple like pen and paper
- 8. Quickly start counting as soon as open app
- 9. Quickly add start a new count after completing previous count
- This pattern usually places the capability to add a new count on a different screen.
At this point, I decided to study my behavior as I counted people, but this time I held my phone while I counted.
I noticed that as I counted, I moved my index finger as a way of reinforcing the "counting" action. I had the idea that I could make the entire screen a button that would register a count each time I tapped it with my finger. Also, by making the screen flash each time I tapped, I could leverage my peripheral vision to allow me to keep my eyes on the objects I was counting and be sure that my taps were being registered.
For decreasing the count, I experimented with swiping left, right, up, two fingers up, etc., but I found that swiping down with the thumb or finger felt the most natural and it was also distinguishable enough from the tap gesture that I felt confident it wouldn't accidentally register as a tap.
After a few more sketches, I arrived at the mockup below:
Prototyping and Removing Elements
I created a prototype in Xcode to explore the following:
- incrementing/decrementing counts
- adding new counts from a 'my counts' screen and from the counter screen (by way of double tap).
- deleting counts
- editing a count's title
- swiping left to right to view all counts.
Reducing the Design of the "Count" View
After playing with the prototype, I decided to remove the following actions from the "Count" view: adding new counts by way of double-tapping and editing the count title. Both of these actions increased the likelihood of accidentally incrementing the count.
Designing the Remaining Views
Taking my prototype and sketches, I continued designing the interactions for the remaining views. Here are a few notes on each screen.
The "Single Count" View
I decided to move the count number from the top-center to the bottom-left. This created a large empty space in the middle for tapping (to increment) or swiping down (to decrement). Nearly every note-taking app opens with a blank “note” that invites you to start typing your note. I wanted to take advantage of that wide, open area that invites a user to tap.
Tapping increments the count and causes the screen to flash at each tap. This allows the user to keep their eyes on what they are counting while the flash observed in their peripheral vision provides the assurance that their counts are registering.
Swiping down on the screen decrements the count.
The "Settings" View
Tapping on the settings icon or swiping up reveals the settings for the current count. The count title, count multiple, and reset value can be set here.
The "Counts" View
Swiping left to right reveals all the counts. New counts are added from the bottom to keep them within thumb's reach. Swiping right to left on any count will reveal the option to delete the count.
The "Select Counts to Share" View
Tapping on 'Select' in the top right makes each count selectable.
The "Share" View
With counts selected, tapping on the share button opens the share sheet with the default option to share via email or text message. By default, the counts are formatted according to the following: "# Count title".
This solution gave me a new way to make progress on a recurring life situation. Prior to using the new solution, I had assumed that counting and recording were necessarily 2 separate steps, i.e. “that’s just the way it is”.
Overall, the solution effectively satisfies the short story because the upfront planning accounted for the facts drawn from the real-life situation of the customer.