Scene_1.png

Counting Clock App

UX/UI design / Mobile app

Counting clock is a mobile app allowing a user to count up or down. 

 
  • Work type: Class work (NYU ITP, 2017) / Individual work 
  • My role: Concept creation, research, UX/UI design, prototype  
  • Media: Physical prototype / Mobile app
 

 

Task & Goal

Design a mobile app version of a  counting clock allowing a user to count up or down and taking the most advantage of the mobile application. The single object should allow the user to easily record single increments of change – either counting forward toward a target or backwards from it. 

 

 

Target audience

  • Target age: 10 - 60
  • All genders 
  • People who wants to keep a numeric tally and have a reminder of their progress to display for themselves and others.

 

 

Persona

 
 
bored-woman.jpg

Rachel (30, PR Account Manager)

She finds her job boring and is constantly tracking the number of days until her next vacation. She is looking for a fun way to motivate herself by tracking the number of days until her next vacation.

 

business-man-with-laptop-drinking-coffee-in-a-cafe_1303-6035.jpg

Jon (32, Sales Rep)

He drinks too much coffee and wants to scale back. He is looking for a way to easily track his coffee consumption by counting the number of cups he drinks.

 

 
 

Understand the product

 

"What functions are a counting clock app needed to have?"

 

I started to research about a physical count up and down clock first. Because a physical clock has an advantage that a user could easily check it often with putting it in their working place or at home. After checking it, I researched mobile apps already released to the public. The most remarkable feature of a mobile app was a different visualization to express each counting clock's subject. 

 
 
motionchat_architecture-26.png
 
motionchat_architecture-18.png
                

               

 

Insight

'Visual element to display a user's progress is the key to encourage users to use the app.'

 

 

 

Brainstorming

To create a different visual symbol for the app to display a progress 

motionchat_architecture-27.png

 

Symbol idea

I chose a running horse as a symbol to run for a goal because it has energetic image to achieve a goal. 

 
1200x450_racing.jpg
 

 

 

Prototyping a physical counting clock

 

I created a physical version of a counting clock first before actually making a mobile app.  My goal of the counting clock was to make it with simple counting up and down functions and instinct UI design. 

Screen Shot 2018-07-03 at 8.09.02 PM.png
Screen Shot 2018-07-03 at 8.09.10 PM.png

First design: 

There are two dials on the each side, and each of them controls each digit from 0 to 9. On the top of the counting product, slide style button indicates that it counts up or down. If you want to set up digits, put the button in natural.

 

Revised design: 

The first design was not enough to give a user a motivation with a visual element representing the progress of to a goal. I put this attempt on my second version of sketch. On the top of the it, I put a running horse as an indicator, which could move left or right according to the setting of counting up or down. If you want to use this clock as a counting down clock, set the setting button to the bottom and put the horse at the end of the right edge. As a number counts down, the horse moves to the left finish line. You could turn its head and location by hand according to your setting. 

 
 
Screen Shot 2018-07-03 at 8.09.22 PM.png
 

 

 

App design sketch

 

After making the physical object, I tried to make this as a mobile app version counter. Here are what I considered in the ideation stage.

       

        <Considerations> 

  • How to represent the running horse indicator to 2D graphic design?
  • What kind of touch interaction gesture and data input method will be fit to represent the similar physical interaction to adding and subtracting numbers? Tap or swap? Select number button or typing keyboard?
  • Let’s minimize page amount and make simple navigation to use
  • Are there benefits only an app could give? 

 

I thought multiple counters could work together in the app and it could be the most significant benefit of its mobile version. The challenge was how to make it simple to use and how to navigate between pages efficiently with this additional function.

I hoped that this application could have multiple countdown clocks that run simultaneously, taking the most advantage of the mobile application version. The challenge was to make it simple for the users in terms of efficiently navigating between pages through additional functions of the application. 

motionchat_architecture-28.png

 

 

Solution

counting clock portfolio f-02.png

1) The maximum counter amount is three.

I did not want a user move each counter pages through the counter list page. My solution was making only three counters space in the setting and a user moves each of three by swapping screens to left or right. For example, If there are four counters and  an user want to move to the third counter page to the first one, the user has to pass through the second counter. But if there are only three counter pages, it is a kind of a circle, the user could move the others by just one swapping gesture. 

 

2) Using slide button to choose between counting up or down. 

In the counting up setting, the data input label is changed from “start number” to “end number” to set a goal. 

 

3) Using running horse animation to show the progress

I made the horse running on the circle rather than running the straight line like the physical counter considering the small screen size. The horse runs to the clock-wise or counter clock-wise to the final line, the carrot, according to the counting up or down. 

motionchat_architecture-30.jpg

 

4) Using drag gesture to change numbers

After the setting, users could see the main counter page with the gesture animation guide.  I wanted to represent physical action like putting something in or out in a basket. If the counter setting is up, users drag the screen with their finger from outside to inside of the circle. If the counter setting is down, just drag the screen with your finger from the inside to outside of the circle.

 

5) Creating the final page for motivation when a user reaches their set number. 

 

 

 

App flow

 

User test I_Paper prototype

 

 

<Feedback>

  • In the main counting page, the title of the counting clock is set vertically. It is shifted to the horizontal layout for the readability.
  • In terms of the counting down clock for days, it is a little bit uncomfortable that the remained days are not counted down automatically.
  • A cancellation button for adding or subtracting numbers is needed against the wrong clicking.
 
motionchat_architecture-29.png

 

User test II_Digital prototype after Iteration

 

motionchat_architecture-29.png