28Beans is a small batch, on-demand neighbourhood coffee roaster with an on/offline presence.
This project combines all the hobbies and skills I've built up over the years. Design, branding, web development, carpentry and lettering, project planning, print design and a new skill, coffee roasting.
Once I found out Shopify offered a "Lite Plan" where you can build your own website and tie it into their backend, I realized I had everything I needed to start a little coffee roasting side gig.
And why "28Beans"? The coffee box is on 28th street. Skews more on the side of "easy to remember where to buy more coffee" and less on the side of "a good name".
The Coffee Box
Learning how to roast and developing profiles requires you to go through quite a bit of green coffee. More than we could drink. So I basically gave it away asking for people's opinions in return.
Then it dawned on me. Why don't I just put it in a box in my front yard and people from the neighbourhood could buy some whenever they wanted? Sort of an honour system. Put a little money box in there, figure out the overall shape, how to install it, colours, branding, all that.
Building a box with the material I had on hand
Adding the "In Stock" notice flag and painted on letters
Installing it in the yard enjoying the snow
Stamp / Packaging
It was a deliberate decision to have some kind of face on the packaging. People are naturally drawn to faces and when you want someone to look at your thing, add a face, right?
That was the thinking behind it anyway, and putting a little face on a coffee bean is fun since the beans' creases are so varied. That opens opportunity for expression in the character. The bow tie adds some personality and body scale.
And it looks like Kirby. Big Kirby fan.
Hashing out character ideas. Originally was going for more of a painted look. Bean dude is all that came out of that exercise.
Stamp design process
A lot of back and forth with the stamp production team to get it just right
Final result with full-bleed impression. Big stamps take a little practise to use. Also, there's a difference between stamp ink and dye. TIL
Website Tech Stack
28beans.com was built using the static site generator Gatsby JS and hooks into Shopify's backend giving me access to product inventory and a checkout system. So I just build and design the site and pull in the data I need.
When customers are ready to checkout, they are directed to Shopify's checkout system and I'm able to keep track of incoming/outgoing orders, supply levels, give refunds, promos and purchase shipping labels from home.
Hosted on Netlify for free, so I'm only paying annual URL and monthly Shopify costs. Very affordable for this high-performance e-commerce site.
Website Design
As for the design, I wanted to keep the design simple with only two colors, have a strong type-face and introduce a little movement. Something simple and modern.
My intention is to have this roasting thing as a little neighbourhood secret people come across on their own. That self discovery is fun and people take a little more ownership in their 'thing'. That leads to the next fun part of letting their friends in on the 'secret'. Maybe not the best for business, but it's fun.
The product pictures are from around the neighbourhood further intertwining the brand and the people it serves. Another fun element in, 'Hey, I know that place'.
The whole design was done in-browser and on the fly which is rare for me. I normally bounce around in Figma or Photoshop, but this came together fairly quickly so I just went with my gut.
Also the mobile view is spot on. Especially the shopping cart which I spent way too long making that responsive table layout.
28Beans home page featuring backend conditions that show 'Online Exclusive' badges and different states for the Estate Series if it's in stock or not.
Product pages give you all the info you need as well as shipping info, personal anecdotes and other coffee options
Animated Text with P5.js
I also created a wavy text generator (liquidy like coffee perhaps?) using P5.js.
I wanted something simple and interesting for the hero spot as well as have access to this quick generator I can use for social media marketing.
Custom P5.js wavy text generator
Roasting set-up plus experimenting with different roasting profiles
Roasting
Arguably the most important step in the process, learning to roast on my new roaster.
Every roaster is different and the one I have is very manual. The green coffee beans come from different regions around the world, growing at different altitudes and conditions. They can be small and dense or bigger and softer with all kinds of flavour notes.
The best way to learn is to just do it and track everything. Each time making new adjustments and dialing in your roasting profile until you've got something you're happy with.
All those data points from adjustments are important because you need to let the coffee rest for around two days to degass. This off-gassing allows the real final flavour to come through. Too soon and it tastes grassy and 'green'. And since you wrote down the profile and what you did, you have a refrence to see how you got there and how to reproduce.
