your Coffee

A concept design for a new responsive site for the Chemex coffeemaker: a glass, manual pour-over style of coffeemaker. The site focuses on the two primary benefits of the Chemex; the high quality taste and simple brewing process that has remained unchanged since 1941.

Where to Begin?

The first step was to research the existing Chemex site to identify its strengths and weaknesses. Though the existing site had beautiful product imagery, the site was information dense with multiple menu options. The path to the Chemex store is not immediately apparent and requires navigating through the menu or scrolling. It was clear that the new responsive site should provide users with basic product benefits and easy access to the shop.

A Timeless Identity
for a Timeless Design

The Chemex identity has shifted over the various years, often reflecting the graphic styles of its era. Given the unchanging design and process of the Chemex itself, it was decided to return to the original bold wordmark to update the identity.

Only slight modifications were made to the wordmark, including a simple radius on the corners of the letterforms and an underline of the letter “X” to represent the basic Chemex shape.

A Natural Palette

An updated color palette uses natural tones while retaining the existing blue as an accent color. Alternate Gothic was chosen as the typeface for headers to reflect the updated wordmark and is paired with Garamond to create an elegant contrast for body text.

How do
you Brew?

An initial user survey was developed to understand how users currently brew. A majority of users who used an Automatic Coffee Maker or Pod System (the Mechanical Brewers) indicated that they chose their brewing method based on brewing time required or the ease of the process. All users who indicated that they were using Pour Over/French Press methods (the Manual Brewer) indicated taste as their primary reason for choosing that method. Coffee quality and brewing time remained a consistent theme throughout the responses. Based on this feedback, the new Chemex site needed to address these two elements, beginning with a strong focus on the superior quality of the coffee, and a breakdown of the process/time required to make it.

How do you sell a process?

Two strategies were outlined to develop a marketing focus for the new site. After developing high fidelity desktop wireframes of two potential strategies, a quick preference test was developed to understand which strategy users found most effective.

Take Back your Morning

“Take Back your Morning” focused on how the user could integrate the Chemex brewing process into their morning, as many users indicated that they chose their brewing process based on the time required for brewing

Elevate Your Coffee

“Elevate your Coffee” focused on the fact that the Chemex brewing process makes any brand of coffee taste better. It also focused on the simplicity of the brewing process and the equipment needed.

And the Winner is...

All participating users preferred “Elevate your Coffee”, citing the fact that it made the process seem simple, and highlighted the product effectively. After making some slight adjustments to the “Elevate your Coffee” wireframe, responsive wireframes were developed for both mobile and tablet.

The Final Push

The high fidelity wireframes provided a roadmap for the final prototype. Developed in HTML and CSS, the prototype helped to evolve responsive elements that were not apparent with simple wireframes.