Callum Harrod
Union Roasted logo

Union Roasted

A Shopify site for one of the UK's best-known specialty coffee roasters. I designed every page and built the whole site, and Union still use the design today.

Role

Web designer and developer

Team

Me and a Project Manager at WeMakeWebsites

Timeline

Aug 2018 - Sep 2018

Outcome

A site that looks like Union, still in use years later

My role

I was the only designer and developer on this project. I worked alongside a Project Manager, and we did the discovery together.

What I owned

2

  • The design of every page, from wireframes to high-fidelity

  • Building the whole site on Shopify

What I shared

1

  • The client kick-off and the visit to the roastery, with the Project Manager

What others did

1

  • Project management, by the Project Manager

Union Roasted home page with a full-width photo of coffee plants
Union Roasted product page for Verde Alto, a Costa Rican coffee, with size and grind options
Union Roasted blog article about ten years of sourcing wild forest coffee in Ethiopia

The live site, captured in 2025. Union have added pages since, but these are still my designs.

The brief

Paraphrased from the kick-off, not a real transcript.

We really want a new site for our coffee brand. We know WeMakeWebsites makes Shopify sites. We don't want our site to look like a Shopify site though. We want something that represents our brand.

No problem. I'll get to know your brand and design something that represents it. I wouldn't want it to look like everything else either.

We make coffee and want to show off our process. We want to show off our team. We want to sell our freshly roasted coffee. Can you capture all of that in your design?

Absolutely. I'll make sure I understand your process, your team and your coffee. Let's get cracking.

Understanding the client

At the kick-off, the client made it very clear they didn't want a typical Shopify site. So I had to understand the brand, the product and the people behind it quickly. I'd bought Union coffee in shops myself, which made this a fun one. The Project Manager and I went to the roastery to see how everything was made and learn more about the brand.

They wanted to show off their process, the quality of their beans and their partnerships with farmers. That gave me plenty to design with, and a clear reason for the site to look nothing like a standard Shopify theme.

What it looks like

Full-length Union Roasted product page, from product details to the farm story, related coffees and footer (opens full size in a new tab)

A full product page, from the coffee's details down to the farm it came from.

Results

The client was very happy with it. They expected a generic Shopify site and got one that looked like them. Years later, unionroasted.com still uses my design.

It's been a while, and the wireframes and early work didn't survive, but it's still one of my favourite projects. I was named Employee of the Month for it before I left WeMakeWebsites, and I've still got the trophy to prove it.