Union Roasted
Early 2025 I joined the Product Design team to help create the future of building and editing websites with Drupal. This is a case study on how I helped to create the future of Drupal.
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
What I’ve done
Crafted a design system
An atomic design system built using an existing UI library. Extended for our needs and evolved with a focus on ease of use.
Documented everything
Every single component is clearly defined and explains it’s use.
AI Native
AI was a requirement, so it was built in to feel as seamless as possible.
Help and train designers
As the lead for the project I’ve had to help and train all other designers on the project
Handled the small details
Every piece of the UI went through me, from working closely with the engineers
New features
I’ve designed new features. There have been prototypes and user flows to showcase it all
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
End notes
As you can probably tell, this isn’t a typical case study where I go into absolutely everything. If you want to know more about the project, I’ll happily show you how I’ve created everything listed above and more. This has been created as a way of showing the value I’ve generated for this product.
However, this project isn’t a typical design process. Many times I’ve had to work as a product manager to figure out the requirements, or I’ve had to work as an engineer to solve technical limitations. None of this fits into the regular design workflow, but that’s fine!
Ultimately, I solve problems, but I don’t let anything get in the way of that. I think you need to be a nerd to solve this stuff, and if that means working outside of the realms of a typical product designer. So be it.