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.

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.

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.

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.

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.

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.

I made a few of these tea pouring GIFs from the photos my sister 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.

The packaging system used simple wraparound stickers on craft bags to start, and we tried a few different form factors over time. I loved this minimal white one we did, simplifying the labels and bringing more character to the bag. This also extended the tea color indicator element that we used on the website.

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.

Woodshed now has a physical location in Oklahoma City. It’s a beautiful space. 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.

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.

Co-founder & designer: me

Co-founder: Sam DuRegger

Original logo & packaging design: Valerie Jar

Window sign painter: Tanner Frady