For a long time now, we've been obsessed with the idea of working with a speciality coffee brand. If you know me, you know I mean OBSESSED. In fact, before Studio Yoke, we even ventured into the coffee world ourselves with a start-up that you might (you definitely won't) have heard of called Postroast. Maybe I'll do a case study of that one day...

I would probably go as far as to say that a coffee brand was our dream client. So to be here writing this case study only three years old is, well, off-the-charts exciting!

It was through Postroast that we first met with Cartwheel. The first thing that stood out was their coffee. I was truly blown away by their ability to produce consistently delicious coffees from origins all over the planet.

After spending some time with their founder Alex, it was clear that their brand wasn't living up to the quality of their output. So that began a journey of around 12 months to transform their brand, website, packaging, cafes and more to better represent who they are and what they produce.

Below shows the full extent of the project as well as some behind the scenes, but if you're, well, lazy or just low on time, then head over to their website to see their new brand in action; or speed scroll through the imagery below. It's worth it, I promise.

Ok, let's go.

scope of services

team

Grant Ritchie

Dan Wykes

Theo Clarke

Cartwheel Team

Cartwheel - Single Full Width - Block 1
Cartwheel - Single Full Width - Block 1
Cartwheel - Single Full Width - Block 1
Cartwheel - Single Full Width - Block 1
Cartwheel - Single Full Width - Block 1
Cartwheel - Single Full Width - Block 1
Cartwheel - Single Full Width - Block 1
Cartwheel - Text Block - Brand Identity - Block 1
Cartwheel - Text Block - Brand Identity - Block 1
Cartwheel - Text Block - Brand Identity - Block 1

BRAND IDENTITY

Like all of our projects, step one is always our Discovery Process. It became clear that our first task would be developing the brand identity elements to re-establish a coherence between the various Cartwheel locations that had become somewhat disjointed over the previous years. For example, the two cafes in Nottingham, Coffee Roastery and the online store, had slightly different styles.

Two major updates included a logo redesign that honoured the brand's origin story (see below) and developing a simple but impactful duo of fonts that helped establish brand consistency and recognisability without sacrificing simplicity. Cartwheel were also keen to balance playfulness with their pursuit of excellence, so most design elements try to balance a simple, clean and minimal aesthetic with a few playful details. Some examples are the clean Basis Grotesque typeface (Colophon) with the more lively Editor (ITF), or the playful holographic foil and tasting card gradients with the monotone bags (see below).

Cartwheel - Text Block - Brand Identity - Block 1
Cartwheel - Text Block - Brand Identity - Block 1
Cartwheel - Text Block - Brand Identity - Block 1
Cartwheel - Text Block - Brand Identity - Block 1
Cartwheel - Single Image - Block 1
Cartwheel - Single Image - Block 1
Cartwheel - Single Image - Block 1
Cartwheel - Single Image - Block 1
Cartwheel - Single Image - Block 1
Cartwheel - Single Image - Block 1
Cartwheel - Single Image - Block 1
Cartwheel - Single Image - Block 2
Cartwheel - Single Image - Block 2
Cartwheel - Single Image - Block 2
Cartwheel - Single Image - Block 2
Cartwheel - Single Image - Block 2
Cartwheel - Single Image - Block 2
Cartwheel - Single Image - Block 2
Cartwheel - Single Image - Block 3
Cartwheel - Single Image - Block 3
Cartwheel - Single Image - Block 3
Cartwheel - Single Image - Block 3
Cartwheel - Single Image - Block 3
Cartwheel - Single Image - Block 3
Cartwheel - Single Image - Block 3
Cartwheel - Double Image - Block 1
Cartwheel - Double Image - Block 1
Cartwheel - Double Image - Block 1
Cartwheel - Double Image - Block 1
Cartwheel - Double Image - Block 1
Cartwheel - Double Image - Block 1
Cartwheel - Double Image - Block 1
Cartwheel - Single Image - Block 4
Cartwheel - Single Image - Block 4
Cartwheel - Single Image - Block 4
Cartwheel - Single Image - Block 4
Cartwheel - Single Image - Block 4
Cartwheel - Single Image - Block 4
Cartwheel - Single Image - Block 4
Cartwheel - Double Image - Block 2
Cartwheel - Double Image - Block 2
Cartwheel - Double Image - Block 2
Cartwheel - Double Image - Block 2
Cartwheel - Double Image - Block 2
Cartwheel - Double Image - Block 2
Cartwheel - Double Image - Block 2
Cartwheel - Text Block - Tasting Cards - Block 2
Cartwheel - Text Block - Tasting Cards - Block 2
Cartwheel - Text Block - Tasting Cards - Block 2

