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.
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.
<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.
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.
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/>