Reinventing the coffee creamer web experience.

CLIENT: Coffeemate
ROLE: Lead Product Designer; Digital Art Director
DATE: August 2016

Overview

In 2016, Coffeemate went through a major brand refresh in order to reach younger consumers—specifically, on-the-go parents and college students. With such a tech-driven audience in sight, their website would be one of the most crucial parts of this new brand introduction. We were tasked with crafting a mobile-first, responsive website that could host the variety of Coffeemate product offerings. We were able to create an end to end design solution while also helping the brand to categorize their many offerings in an intuitive way.

Coffeemate Website DesignCoffeemate Website Design

A User-Centric Experience

We created a mobile-first, responsive website inspired by systematic design thinking that could host a wide array of products and recipes. Because the brand is constantly adding and discontinuing products based on consumer trends, the design, taxonomies, and research conducted for the website created a positive business impact to the organization as a whole.

UX Research DocumentationUX Research Documentation
WireframesWireframes

Product-Inspired UI

As we crafted the design system, we created a set of principles and analogies to help inform our design choices. “The Blom” represents creamer as it mixes with coffee—this natural interaction became the animation principle for interactions throughout the website. Our expanded color palette was inspired by Coffeemate’s vibrant packaging. Each color was carefully selected to compliment the products and associated with specific product categories. This visual association served as a cue to the user as to what area of the website they were currently visiting.

Coffeemate Website Design ImageCoffeemate Website Design Image