03 · Specialty coffee roaster
May – Jul 2022 · 5 min read
Sorcery Coffee Roasters
Three
designers,
one
brief,
my
directions
chosen in most rounds.
A specialty roaster in Pretoria needed one site to sell coffee beans, point consumers and clients to its cafés and order online. Three designers worked every task in parallel, and the client chose one direction each round.
*Screens show the 2022 version, which launched before a later rebrand.
Role
UX/UI Designer
One of three designers
Timeline
3 months
Type
E-commerce website
Category
Specialty coffee retail
Status
Launched, since rebranded
Worked with
Client contact
Founder and roaster
Two other designers
Tools
Figma
Microsoft Teams
Notion
Deliverables
Market research and competitor analysis
Information architecture
User and purchase flows
Three rounds of wireframes
UX writing
A shared design system
High-fidelity pages
Client presentations and documentation
One of three
designers working in parallel
Most rounds
my directions chosen
Built
and launched
3 months
May – July 2022
01
Research before visuals
Market research and an information architecture came first; the look came last.
02
Reasons to come back
A subscription, coffee gear and brewing tutorials around a four-coffee range.
Case study
At a glance
The product
An online shop for Sorcery Coffee Roasters, a specialty roaster with two cafés in Pretoria, South Africa, built from scratch.
My role
UX/UI Designer, embedded consultant, May – July 2022. One of three designers given the same tasks; each of us explored and presented our own direction.
The team
The client contact, the founder and roaster, and two other designers.
The challenge
A verbal brief that described a feeling, and an unfamiliar brand.
The outcome
My research-led directions were chosen in most rounds, and the site was built and launched based on them.
The outcome
Chosen in the room, then built and launched
A few months after the project ended, the site went live on the directions the client had chosen, and it stayed live until a later rebrand. From my work, the site shipped with:
The structure: the information architecture and the product page layout every coffee used.
Reasons to return: the “Join the tribe” subscription, coffee gear and gift sets, brewing tutorials led by the founder and roaster, and the Sorcery Tribe Instagram carousel.
The brand in context: The Roaster story on the home page, the word mark direction and on-brand copy across the shop.
Practical touches: collection at either café during checkout, and the shared design system all three designers used.
The client’s feedback came verbally in review meetings, and it kept returning to the same things: the research behind each proposal, the questions I asked, clear presentations and documentation, attention to how each idea would be built, and ideas nobody had asked for that the client chose to build anyway.
Research, ideations, strategy and explorations
My role
One of three designers, every direction my own
Client contact
The brief, and choosing one direction each round, sometimes after consulting the founder and roaster
Founder and roaster
The brand, the origin story and the coffee
Two other designers
The same tasks, explored and presented separately
Me
My own direction every round: research, IA, flows, wireframes, UX writing, visual exploration, my part of the shared design system and high-fidelity UI
We discussed each task together, but explored it individually. The direction the founders chose became the starting point for the next task.
The challenge
One website, three jobs, and an unfamiliar brand
Sorcery had two cafés, a loyal local following and no website. The site had to sell four specialty coffees beyond the cafés, reach coffee lovers outside Pretoria, and grow a brand rooted in the founder and roaster’s travels through West Africa.
The brief arrived in a 30-minute meeting, with no documentation. With the client’s permission, I recorded it and asked questions to understand the brand and the website expectations.
Everyday drinkers and connoisseurs. Origin, process and altitude excite experts and overwhelm everyone else.
A small range and a reason to return. Four coffees had to feel like a complete shop.
Atmosphere and checkout. The site had to carry the cafés’ feel without getting in the way of buying.
Intriguing or unsettling. A brand built on the language of sorcery needed its story told to feel inviting.
How might we turn a brand built on mystery into an online shop that feels inviting, helps any coffee drinker find the right beans, and gives them a reason to return?
Key decisions
Three decisions that made the shop work
1 · A product page anyone can read
Research into how people buy coffee online shaped one structure for every coffee: a name people can pronounce, taste notes, roast, the best brewing methods, origin, and a buy button within reach. “Read more” holds the farm, altitude and process for connoisseurs. The client approved the structure as presented.
2 · Four coffees, plenty of reasons to come back
Around the coffee beans I proposed a subscription, “Join the tribe”, for regular drinkers who never want to run out; coffee gear and gift sets; and the Sorcery Tribe carousel, bringing Sorcery’s Instagram onto the site.
Two personas from research on how consumers/clients buy coffee online
3 · Plain buying, with the story around it
Buying stayed deliberately familiar: clear product cards, size and quantity, a visible buy button and a step-by-step checkout, with collection at either café. The atmosphere lives around it, in deep greens, illustrated packaging and real café photography I asked the client for. The words carried the brand too: “Bag it”, “The Sorcery Shelf”, “Coffee gear” instead of “equipment”, and “speciality” instead of “limited edition”.
Market research, competitor analysis, and a brand moodboard shaped a marketing strategy and the features
The process
Groundwork, then structure, then surface
Groundwork. Research into roasters, product pages, subscriptions, delivery and loyalty, shared as “Did you know?” facts and a marketing strategy for online sales, plus a 45-minute interview with the founder and roaster.
Structure. An information architecture before any visuals, then user and purchase flows and three rounds of desktop wireframes.
Surface. A visual vocabulary of texture, pattern, colour and language, a shared design system, then high-fidelity pages.
The IA and user flow, then the three wireframe rounds as one strip.
What I’d do differently
Evidence gets chosen. Preference doesn’t.
Test with real coffee buyers, even a handful, before the designs went to build.
Open a feedback loop with the developers, in order for design intent and build decisions to meet earlier.
Agree success measures with the client before launch, to show the impact in numbers as well.
The Sorcery Coffee Roasters website has since been rebranded and redesigned. These screens show the version I designed in 2022, which launched before the rebrand.