TASTING CARDS

Next was the packaging; this ended up being our favourite part of the whole project. Did I mention dream Client?

First up, tasting cards.

With an array of different origin countries, processing techniques and roasting profiles, we developed a unique and pleasing visual way-finder to help customers choose a coffee quickly.

Inspired by the idea of using colour as a nod to flavour, we designed a set of coloured gradients to cover a wide variety of potential coffee tasting notes. For each new coffee, a tasting card that communicates flavour through colour can easily be created.

So, rather than having to read the tasting notes on each card before making their choice, this new way-finder makes the entire selection process easier and more exciting for the customer. And once you find a coffee that catches your eye, there's a whole bunch of additional info about its origins, flavour and processing on the reverse of the card.

The tasting cards were also printed on GF Smith's Extract paper that is made from recycled coffee cups to minimise environmental impact and create a cyclical sustainability loop.

Cartwheel - Text Block - Tasting Cards - Block 2
Cartwheel - Text Block - Tasting Cards - Block 2
Cartwheel - Text Block - Tasting Cards - Block 2
Cartwheel - Text Block - Tasting Cards - Block 2
Cartwheel - Single Image - Block 5
Cartwheel - Single Image - Block 5
Cartwheel - Single Image - Block 5
Cartwheel - Single Image - Block 5
Cartwheel - Single Image - Block 5
Cartwheel - Single Image - Block 5
Cartwheel - Single Image - Block 5
Cartwheel - Array - Block 1
Cartwheel - Array - Block 1
Cartwheel - Array - Block 1
Cartwheel - Array - Block 1
Cartwheel - Array - Block 1
Cartwheel - Array - Block 1
Cartwheel - Array - Block 1
Cartwheel - Text Block - Bags - Block 3
Cartwheel - Text Block - Bags - Block 3
Cartwheel - Text Block - Bags - Block 3

BAGS

Next, the bags. These things are beautiful.

We worked closely with our suppliers to create distinctive, dynamic bag designs with hot-stamped holographic foil. This innovative design effortlessly combines beauty and sustainability, shifting colour based on the viewing angle to create a dynamic playfulness while also adhering to the original requirement of being fully recyclable.

Many Coffee brands claim to be traceable, but we wanted to do a little more than just say it. So with every bag of coffee, we attempt, in some small way, to honour and recognise the many people who make it all possible. From the farmers to producers, importers, roasters, baristas and customers, we've added their names to the sides of the bag. Without them, Cartwheel wouldn't exist, so it felt right for their names to be the pillars of the bag.

Honestly, these bags are a thing to behold in real life; you really have to hold, touch, feel and smell them to get the full effect. So if you've not seen one in real life, go grab one, and I promise, I'm not on a commission.

