Coffee calculator
Find your next coffee recipe with a Coffee calculator - a responsive web app case study
PREPARING COFFEE AT HOME HAS BECOME INCREASINGLY POPULAR AMONG INDIVIDUALS, ESPECIALLY IN THE COVID AND POST-COVID ERA.
Finding a proper coffee recipe can be both exciting and stressful, especially when in a hurry. The numbers of websites are overwhelming, and there is conflicting information. It is difficult to navigate for individuals without constructive guidance.
COFFEE CALCULATOR provides a user-friendly and sophisticated experience, empowering users to make the best decisions when it comes to their coffee recipes search.
The challenge
“COVID-19 drove record coffee consumption at home, with 85% of coffee drinkers having at least one cup at home and average daily consumption steady at nearly 2 cups per capita.”
— National Coffee Association (NCA)
“More Americans (nearly 60%) choose coffee each day than any other beverage, including tap water.”
— National Coffee Association (NCA)
“More than 40% of Americans bought types of coffee (e.g., new brand, roast, or type of beans) they had never tried before during the pandemic, and nearly one third tried to replicate a favorite coffee shop beverage at home.”
— National Coffee Association (NCA)
Design approach
01
HOW MIGHT WE
simplify the process for users when preparing a coffee at home?
02
HOW MIGHT WE
encourage users to explore different recipes and brewing methods?
Wireframes
Developing wireframes around user needs.
Moodboard
The style of the mood board is aligned with the target audience and helps establish the aesthetic feel of an app. It has modern look with a colorful, bright, and modern color palette. I decided to incorporate the orange since it communicates playfulness, warmth, and energy. Warm colors and simplicity, along with typography give the app sense of uniqueness.
Style guide
-
Logo
App’s logo is created with the primary brand colors. Its shape resembles the calculator.
-
Color palette
App has three primary colors that together create the app’s branding. When used effectively, these colors create an energetic, warm, playful, and a bit retro tone of the brand. Secondary colors pair with the primary colors to help create a contrasting UI.
-
Typography
Lato is the consistent font style for Coffee calculator mobile and web. Different thicknesses help to provide contrast, hierarchy, and emphasis. Roboto mono is used for secondary text and numbers.
-
Iconography
Icons provide meaningful cues for important actions while adding visual interest and delight. They should be easily identifiable and appropriate across cultures and locations.
New icons should be relatively simple and should have a hand-drawn feel.
-
UI elements
The aim is to create UI elements that are communicative and easy to understand. Buttons must be clear and identifiable.
-
Layout grid
A 6 column grid system forms a layout structure for the mobile app. It helps provide consistency and neat alignment of UI elements.
The coffee calculator is designed with a Mobile-First design methodology.
Features
HOME PAGE
A variety of features are available on the home page based on what users are actively viewing. Users can choose from it with just a swipe or press the coffee calculator.
COFFEE CALCULATOR
A user can search for recipes based on their personal preferences, such as brewing method, coffee strength, and serving size. Users will be able to find the best recipes using this feature.
RECIPE
The ‘recipe’ feature allows users to easily make a favorite coffee. It enables to personalize the selection, check ingredients, and follow directions. Right from the recipe, users can add missing ingredients to their shopping list.
AVAILABLE ON ALL DEVICES
Click below to see the prototype
Final thoughts
I enjoyed designing for this project, and it would be interesting to see how potential users interact with it.
The next step will be to conduct further user testing. Based on user feedback, we can further refine the designs and resolve any potential problems. The data would be an excellent indicator of which design path to follow for Coffee calculator.
This project increases my UI design skills and is a perfect addition to my UX design knowledge.
What’s next in the Coffee calculator?
With more time I would like to develop the Walk & Find feature. Users could explore their neighborhoods using this feature via AR technology. The use of Augmented Reality enables users to explore their surroundings, exploring local restaurants, cafes, and social events nearby.
As a step forward it would be great to incorporate a component that provides users with a communal insight of the place with the unbiased feedback from residents.