Callum Harrod
Union Roasted logo

Union Roasted

The story of how I designed a site for one of the largest UK coffee brands. In 2018 I worked at an agency to create one of my favourite pieces of design work, while nailing the brief for the customer.

Role

Web Designer, Web Developer

Outcome

A new e-commerce website for a coffee brand built on Shopify

Deliverables

Wireframes, High-Fidelity Design, Web Development

Timeline

Aug 2018 - Sep 2018

Union Roasted home page
Union Roasted product page
Union Roasted blog page

The problem

We really want a new site for our coffee brand. We know that 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. What I'll be doing is understanding your brand, and creating a design that represents it. I also wouldn't want it to look like everything else.

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

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

Understanding the client

I worked on this site from start to finish. I was there for the initial discovery, the research, the design, the development, and the launch. I was the only designer on the project, I worked closely with the Project Manager. In our initial kick off meeting with the client, they made it incrediby clear that they didn't want a typical Shopify site.

I quickly had to understand the brand, the product, and the people behind it. Union Roasted was a coffee I'd purchased myself in stores, so it was a really fun experience in understanding how everything was made. The PM and I went to the roastery to find out how everything worked and learn more about their brand.

They made it clear that they wanted to show off their process, the quality of their beans, and the partnerships with the farmers. This gave me some great opportunities to show off my design skills and create a really unique site that stood out from the typical Shopify sites.

What it looks like

Final design

End notes

It's been a while since I worked on this site. So sadly a lot of the materials such as wireframes, and earlier work aren't available to me anymore. The client however, was incredibly happy with what was delivered. They fully expected a generic Shopify site, and they got an incredibly unique design that at the time matched them perfectly.

To date it's one of my favourite projects that I've worked on. I ended up receiving employee of the month for this before I decided to leave WeMakeWebsites. I've still got the trophy to prove it!

STAR breakdown

A short summary of the Situation, Task, Action, and Result for this case study, the key points I want you to remember.

Situation

In 2018 I was a designer and developer at WeMakeWebsites. Union Roasted, one of the UK's biggest specialty coffee brands, came to us for a new Shopify site. They were very clear: it could not look like a generic Shopify template. I was the only designer on the project, working alongside a Project Manager. The whole thing ran August to September 2018, roughly one month.

Task

Design and build a Shopify e-commerce site that actually felt like Union Roasted: their sourcing story, their process, their team. Deliver the whole thing from kick-off to launch in a month.

Action
  • Attended a kick-off with the client and visited their roastery to properly understand the brand, the people, and how they make coffee
  • Identified what the site needed to say: the farmer partnerships, the roasting process, and the team behind it
  • Designed wireframes then high-fidelity designs, translating the brand into something visually distinct
  • Built the full site on Shopify
  • Delivered the complete project, from brief to launch, in approximately one month
Result

The client was genuinely delighted. They had expected a standard Shopify build and got something that really looked and felt like them. I was awarded Employee of the Month at WeMakeWebsites.