The <joe> Button

September 25, 2015

Source
Overview

My "client" Sharon is a gamer. She like Nintendo games such as Animal Crossing and Pokémon. When it's the time to eat, Sharon prefer junk food over veggie (especially dislike onion) with some raspberry to finish up.

Sharon value her family and friend greatly. Following up would be her video game collections and technology devices. When asked about favorite animal, she says she like dog, any breed of dog.

So base on the "trait" I gathered from her I came up with this design that incorporated all her likes and dislikes and I call it the Sharon Button.

Sketch & Refine

After the interview with my "client", I came up with few sketch of how the button might look. One of the most promising is the sketch call block button. (circled in Initial Sketch image)

Idea of the block button is quite simple. The button itself is a block from Mario game. Not only the look, the function of the button pretty similar as well. When user click on the button, the button will move upward and pop an item that represent “client” interest.

For the first refinement, I came up with different version of the block button. The variation I like the most is the version 8. (circled in Initial Refinement image) The block button for version 8 change from click to drag. Every time user drag the button, an item represent “client” interest will fall out of the button. After a fixed number of items dropped out of the button, a crown will appear onto of the button to indicate user “win”.

After the group critique, I'm not satisfied with the design of block button because I feel like my design is really “monotone” and it shows little to no character. However, I still like a few element from the block button, such as the mario block. Therefore I decide to make a few change to the block button design instead of completely redesign.

The ideas I borrow from block button design is the look for the button and the fact that an item will drop when clicked. The “new” design add few more element to the canvas to give some character, like the food bowl to catch food dropped from the button and a dog that will eat the food. When the dog eats a food “client” likes, there will be a heart pop up on top of dog's head. The heart will float a little then it became a memory “orb” which contain the things “client” value the most. If the dog see the food “client” doesn't like, it will be sad and go back to sleep, the “orb” will run away in fear, thus reset the button. (In Second Refinement image)

Initial Sketch
Initial Refinement
Second Refinement
Prototype

When user click on the button, various food will drop from the button. Once the dog eats the food, a memory orb will spawn that contain image represent client's interest.

After all 5 orb spawned, a onion will drop and thus reset state.