Design a mobile interface that provides chocolate lovers the opportunity to customize a box of 24 chocolates from a set of 12 options, each available in dark or milk chocolate. Focus of your work should be on the step making selections among 24 different flavor options.
Time - Given 20 minutes to ideate and design
Tools and Methods - Sketches on Goodnotes - Wireframed on Figma
This is a detailed documentation of my reasoning behind the in-class assignment which students were asked to answer the question within a short time frame. After a brief presentation of each one’s work, everyone put a star on the works they think nicely met the assignment goals. I got 11 stars from 15 classmates and won the best design.
Minimize the taps or users’ gesture loads to fill the chocolate box with the flavors they choose
Let users freely customize the box
By default, let them fill the empty cavities in order
Plus, allow them to choose a specific cell to place the specific flavor they’ve chosen
Users should be able to view every flavor options in one screen without the need of scrolling, swiping or pressing a button
Even so, don’t cram too much information into one screen
Make allergy notes or flavor descriptions visible without pressing an additional button, while users make flavor choices
Designing the User Flow
To begin, I listed up the things a user might consider when customizing their box on a mobile screen.
Every choice a user should make in order to fill the entire box
The flavor of the chocolate (12 options available)
Dark chocolate, or a milk chocolate?
Once the flavor is chosen,
How many? (count of the chosen flavor)
Where to place them?
To design an effortless user flow, I decided to adopt a real life experience of customizing a box of Insomnia Cookies or BR Party Pack. Build-your-own experiences becomes a lot easier, when we are holding up our own box and picking up the options by ourselves than shouting out every choices to the employee who is taking the order across the glass partition. The errors could be certainly reduced only if users could view the chocolate box being filled up in real time.
I made a rough sketch of the screen that includes a UI of a chocolate box, which users could always refer to while making 24 choices.
Adopting an in-store experience
In an offline store, users would
Grab an empty box
Choose a chocolate flavor and pick it up
Place it in a cell of their choice
and repeat step 2 and 3 24 times to fill in a box of 24 chocolates. I translated this process into a digital experience.
To perform the same task on a mobile screen I have sketched, users should
Start from a blank chocolate box UI
Tap one flavor option
Tap an empty slot to place the flavor of their choice
Based on my assumptions, I made a sketch of a screen which allows users customize the chocolate box like they do in real world.
Improving UX by diversifying the interaction methods
2 taps to 1 tap: an addition of a cursor
In order to perform step 2 and 3 (Tap one flavor option → Tap on the empty slot to place the flavor), user needed to tap on the screen two times. I came up with an idea of a cursor to reduce two taps into one.
Once the user selects one flavor, the cursor moves to the next slot by itself.
User can also replace the cursor to manually choose where to place the selected flavor. (customization option available)
Divide the tabs for Dark or Milk choice
There are 2(dark or milk)* 12(twelve flavors) = 24 possible chocolate options users can choose from. There would be too much information crammed into a screen if 24 selection buttons were visible all at the same time. Moreover, selection of dark/milk and the selection of flavors were two independent events. So I divided the tabs for dark/milk chocolate base to organize the display of information.
Breakdown of UI
With user interaction: The flow of selecting a flavor and an another one consecutively
What if user had made wrong choices? How to change the selection
In a group of classmates, I assessed my design whether it achieves my design goals.
Does it minimizes the users’ taps? ⇒ Required: Min 1 and Max 3 taps are required to choose a flavor
Is full customization available? ⇒ Yes!
Is every information on a screen legible and organized? ⇒ (Through user testing) Received comments that every flavor option was visible and easily distinguishable.
Bringing in real life experiences to create digital experiences
Even in this micro UX assignment designing a segment of a larger user flow, I discovered that adopting a real life experience might give me constructive inspiration about the user interface. Analyzing people’s behavior in real life situations and applying them when designing digital user interface would help us build a frictionless user flow that imitates our everyday experiences offscreen.
Balancing between freedom and usability
I’ve been always interested in designing the interface of the customization services—it is a good exercise to find a reasonable middle-ground between the freedom of users and usability. Too much freedom means loading too much on users to perform a certain task, and on the other side providing a detailed fixed path for users means users aren’t allowed to make free choices. This mini assignment pushed me think of ways to satisfy the users’ needs to freely customize their boxes along with a linear, guided flow.
Still, users would see a blank box ui as they enter the customization screen, which immediately discourages them from keeping on. To reduce the chance of dropping out, adding a screen which users could choose from several pre-designed chocolate compositions might be helpful.