The Cup Espresso Café. I saw a Tweet by Wendy Ball, co-owner of The Cup the other day: Open! Open! Open!

It's a function of a cynicism of my generation that has driven the exclamation point right out of me, but with a gavel, Wendy drove it back in. (!) Amazing energy (disregard that it's a coffee shop), optimism; exceptional use of the word dude and rad– WB is a reckoning.

She approached Matt and I and Peter Modest as the Monsters to put a new face on her website.

jess saba loving the cup branding

A full-scale project. We were ambitious; novice. The Cup was kind to let us develop all of our systems, from workflow to proposal to invoice to presentation.

Initially, we took photographs of the building, of the extant branding created by Justin Fuller. From there, the shift was a lot of whiteboarding followed by a lot of vectoring.

whiteboard exploring the cup website photograph the cup front vector the cups logo and lanterns

A website is an interactive document, and a document requires a quickly-assailable structure and accessible information.

We started in a stark red, white and blue, attention devoted mostly to clarity of information, accuracy of icon.

sample of menu layout collection of cup icons

Over the course of this project, we discovered what 'iteration' meant . Photography, user-flow, interface, copywriting, layout, illustration, html & css, javascript– much of which we hadn't done.

Around it-four, Wendy came to us with a list of the things we hadn't known to ask for– thankfully! It was a turning point, as we began to incorporate the elements of texture, color, and education that she'd been expecting from the start.

example illustration buttons the cup website coffee page the cup country selection

She made it clear that she wanted a store for both the coffee products and Cup apparel.

Peter made wonderwork of all of the small actions and animations on the site, docking the custom code neatly to the Wordpress CMS.

shopping cart custom example

An item we maintained throughout was that the the website be a rendering of the front of the store; parallel the physical with the digital.

This vector and its linked animation (on the site) remains my favorite hidden gem. When you get there, run a finger over that garage door. Then do it again, then click, buy some socks and some coffee and rejoice.

base of the cup website garage door illustration

Many thanks again to both Chris and Wendy Ball, teachers, patient teachers who walked as much as we through the fog of this project. This is a product of distinct attention that I, and I'm sure Matt, are very pleased to be able to present.