Iris Li
Ground: Dairy-Free Espresso

Ground

Creating an all-in-one digital handbook for homemade vegan/dairy-free espresso.

  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.

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?

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.

Ideation

Ideation

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.

sitemap-04.jpg
wireframe sketches-03.jpg
Visual Design

Visual Design

Simple, clean, straight-forward. Animated graphics for added user interactivity.

design details-01.jpg
design details-02.jpg
Reflection

Reflection

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.