Designing a counter app for the iPhone.
Counting Eye is an iOS app that I created for the iPhone 5-7 Plus. I came up with the idea while counting the number of children and childcare workers at an event.
Each month I have the task of recording the number of childcare workers and children and sharing those numbers for planning purposes. The children are outside on a playground while the child-care workers are standing or sitting nearby. I usually count while standing near a building exit which is over 100 feet away.
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?
Customers can use a variety of products to solve their problem. They also aren't limited to predefined product categories. 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?
These questions and their answers can be diagrammed like so:
Based on an analysis of the information gathered from researching the domain and situation, a short story can be crafted to define what success looks like.
"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 an App to Solve the Problem
I decided that an app was still a good form for the solution to take. I rarely leave the house without my phone, while analog tools like pencils and scratch paper are easily forgotten.
From here, I set out to design the app's system, starting with a brain dump.
I creating a list of what the design should accomplish and grouping related items.
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 de-coupled area of concern. I categorized each capability and it's sub-components as one of the following:
- "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.
This is the final design for a counter app I designed and built in Swift for iPhone 5-7 Plus. Read the case study above for details on the design process.
Taking my prototype and sketches, I pushed forward with the visual design. 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".
I believe my solution was successful because it gave me a better way to make progress that was not immediately obvious. 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”. This solution was not a shot in the dark, but a decision based on research.
Style-wise, the focus on clear communication makes the app look uninteresting. On the functionality side, I think the “reset” button is awkward, positioned above the current count. I might experiment with removing the feature, since I rarely use it in practice.
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.