I had a user test with ITP friends, and received various feedback that I did not expect. I realized why a user test is essential after the design. The next step will be developing UX and UI design based on the user test feedback.
I was confused with numbers because there is no number unit.
In the main counting page, the title of the counting clock is set vertically. It is shifted to the horizontal layout for the readability.
I do not know the horse icon is an indicator of the process.
In terms of the counting down clock for days, what about using the calendar API? It is a little bit uncomfortable that the remained days are not counted down automatically.
In addition, I realized a cancellation button for adding or subtracting numbers providing against the wrong click.
I tried to make two pendulums and it succeed to connect the second string to the first bob. But the second bob seemed like not moving well, and even looked like it was stuck on the groud. I changed code and tried to figure out, but I have not solved it yet.
It was a difficult assignment to make a connector. Because the shape of a connector depends on its function, which means that the shape should be different where it is attached, and most of great connectors are already invented!
I just thought about how to connect without its function.
During searching connectors and brain storming, it came up to my mind that making a palanquin with arms when I did a lot when I was a child.
And this reminded me Lego arms.
I thought it is easy and funny way to connect two things.
Goal: create a screen based/mobile version of your counting device.
I have to think about the below lists when I convert the desktop counter to a mobile app.
How to represent the original idea which is a running horse to 2D graphic.
Interaction method : click or swap? button type? typing type? etc.
try to reduce steps to use and app pages
new benefits only an app could give users
The fourth part is the biggest difference with the desk counter. I thought that I could add multiple counters which was unnecessary on the desktop version to fulfill its simple and easy function. But the challenge was how to make it simple to use and how to navigate between pages efficiently with this additional function.
I played with this for a long time and designed like this.
Users only set max three counters. => I did not want users navigate to list page to switch a counter. So, I made only three counter space and users could move between three with swapping screens to left and right in their main counter page.
I also made simple counter list and put only delete button to remove each of them.
I used a slide button to make users choose between counting up or down. When users click the list button on the top of the screen, they could see the list of counters. The max counter amount is three.
After the setting, users could see the main counter page. Right after this page is shown up, the gesture animation let users how to add of delete numbers. Now, how to count up or down on the screen? I wanted to represent physical action which was putting in and putting out something. 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.
I also want to show the final page when users count up or down till their set goal. Counting down clock was easy to connect to the final congratulations page, because counting down to 0 means that they achieve their goal. However, in counting up case I should put “end number” setting instead of “start number”. Moving horse image, final page and setting page were all connected, so it was the hardest part of this ux design. Because, if “start number” setting is used in counting up counter, the horse should be run repeatedly and there is no way users could see the final page.
To check the interaction, I made the navigation map.
Design a physical object that can sit on a desk that allows a user to count up or 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 and others on their desk.
The single object should allow the user to easily record single increments of change – either counting forward toward a target or backwards from it.
Bring sketches AND a rough physical prototype to class. Post your work to your blog. Below are two personas related to the assignment.
Rachel is a 30 year old PR Account Manger working at Havas. She finds her job boring 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 is looking for a fun way to motivate herself by tracking the number of days until her next vacation.
Jon is a Sales Rep for google. His job is stressful and he has developed a bad habit of drinking too much coffee. He is trying to cut back because he can’t sleep at night. This winter he is up to 4-5 cups a day. Jon 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. Jon is looking for a way to easily track his coffee consumption by counting the number of cups he drinks each week.
I made this as a simple object.
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 the middle.
But I wanted to show users the progress to achieve a goal visually. I put this attempt on my second version of sketch. On the top of the product, I put a running horse or a runner figure which could move left and right. If it counts up, this horse moves to right. If is counts down, it moves to lest. Users could see their progress and could make this horse arrives at the finish line.