Loading ...

Responses by Thomas Nicholas, design director, Red Antler.

Background: Jot is an entirely new form of at-home coffee that requires zero equipment. Twenty times more concentrated than traditional coffee, just one tablespoon of Jot is all that’s needed to make any coffee beverage. Because it’s a totally new product and a new way of preparing coffee, education had to be woven throughout the digital experience. The tablespoon became our hero element as it helped communicate both instruction and scale. The entire site builds on the idea that something so small can have so much potential.

The beauty of Jot is that both coffee enthusiasts and novices can rejoice in its easy-to-use form and smooth flavor profile. The site was designed with three audiences in mind—those that take their coffee seriously, those that take it easy, and since it's a subscription model, those that are just there to buy more Jot. It needed to feel knowledgeable for coffee experts, accessible for everyday coffee drinkers and direct for repeat purchasers.

Design core: Jot’s site design imagines the magic of the product as a surreal digital experience. As the user explores each page, an immersive coffee bloom fills the screen, playful typography snakes its way through a maze of mugs and the Jot rabbit magically splashes across the screen. When learning about how we’ve made such a powerful product on the Process page, we put the user into the coffee itself with bubbles floating all around them. Just one tablespoon of Jot delivers massive flavor, so we intentionally played with scale throughout the design system. Juxtaposing moments of oversized typography that takes over the screen, followed by subtle moments like the image of a single coffee bean that speaks to concentrated potential. These moments create an interesting tension within the design language, communicating the true personality of the product.

Favorite details: We set out to create a digital experience that felt immersive and expansive through the use of scale and texture—from the moment users are transported into the coffee bloom itself to the eclectic motion vignettes that populate the site. The Jot rabbit appears throughout the experience as a totem, guiding the user through moments of magic.

Navigation structure: Jot is a single product, so we built the site navigation to be incredibly conversion focused. With a “Buy Now” option in the navigation, users are never without the ability to start a purchase. We thought this feature would be especially important for returning customers who shouldn’t have to scroll or browse to make a purchase. Instead, Jot is always right at their fingertips.

Special features: We are especially fond of the robust minicart feature, which shows users an immediate path to purchase from any point in the site.

jot.co

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In