I'm rebuilding this site right now. So a lot of things may look broken. But what better motivation for me to finish it?

Woodshed

I’ve worked with Sam DuRegger a lot over the years, from Sonic to MidFirst. But one of the most fun things I worked on with him was Woodshed. We’re both big coffee drinkers, so we bonded over that initially. Sam always made tea at work and got me to try 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 handling the creative stuff (although I didn’t do the logo — that was the amazing Valerie Jar, one of Sam’s friends from Salt Lake City).

Edit: At the end of 2018 I amicably sold my stake in the company to one of the other partners, before the shop opened. It was super fun and I love those guys and the shop, but the amount of free time I had 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.

teas

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. We extended this color concept to the packaging redesign eventually too.

gingermint-page
nilgiri-page
oolong-page

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 worked.

teasort

tea-filter

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 sold a simple minimal brew pot from Vivid.

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.

tea-gif3

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

bag-jpThe 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 almost-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.

brewguide

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.

brewguide

Web 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 embedded 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.

The Shop

I didn’t design the logo (log-o), but I did make this line art version that we had hand-painted on the window.

The shadows it cast into the shop in the morning are so satisfying.

My son Henry enjoying a hot chocolate steamer.

Conclusion

Woodshed was a really fun project that let me explore creatively, with the real-world constraints of costs and time, but without the same level of bureaucracy that accompanies design work in a large organization. It made the work that much more personal and meaningful to us. And it was fun to build something with Sam, who was fully supportive of pushing for quality, craft and the value of good design throughout the process,  as well as a great creative partner. Woodshed opened a shop in 2017 in Oklahoma City, and has now expanded to selling coffee and tea and doing it in a super cool, calm, well-designed space.