Baristas

E-commerce website of coffee collections designed and coded for worldwide coffee drinkers

At a glance

Baristas is an e-commerce shopping website for worldwide coffee collections. It provides a platform for one-stop coffee products of various origins so that coffee lovers can make and taste coffee of global flavor right at their home.

Type

Individual Project

Role

Branding, UI Design, Motion Design

Duration

January - May 2021

Meet the Customers

Christina

“I want to start brewing my own coffee right at home or office.”

About

26-year-old technical consultant working in downtown SF. Loves to get coffee in the morning on the way to the office.

NEEDS/GOALS

Want to start brewing at home / office; need to know which coffee collections are her favorite; wants to explore different coffee flavors

Joshua

“I want to explore and pick my own favorite coffee collections.”

About

31-year-old traveling nurse residing in San Francisco. Huge coffee fan and always makes a cup in the morning.

NEEDS/GOALS

Wants to explore different options for home brewing and various coffee flavors; interested in the coffee origin and coffee tasting too.

the challenge

As a UI/UX designer, I was challenged to design and develop an e-commerce shopping website for worldwide coffee collections, in collaboration with a senior front end developer. After talking to users who are regular coffee drinkers, I summarized main user pain points down below.

LAUNCH WEBSITE

The Problem

" It’s become a big expense ordering coffee every day and I want to start home brewing but don’t know how to pick my coffee collections. "

Christine, 26, business consultant & regular coffee drinker

LEARNINGS & WEBSITE DESIGN GOALS

😨 LEARNING #1
Not many people know where to start when considering home-made coffee.

DESIGN GOAL #1
Introduction to sustainability and company mission

😨 LEARNING #2
Coffee lovers want to know how their coffee was made & where it comes from.

DESIGN GOAL #2
History and information about various coffee collections

😨 LEARNING #3
People are curious about coffee tasting and yet there’s limited information on that.

DESIGN GOAL #3
Introduction and step-by-step guide for coffee tasting

I started off the project by designing branding and styleguide that can be used and integrated for website design. I selected wood and beige color interior design as moodboard components, and designed other styleguide components based on the inspirations.

A combination of wood and beige decorations lifestyle theme for the website.

Main and sub color palette from dark to light for website styleguide, which were coded as well.

Buttons designed for various use cases for website styleguide.