August 8, 2020
This week I attended a UX workshop hosted by Katherine Dillon, a professor at NYU’s ITP program. She went through some UX fundamentals before asking everyone to mock up our own UX in Figma in response to a prompt called the “Chocolate Box Exercise”.
The premise is that your app allows a user to select 24 chocolates for their box. Each chocolate can be one of 24 flavors and coated with either milk or dark chocolate.
I wanted to go with a simple single page interface, rather than a series of decisions and pages. The user should feel like they are designing rather than selecting. The feedback grid at the top allows for emergent design patterns.
Need to fit this all on one page / no scroll because no one can remember 24 things at once.
1. Grid of 24 dots. The stroke corresponds to light or dark chocolate, the fill corresponds to choice of filling.
Touching / dragging will update dots with the settings chosen below. A second touch or drag will unset the dots.
Selecting / unselecting will include haptic feedback
2. Horizontal selector for filling.
Swiping right or left will cycle through choices. As a choice approaches center it will stick to center and become bold.
As a filling is centered its image will appear below.
3. Image of filling. Includes subtle background cue to corresponding color of dot (see bottom right corner).
Stroke color corresponds to choice of dark or light chocolate.
Tapping image will toggle between dark and light choices. Includes haptic feedback.
4. Continue button.
If all slots aren’t filled user will be prompted with choice of continuing to select chocolate or filling the empty slots with random chocolates and proceeding to checkout.
If prompted for a decision, include haptic feedback.