Cartwheel - Text Block - Bags - Block 3
Cartwheel - Text Block - Bags - Block 3
Cartwheel - Text Block - Bags - Block 3
Cartwheel - Text Block - Bags - Block 3
Cartwheel - Double Image - Block 3
Cartwheel - Double Image - Block 3
Cartwheel - Double Image - Block 3
Cartwheel - Double Image - Block 3
Cartwheel - Double Image - Block 3
Cartwheel - Double Image - Block 3
Cartwheel - Double Image - Block 3
Cartwheel - Single Image - Block 6
Cartwheel - Single Image - Block 6
Cartwheel - Single Image - Block 6
Cartwheel - Single Image - Block 6
Cartwheel - Single Image - Block 6
Cartwheel - Single Image - Block 6
Cartwheel - Single Image - Block 6
Cartwheel - Double Image - Block 4
Cartwheel - Double Image - Block 4
Cartwheel - Double Image - Block 4
Cartwheel - Double Image - Block 4
Cartwheel - Double Image - Block 4
Cartwheel - Double Image - Block 4
Cartwheel - Double Image - Block 4
Cartwheel - Text Block - Photography - Block 4
Cartwheel - Text Block - Photography - Block 4
Cartwheel - Text Block - Photography - Block 4

Working with Where Giants Roam, we also created a set of rendered 3D images of the bags. This way, Cartwheel can change tasting cards through a simple click of a button. There is no need for expensive photography for every new product; new images for the website or social media channels can be computer generated in seconds. This allows them to keep their product offering up to date, all the time, with high resolution, stunning imagery.

As a photographer, I might have just done myself out of a job... But, thankfully, we did discover a need for some real-life photography—keep scrolling.

Cartwheel - Text Block - Photography - Block 4
Cartwheel - Text Block - Photography - Block 4
Cartwheel - Text Block - Photography - Block 4
Cartwheel - Text Block - Photography - Block 4
Cartwheel - Single Image - Block 8
Cartwheel - Single Image - Block 8
Cartwheel - Single Image - Block 8
Cartwheel - Single Image - Block 8
Cartwheel - Single Image - Block 8
Cartwheel - Single Image - Block 8
Cartwheel - Single Image - Block 8
Cartwheel - Double Image - Block 5
Cartwheel - Double Image - Block 5
Cartwheel - Double Image - Block 5
Cartwheel - Double Image - Block 5
Cartwheel - Double Image - Block 5
Cartwheel - Double Image - Block 5
Cartwheel - Double Image - Block 5
Cartwheel - Single Image - Block 7
Cartwheel - Single Image - Block 7
Cartwheel - Single Image - Block 7
Cartwheel - Single Image - Block 7
Cartwheel - Single Image - Block 7
Cartwheel - Single Image - Block 7
Cartwheel - Single Image - Block 7
Cartwheel - Double Image - Block 6
Cartwheel - Double Image - Block 6
Cartwheel - Double Image - Block 6
Cartwheel - Double Image - Block 6
Cartwheel - Double Image - Block 6
Cartwheel - Double Image - Block 6
Cartwheel - Double Image - Block 6
Cartwheel - Text Block - Food - Block 5
Cartwheel - Text Block - Food - Block 5
Cartwheel - Text Block - Food - Block 5

FOOD

Although coffee is the jewel in Cartwheel's crown, their food is arguably some of the best in town. And no offence to the countless Google Review photo contributors, but it was time to do things properly.

I'd recommend not scrolling further if you're hungry.

Cartwheel - Text Block - Food - Block 5
Cartwheel - Text Block - Food - Block 5
Cartwheel - Text Block - Food - Block 5
Cartwheel - Text Block - Food - Block 5
Cartwheel - Single Image - Block 9
Cartwheel - Single Image - Block 9
Cartwheel - Single Image - Block 9
Cartwheel - Single Image - Block 9
Cartwheel - Single Image - Block 9
Cartwheel - Single Image - Block 9
Cartwheel - Single Image - Block 9
Cartwheel - Array - Block 2
Cartwheel - Array - Block 2
Cartwheel - Array - Block 2
Cartwheel - Array - Block 2
Cartwheel - Array - Block 2
Cartwheel - Array - Block 2
Cartwheel - Array - Block 2
Cartwheel - Single Image - Block 10
Cartwheel - Single Image - Block 10
Cartwheel - Single Image - Block 10
Cartwheel - Single Image - Block 10
Cartwheel - Single Image - Block 10
Cartwheel - Single Image - Block 10
Cartwheel - Single Image - Block 10
Cartwheel - Double Image - Block 7
Cartwheel - Double Image - Block 7
Cartwheel - Double Image - Block 7
Cartwheel - Double Image - Block 7
Cartwheel - Double Image - Block 7
Cartwheel - Double Image - Block 7
Cartwheel - Double Image - Block 7
Cartwheel - Single Image - Block 11
Cartwheel - Single Image - Block 11
Cartwheel - Single Image - Block 11
Cartwheel - Single Image - Block 11
Cartwheel - Single Image - Block 11
Cartwheel - Single Image - Block 11
Cartwheel - Single Image - Block 11
Cartwheel - Text Block - Website - Block 6
Cartwheel - Text Block - Website - Block 6
Cartwheel - Text Block - Website - Block 6

