[Week4] Making a connector

  1. Goal: Making a connector.
  2. Sketches

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.

Here is my connector inspired by Lego arms.


[Week3] Design a physical object-Part3. Mobile App version UX design

  1. Goal: create a screen based/mobile version of  your counting device.
  2. Process

1) Sketch

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.
























2) Design

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.

3) Navigation

To check the interaction, I made the navigation map.



Design a physical object



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.

Chocolate box APP


Design an app that provides chocolate lovers opportunity to customize a box of 12 chocolates from a set of 6 options, each available in milk or dark chocolate.

<My solution>

I started from how many choices a user had to do before clicking the ordering button.

1) choose 12 chocolates

2) choose the taste between dark and milk for each 12 chocolates

3) choose the amount of chocolates for each tastes

4) final check of the amount and tastes before the order


There were several steps and variables to make a one chocolate box.

So, I started this with a list style design.

First column was names of taste and the second column was description about it. The third and fourth columns were milk and dark tastes button and the last column was for choosing the amount.

In this case, no images and a table chart style, it looked complicated and it was impossible to imagine how chocolates looked like. And the biggest problem was users have to interact with many small buttons and it was hard to know intuitionally how many chocolates they choose. Moreover, one more web page was needed to check they order it properly or not before the final order.







<table style>








<final checking page>

So, I tried with real images with chocolates to make this pate more intuitive. Six circles are chocolate images and names, dark/milk choice button and amount box was put under the each images. It looked better than the table style. But still have issues about the difficulty of choosing chocolates, notifying how many chocolates were chosen and which were dark and milk among them. And the final checking page was needed.







<Using images>


So, I thought what about let a user put a chocolate physically into a box and show it directly in one page? If it is possible, additional final checking page was not needed and user interaction was much easier.

Making chocolate box page is only one page. There is a pop-up, an instruction was shown to users. When they touched OK button, they could see the page.


I made the way to choose a chocolate or cancel it with dragging it. I thought it was the most intuitive way like a physical interaction to make a personal chocolate box. To change the dark taste, just double tap the chocolate you choose. All of tastes are set up with milk taste. You could change to milk taste from dark with double tap it again.



After you tap OK button, you could see this page. Six chocolates were shown with real images and its manes. A little crown icon indicated which flavor was popular. In the above image, caramel and cinnamon were popular products.

For choosing this small badge was not easy. The easiest icon to be understood was written with ‘Best selling’, but in a mobile app, I though it was bad choice in terms of readability. ‘Heart’ or ‘Facebook thumb’ shape were also considered, but I assumed they were misunderstood as voting a taste. I finally chose a crown image which could represent No1. and glory.





<badge images>


If users drag chocolates into a box, it looked like this image. In this case, a user choose two caramel taste, one was dark and one was milk, two cinnamon like caramel, and one mint and milk taste. When a user double tap a chocolate chosen, the color of the section was changed to black. I choose black color to represent DARK chocolate without description.

You chould see how many milk and dark chocolates were chosen with indicated number. The good thing of using this box image was I did not need to put how many chocolates were chosen or left. Because you could see empty sections directly, so total number was meaningless.

After you fill the whole box, then just move the order page with clicking the bottom button.

<Chocolate image source: http://www.mrchocolate.com/>


Everyday observation

<Day 1> Fri. Jan 27

I saw “kids size” on the package of my mask. I used it several time but had no idea why it is a little bit small for me. Now I know the reason. It was a quite surprise because that notification is written with pretty big size in front of the cover.”

<Day 2> Sat. Jan 28

I went to the cafe in my neighbor which was my favorite one. I did not visit there during the break, so it was a long time to be there. The arrangement of tables was changed and a round table which was outside was now inside. That new placement looked unstable and made me feel uncomfortable to stay. I thought it was the last time to come here.

<Day 3> Sun. Jan 29.

I had brunch with my roommate in my neighbor. It was about 11 o’clock and there was only us in the restaurant. The color warmth of the sunshine through windows was really beautiful and peaceful. I feel light the scenery was looked like a painting of Edward Hopper.

<Day 4> Mon. Jan 30.

When I was on my back home, I found this pink light above my head. The only light was pink and the color attracted my attention. And if I did not look up the sky, I did not know that there were lights.

<Day 5> Tue. Jan 31.

After the snowing has gone, there was LOVE on a bicycle saddle. One of my friend said it looked like balls and penis. But I want to say this love.

<Day 6> Wed. Feb 1.

I saw a new street cat living my neighbor. I did not know it is a boy or girl, but the size was pretty big and and had a big dot next to its nose. The color was mixed with white and orange. We could have eye contact for a while.

<Day 7> Thur. Fab 2.

I found this letter on the ground of Washington square park. It seemed lilt “In pursuit of magic”. I could not guess what is the meaning and who wrote this what what is this for. Because it was really hard to find out there was a letter on the ground. So when I saw this, I felt like I found a treasure hidden in the city.

Good and bad user experience

  1. Good user experience

1) IKEA lamp

This is a small and light table lamp from IKEA. I have used this for several years and still think this is amazing. It has ‘visibility’. We could know how to use this intuitionally without any explanation, and also has beautiful color as well. More over, it is very light and portable, so I do not need to hesitate to throw it away whenever I move.

You could change its direction really smoothly and it does not take much portion on a desk, so you could keep your desk clean. There is only one button to turn on and off. Very simple. Yes, we do not need any other function for a desk lamp.

If I would like to fix some of its design, I would like to

  • make button small and change color with the same color with its body: Only one part makes me bother in its appearance is the size of the button part. It is slightly big compared to the whole size of the lamp. And there are on and off side button, and it could be only one button and it could turn the light on and off with the same button.
  • make the supporting part to the desk more flexible. I mean it is fit to set a desk, but if I want to set it in a tick place, it is impossible. If I could adjust the width like a clamps, there is more possibility to use in everywhere. But at the same time, it might be make this to use a little bit annoying. 


2) Clips

I believe this is one of great inventions in the world in terms of visibility and constraints. The two handles let us know to push to open a clip and it is pretty strong to hole a bunch of papers. We could bring it everywhere and use with different size of clips for each purposes. I normally use them to enclose a food package. So it is not only a office supple. 

2. Bad user experience

I do not know how to call this and really want to discuss about this in a classroom that other people could understand this. When I used this for the first time I was not sure that I pushed this or not and it worked or not. Now I know “Stop request” sign was reaction of this, but it still makes me really confused.


If I could change this I will be add the sound as a reaction and make people could change it is pushed or not. The feeling and sound is needed.