Timeline
Jan. 2020 to May 2020
Task
Design a series of creative and expressive interactions that go well beyond "usable" to achieve "delight."
My concept is designing interactions for an app that educates users on brewing coffee and walks them through how to do it themselves.
View my process work here.
Concept
My chosen "client" is Counter Culture Coffee, which I chose because I love their coffee and I love their packaging design. Each one of their blends is packaged in a different color bag, but they are all sort of muted and not too loud or overpowering.
My visual direction, inspired by their branding, is a watercolor illustration style that is exciting and fun but maintains a low profile. I wanted to make the interactions unique, focusing on having the illustrations themselves being the interactive elements.
Start Button
This is the launch button to enter the app. There are 4 states: inactive, active, hover, and click.​​​​​​​
Toggles
Left: On/off toggle switch for a kettle to start heating water for coffee
Center: Slider to control how much coffee the user wants to make
Right: Carousel to control the coffee to water ratio, with corresponding suggested brew methods
Radiobuttons (left) & Checkboxes (right)
For this interaction, I switched to watercolor to make the illustrations instead of Photoshop.
This is a list of different origins the user can select they want their coffee from. Only one can be selected at a time, unless the "Create a blend" toggle at the top is switched on, which allows the user to select multiple to create a blend.
Next Steps:
1. For the start button, improve the bean explosion animation on click.
2. Consider making the illustrations and the actual buttons into separate pieces.
3. Consider adding a notch or separate slider to control the amount of coffee.
4. Potentially just re-do the first two sets of interactions in watercolor.
Back to Top