I’ve watched a lot of my friends and mentors over the years start companies. But I never really had the entrepreneurial itch. I figured someday I might start a design studio of my own. But if you told me a year ago I’d have been helping to start a tea company I would have told you, “I don’t even like tea!”
Enter Sam DuRegger. I’ve worked with Sam for almost 2 years now on the digital team at Sonic. We’re both big coffee drinkers, so we bonded over that (and a million other things and friends we have in common). Sam always made tea at work and got me to try it — and I liked it! It wasn’t sweet tea or crappy tea bags. This was fancy tea — leaves and all. It was really more like coffee in the complexity of origins and flavors.
Well, one thing led to another, and we started a tea company together. Sam being the tea guy (and business guy) and me running the creative side of things (although I didn’t do the logo — that was the amazing Valerie Jar, one of Sam’s friends from Salt Lake City).
I’m really proud of what we’ve made and I’m excited for you to see it (and taste it)! It’s been both incredibly hard and incredibly fun to work on my own thing. It’s like designing your own portfolio site, but people can buy it in 4oz bags. I hope you enjoy the work and thought we’ve put into it.
Here in this enormous blog post I’ll walk through some of my favorite design details and tell you a little about how we launched and what we learned.
To be clear, this is definitely a nights and weekends project — neither of us are leaving our work at Sonic. But we’re excited to have a small, fun, inspiring project to work on outside of our 9–5.
Edit Jan 1, 2019: At the end of 2018 I amicably sold my stake in the company to one of the other partners. It was super fun and I love those guys and the shop, but the amount of free time I have to dedicate to the project as we added our 2nd child, is not the same as it was when we started, if you can imagine.
The Tea
I had no idea tea was so complex. So many varieties of tea come from the leaves of one simple plant. When we talked about how to photograph the tea, we wanted the tea itself to be the focus. When you use a tea bag, you don’t get to see the tea (which is probably good, because most tea bags are just lower-quality tea leaves or powder, much like instant coffee). But when you brew loose leaf tea, you see the tea leaves expand and the color of the tea be extracted into the water. It’s such an interesting, mesmerizing process. So we photographed the teas just as you’d see them when you brew it.
When photographing the piles of tea, the shadows were incredibly hard to cut out at first. But if you place the tea leaves (or any other small, detailed object like jewelry) on a glass surface 1–2 feet above your solid background, the shadows are diffused away. Warning: if you leave 10 piles of loose leaf tea out on a glass coffee table, your wife will think you’re doing drugs when she gets home.
Product Pages
On the individual product pages, we took over the page with each tea’s brewed color. We used this color theme throughout the site. When you hover on the teas on the homepage, a small dot showing the tea’s color appears. And the active state of each tea type is highlighted with the general color of that tea type. When you make coffee, the color is pretty much the color of coffee. But each tea has a unique shade and even changes depending on how strong you make it. So we wanted to make sure color played a big role in the product pages to differentiate the teas and bring more context into the experience.
Filtering
All tea comes from tea leaves. But the way those leaves are grown, picked, dried, stored and flavored can drastically affect the taste. I got a crash course in tea history from this book at the library, and the history and varieties are fascinating. But for most people, tea is tea. We wanted to approach tea with a high standard for quality and sustainability, but we also wanted to make tea accessible to learn about for newcomers (like myself). We have the standard filtering by tea type: black, green, oolong, white, and herbal, but we also give you the option to filter by flavor, so you can filter our teas based on your preferred taste. I built this filtering system using Isotope. I’ve used it on so many projects now. Super simple, fast filtering with subtle, smooth animations. It’s a little finicky to do responsively, but it works. When I build this site into a CMS I’ll add tags for each filtering option and output those on the tea elements.
So whether you’re a Sam (tea connoisseur) or a Brad (tea novice), you can find a tea that sounds and tastes good to you.
Brewing Equipment
Another thing we realized when talking with people new to tea, is the brewing process is mysterious. They’re used to tea bags or ordering tea at a shop. But they don’t have the tools at home to make it. So we sell a simple minimal brew pot from Vivid. We’re planning to offer more tea equipment in the future as well. But for now, the Vivid brew pot is our favorite and the easiest way to get started brewing loose leaf tea.
The brew pot is a simple way to make tea. Instead of using a ceramic or steel pot with a tea bag, you get to watch the leaves expand and the color of the tea saturate through the glass. Loose leaf brewing also gives you a more balanced, full flavor than tea bags. Also with most of our teas, you can steep them multiple times, yielding different flavors each time.
I made a few of these tea pouring GIFs from the photos Caitlin took to illustrate the way the tea changes as it expands and as the color develops. We did a few time lapses for Instagram as well. It’s hard to capture what each tea looks like in a single product photo, as it changes so much throughout the brewing process, so these brew and pour GIFs are perfect for showing off the product and the process.
Packaging
The packaging system uses simple wraparound stickers on craft bags. The oz indicator is a stamp, so we can order all the labels for each tea at once and use the same label for 2oz bags or 16oz wholesale bags.
We’ve found some bags that are compostable, and are continuing to find ways to be environmentally responsible with our packaging. We’re also exploring other packaging form factors for upcoming limited edition teas.
Valerie also did the initial label design, but we’ve made some tweaks to simplify it a little bit. It was my first print project beyond business cards in a while. It was cool to go see the printing press where we got them printed in OKC and meet the guys printing our labels. They explained how I apparently picked an incredibly hard black color to reproduce consistently, but they were able to do it. And it was perfect. There is a tiny bit of red in it if you look closely, but it’s not overtly brown.
Brewguide
My personal favorite part of this project was building the Brewguide. I found myself making tea every morning and night, but still checking the bag label for Sam’s handwritten instructions (time, temp, tsp/tbps?). I was also using my iPhone timer, which gets the job done, but felt like overkill. So I built my own timer that felt more like watching tea slowly change color than running laps.
The Brewguide is a web app (for now) that lets you select your tea, gives instructions on how to prepare it, and gives you a simple timer that fills the screen as your tea brews. It’s part of our website, but you can add it to your phone’s homescreen for a shortcut to get the full screen effect.
Even though I know most of the times and temperatures now for my favorite teas, the Brewguide has become part of my ritual of making tea.
I used timed CSS animations to create the timer fill. Right now, if your screen goes to sleep, it will pause the timer. So I’m looking into building it into a webview-driven iPhone app, so I can turn off auto-sleep for the app (which you can’t do in a web app). I love using it and it feels so much calmer than the iPhone stopwatch or alarm. Eventually I’ll probably use the individual tea color values for the fill color instead of the brand blue.
Store
I thought about combining the Brewguide and the product pages at first, but I realized that while they shared some of the same details, they were for totally different audiences. The whole point of the Brewguide was to be a streamlined timer with simple brewing instructions (it was all text-based for the first couple weeks I used it). So we decided to keep them separate, which meant we needed a store. Before I built this site, we had used Shopify and Square for our online store. While they were both cool in their own way, and got us something to send friends, family and early wholesale clients to place orders, I knew it would take way longer to integrate the site into a CMS and store. So we launched with just static HTML site and Shopify’s embeded products. It’s such a cool feature. We built the store in Shopify and can embed a buy button anywhere on our site, similar to Stripe Checkout. It even maintains a customizable floating cart icon across the site.
So we’ll definitely come back to it and build a custom store CMS. But for now, this got it out the door and kept our design the way we wanted it without compromising to a template. And Shopify handles all the customer and shipping info in a popup so it’s fully secure without us needing to own it yet.
What’s Next
Like with any project, there are things I’d do differently and things I can’t wait to fix. One of those is the image weight of the site. Right now each tea photo weighs in at around 450kb as a transparent png. If I save them as progressive jpgs, they go down to 150kb. Which sucks. I only need the transparency on desktop, where we have the fixed woodgrain background. On mobile the fixed background doesn’t apply, so I don’t need pngs. So I’m planning to implement srcset to load the flat jpgs on mobile devices and the transparent pngs on desktop devices. Making images 3x smaller for mobile users is a huge savings. I’ve never used srcset for images before and I’m not even sure yet if I can change image formats or not. I’m looking at a couple other alternatives like simply using media queries. But I want to explore a few options and learn the best way to do it.
Also on my hit list is the dreaded CMS. I’ll probably build it on WordPress, as it is my long-loved platform of choice. I’ve looked at other platforms like Prismic.io or a custom Shopify or Squarespace template. But every time I compare, WordPress comes out as the easiest to customize and extend. It’s not without its problems, but if I’m the one building it all, I want to make sure I’m able to maintain it myself.
Also on our list is creating a series of videos about tea, equipment, preparation, history, cocktails and more! We’ve got a short list in mind, but need to plan them all out more.
So there is much more to come for Woodshed. We went through our plans for the upcoming months last week and I can’t wait to get started on them. It’s more product-related stuff like future tea offerings, packaging and partnerships, not just website features. But I’ve got a few of those planned soon too.
I hope you enjoyed this looooong look into my process. If you have any questions or ideas, I’d love to hear them. Or if you find any bugs on the site, I’d love to fix them, so let me know.
Follow me @adbrad and follow @woodshedtea on Twitter and Instagram for updates. And go buy some tea on the site! It’s great tea, I promise.