Coffee that cares

Overview

01/22 - 03/22

The challenge was to create a desktop and mobile experience for coffee buyers who cares about the origin of their coffee. The vision was to create a product that was educational and expedient when researching and buying beans. For this project I was the sole visual designer, bringing the product from ideation through high-fidelity mockups and prototypes.

Role

Product Design
Visual Design
Competitive Analysis
Figma Animation

High Fidelity Mockups

MOBILE
DESKTOP

User Prompt

The project was to design an application and website for an eCommerce coffee company that would cater to working professionals with a busy schedule, but that still valued quality and humanitarian principles. I decided to focus on two different elements of the coffee company.

1. The farmers themselves, including informations about the coffee's regional origins.
2. The coffee's flavor profile. 

Research and Inspiration

I wanted a natural feel to the companies brand, representing the origin-based business model of the company, along with an industrial feel to communicate expediency of the eCommerce experience. I began researching coffee companies and focused on those that had a fun and energetic edge to their designs. Below you can see the mood board I created to capture that feel. It is simple with pops of color and shape. The predominant colors that stuck out to me were pastel yellows and deep lush greens.
Mood Board
What I Loved
  • Color Palette
  • Simple Layout
  • Bold Shapes
Additional Needs
  • Defined Text Style
  • Logo Font

Development of Style Guide

I wanted the branding to have a fast and productive feel, with a slight edge. I also wanted to keep in people’s minds the fact that this coffee can from a farm, and more specifically, a farmer. With these two ideas in mind and drawing inspiration from competitive analysis as well as my mood board, I chose my styles.

I chose a yellow as my primary color. This was both stylistic and purposefully inline with the vision of the brand. Yellow is a common color for work vehicles, and feels energetic. The idea of work as well as energy is something I wanted to bring to the brand.
The green I chose was to call out the coffee farms and natural colors of  the coffee's regions. In contrast to the quick and electric colors of the primary, the secondary would complement with a rich, and calm feeling, which coffee can also elicit.
Why not have some fun! For my third color choice, I went with a fun pastel pink. This would bring an additional pop of color to the design for accents throughout.

Logo Creation

Since this was a new company (fictional), I wanted to include the name as part of the logo. This was to create brand recognition and make it easier for people to connect the company with the product. I used the H1 font Montserrat Bold. My primary and secondary colors were used for the design as well.

Task Flow - eCommerce Purchase

I began with the task flow of a customer arriving at the site, and then investigating the product, and eventually purchasing.  I had began creating some quick wireframes to see how elements on the screen would fit. I began my process with the mobile design.

Simple Animations

I created animations to give feedback throughout the app. This was meant to spark delight and create an enjoyable purchasing experience. I have always enjoyed small feedback gestures when navigation through a website so I included these in my own design!
Coffee Checkout Process
Company Values
Menu Screen

Final Designs