Project Type: Interaction Design
Duration: January-March 2019 (3-months)
Tools Used: Figma, Illustrator, Visual Studio Code, Photoshop
The Problem: Many coffee consumers who are vegan or inhibit dairy sensitivities find themselves with very limited options for specialty espresso. While drink prices range from $4-$8, dairy-free substitutions can cost up to an extra dollar on top of that, which takes a toll on the wallet of the everyday espresso-drinker. I was tasked to create a website that would contain dairy-free recipes to encourage users to save money on their coffee spendings, while being able to enjoy a guilt-free espresso.
How can one design a digital recipe book where users can browse, explore and learn about dairy-free espresso all in one platform?
Design Solution: Ground is an online web-based community of espresso coffee enthusiasts whose top goal is promoting dairy-free alternatives in coffee. The coffee community is growing everyday and Ground aims to provide the most delicious recipes for your nutritious needs. Whether you’re in the mood for a latte, mocha, or cappuccino, Ground is the ultimate dairy-free specialty coffee handbook for you.
Creating sketches of layout designs, possible user scenarios, and user flows. This process included low to high-fidelity wireframe mockups that were used in the conversion to HTML.
Simple, clean, straight-forward. Animated graphics for added user interactivity.
This was my first website coded with HTML and CSS, which enabled me to learn the importance of visual communication and indicators within an interactive system. It involved strategically determining a layout that accounts for better user flow. Though this project is merely an experimental one, creating an interactive site from scratch has inspired me to create personal interactive projects in the future.