A unique concept for one of London’s most design-forward coffee brands

Introduction

Born in Shoreditch, Grind is a unique coffee brand that sells products online and in stores across the country. Their cafés, coffee shops, and pastel-pink coffee trucks can be seen scattered across London, and if you spot one, it’s definitely worth making a stop.

For me, they are a great source of design inspiration. Their slick typography, muted colour palette, and stunning imagery are right up my alley. Even their packaging has found it’s way onto my kitchen counter, where coffee would usually be loaded into the glass jar next to it. Great packaging is just too nice for the bin, as Encona, Mutti, and Cholula would attest to.

Grind's packaging, amongst other great packaging design

Their website does a great job of showcasing their style, and it’s even served me as inspiration for other web projects. One day though, while I was browsing their site, I came across their location pages…

A snapshot of Grind's current location page

… and I had an idea.

The Goal

What if their physical spaces were treated more like standalone destinations? And how would the site reflect that?

My idea was to re-imagine the location pages of their site by breaking it out into an entirely new site: “GRIND Coffee Spots”. I imagined this as part of a wider strategy, aimed at bringing out each location’s personality, to give them more presence and independence, in a way.

From a practical angle, I also saw this as an opportunity to think about how content could be structured and scaled through Webflow’s CMS, as well as just a chance to play around with some animations.

The Process

Discovery

I started by analysing their current site, pulling out things like their fonts and colour palette, to make sure the design was as consistent as possible with the original site. I also tried decoding their type scale, but I couldn’t find a specific match, so I went for one I felt suited the vibe:

Fonts and colours defined in Figma

** Their body font, Aperçu, requires a licence. Therefore, I chose HK Grotesk, a nice, clean, modern alternative font*

Next, I built a moodboard of their assets, such as their menus and photos, to get a solid idea of the aesthetic. I then compiled a moodboard of websites, noting down what stood out to me and how I could approach these ideas. Here’s an example from Café 1001, another website I’m a big fan of:

Inspiration from Café 1001's website

While looking at the menus, I noticed that they shared PDFs across the locations, giving them flexibility to choose the pages to show them on. I kept this in mind for structuring the CMS.

Planning

I started putting together a sitemap to map out not only the pages I would use (which wasn’t too dissimilar from their current structure), but also the content I wanted to display, and in what order. One thing I did was group the trucks together into a single page, as I felt they didn’t need a whole space to themselves:

Sitemap

I started thinking about how to give each location a more distinct presence. For example, I decided to make the nav bar switch logos and CTAs based on which location you’re viewing. Normally I’d avoid changing nav items (to avoid disrupting the user’s mental model), but as I’m assuming a journey where users would come into a specific location page directly from Google, it felt like a fair exception.

Finally, though this is beyond the scope, I also had some ideas around how this strategy could extend to subdomains:

Subdomain branding brainstorming

Visuals

I kicked off by exploring different approaches for the hero in the café and coffee shop templates. I wanted to make sure it stood out as much as possible, to build excitement as soon as the user landed on the page:

Hero concepts

I then started playing with different layouts for each section, to bring key information to the surface:

Sections depicting key information

I hooked up the prototype and showed it to my fiancée to gather some (totally unbiased) feedback. Admittedly, she did give her honest feedback, like the fact she thought the display text on the hero was too big. This made me realise it strayed a bit too far from the calmer aesthetic they are known for, so I dialled it back a bit. After all, there’s other ways to make it pop… (as you will see).

Once I was happy with it (and my fiancée had given her approval), I translated it all into a mobile layout, to make sure it looked good on all devices:

Design mockups on mobile

By this point, I had started seeing GRIND everywhere, even while viewing our wedding venue, where I found they had stocked their ground coffee in every bedroom (huge win!). On the way home, of course, I had to pick up bag for myself.

Development

With the visuals locked in, I jumped into Webflow. I used the Figma import feature to speed up the process and set up the CMS. Once the design was all set up correctly, I finished off with the animations.

Development work starting on Webflow

I also wrote some code to show a real-time “Open Now” indicator based on the CMS opening hours, user’s timezone, and any exceptions (like private bookings). I should note though, a Google integration would probably be better here, as then you could manage it from one place.