Website

Finally, it was time to give all of this a new home on the www. The most important things that we wanted to site to do were make it reaaaaaly easy to order coffee, provide customers with all the relevant info on the various locations, and make signing up to a subscription as simple as a few clicks.

Cartwheel - Text Block - Website - Block 6
Cartwheel - Text Block - Website - Block 6
Cartwheel - Text Block - Website - Block 6
Cartwheel - Text Block - Website - Block 6
Cartwheel - Single Image - Block 12
Cartwheel - Single Image - Block 12
Cartwheel - Single Image - Block 12
Cartwheel - Single Image - Block 12
Cartwheel - Single Image - Block 12
Cartwheel - Single Image - Block 12
Cartwheel - Single Image - Block 12
Cartwheel - Video - Block 1
Cartwheel - Video - Block 1
Cartwheel - Video - Block 1
Cartwheel - Video - Block 1
Cartwheel - Video - Block 1
Cartwheel - Video - Block 1
Cartwheel - Video - Block 1
Cartwheel - Text Block - Tasting Cards - Block 7
Cartwheel - Text Block - Tasting Cards - Block 7
Cartwheel - Text Block - Tasting Cards - Block 7

The store page brings the tasting card gradients front and centre, making for a quick selection. For example, suppose you're looking for something bright and citrusy or rich and big-bodied; colour makes finding your preference quicker and more enjoyable than reading tasting notes (although they're there too if need be).

Cartwheel - Text Block - Tasting Cards - Block 7
Cartwheel - Text Block - Tasting Cards - Block 7
Cartwheel - Text Block - Tasting Cards - Block 7
Cartwheel - Text Block - Tasting Cards - Block 7
Cartwheel - Video - Block 2
Cartwheel - Video - Block 2
Cartwheel - Video - Block 2
Cartwheel - Video - Block 2
Cartwheel - Video - Block 2
Cartwheel - Video - Block 2
Cartwheel - Video - Block 2
Cartwheel - Text Block - Subscription - Block 8
Cartwheel - Text Block - Subscription - Block 8
Cartwheel - Text Block - Subscription - Block 8

The subscription page offers an interactive yet straightforward 'create a plan' for those less decisive. With a few clicks, the user can choose exactly how much coffee they need at their desired frequency, creating a completely bespoke plan within seconds.

Cartwheel - Text Block - Subscription - Block 8
Cartwheel - Text Block - Subscription - Block 8
Cartwheel - Text Block - Subscription - Block 8
Cartwheel - Text Block - Subscription - Block 8
Cartwheel - Video - Block 3
Cartwheel - Video - Block 3
Cartwheel - Video - Block 3
Cartwheel - Video - Block 3
Cartwheel - Video - Block 3
Cartwheel - Video - Block 3
Cartwheel - Video - Block 3
Cartwheel - Text Block - Hamburger - Block 9
Cartwheel - Text Block - Hamburger - Block 9
Cartwheel - Text Block - Hamburger - Block 9

The full-page hamburger menu is one of our favourite parts, providing quick access to all the key pages and info. Having this page allowed us to keep the main pages simple and free of distractions but still make it easy for users to find what they need when they need it. We also added a dynamic text element (bottom left) showing what's currently going on at the Roastery based on the time of day to give viewers a little behind the scenes into the workings of a small coffee business.

Cartwheel - Text Block - Hamburger - Block 9
Cartwheel - Text Block - Hamburger - Block 9
Cartwheel - Text Block - Hamburger - Block 9
Cartwheel - Text Block - Hamburger - Block 9
Cartwheel - Video - Block 4
Cartwheel - Video - Block 4
Cartwheel - Video - Block 4
Cartwheel - Video - Block 4
Cartwheel - Video - Block 4
Cartwheel - Video - Block 4
Cartwheel - Video - Block 4
Cartwheel - Text Block - Dark mode - Block 10
Cartwheel - Text Block - Dark mode - Block 10
Cartwheel - Text Block - Dark mode - Block 10

We also added a dark mode to the articles page to make it more pleasant to read in low light. Everyone loves a dark mode, right?

Cartwheel - Text Block - Dark mode - Block 10
Cartwheel - Text Block - Dark mode - Block 10
Cartwheel - Text Block - Dark mode - Block 10
Cartwheel - Text Block - Dark mode - Block 10
Cartwheel - Video - Block 5
Cartwheel - Video - Block 5
Cartwheel - Video - Block 5
Cartwheel - Video - Block 5
Cartwheel - Video - Block 5
Cartwheel - Video - Block 5
Cartwheel - Video - Block 5
Cartwheel - Double Image - Block 9
Cartwheel - Double Image - Block 9
Cartwheel - Double Image - Block 9
Cartwheel - Double Image - Block 9
Cartwheel - Double Image - Block 9
Cartwheel - Double Image - Block 9
Cartwheel - Double Image - Block 9
Cartwheel - Text Block - Wrap up - Block 11
Cartwheel - Text Block - Wrap up - Block 11
Cartwheel - Text Block - Wrap up - Block 11

WRAP UP

Finally, we designed some tote bags, leaflets, paper cups, and branded mailers to round out the re-branding.

Honestly, I'd be amazed if you've made it this far, so I'll save my aching fingers and just show some images.

And if by some miracle you have made it this far, then you have my total admiration. Thanks, Mum.

Cartwheel - Text Block - Wrap up - Block 11
Cartwheel - Text Block - Wrap up - Block 11
Cartwheel - Text Block - Wrap up - Block 11
Cartwheel - Text Block - Wrap up - Block 11
Cartwheel - Single Image - Block 13
Cartwheel - Single Image - Block 13
Cartwheel - Single Image - Block 13
Cartwheel - Single Image - Block 13
Cartwheel - Single Image - Block 13
Cartwheel - Single Image - Block 13
Cartwheel - Single Image - Block 13
Cartwheel – Video – Block 6
Cartwheel – Video – Block 6
Cartwheel – Video – Block 6
Cartwheel – Video – Block 6
Cartwheel – Video – Block 6
Cartwheel – Video – Block 6
Cartwheel – Video – Block 6
Cartwheel - Double Image - Block 8
Cartwheel - Double Image - Block 8
Cartwheel - Double Image - Block 8
Cartwheel - Double Image - Block 8
Cartwheel - Double Image - Block 8
Cartwheel - Double Image - Block 8
Cartwheel - Double Image - Block 8
Cartwheel - Text Block - Thanks - Block 12
Cartwheel - Text Block - Thanks - Block 12
Cartwheel - Text Block - Thanks - Block 12

I hope you've enjoyed looking through this project as much as we enjoyed making it; honestly, we've had the best time. Unfortunately, it does mean that we're going to need to find a new dream project. Any ideas?

Catch you in the next one,


Grant

Cartwheel - Text Block - Thanks - Block 12
Cartwheel - Text Block - Thanks - Block 12
Cartwheel - Text Block - Thanks - Block 12
Cartwheel - Text Block - Thanks - Block 12