Coffee lovers never want to run out of their favorite morning brew; that’s why in the last 12 months there has been a surge in the growth of ecommerce coffee subscriptions. We love a good cup of coffee at The Taproom, so when Copper Cow Coffee came to us looking for a new storefront for their innovative single-use filters we couldn’t wait to get started.
Let’s take a look back at how we helped Copper Cow Coffee create an intuitive and engaging subscription service powered by Shopify Plus and ReCharge.
Barista level coffee. Next level convenience.
There’s nothing better than a fresh cup of coffee in the morning to ready you for the day ahead. It’s safe to say that it’s somewhat a way of life for many, as 83% of Americans drink coffee and 79% say they brew it at home. People especially love the coffee they get from their favorite coffee shop, and more than ever, they want to drink that same amazing, high quality coffee in the comfort of their own home.
That’s where Copper Cow Coffee comes in. Their single serve coffee filters allow people to brew a delicious Vietnamese style coffee in just 90 seconds. No extra equipment needed, no drive to the coffee shop, just wait for it to brew and enjoy it on your own sofa. The unique biodegradable filters also come with sweet, silky smooth creamers that are not only delicious but all-natural. Plus with flavors such as lavender, churro, and seasonal varieties like pumpkin spice, it's no wonder Copper Cow has such rave reviews from its customers.
The Brief
Copper Cow has developed a great product that maximizes at-home coffee convenience. However their original site has been built with a one-off purchase focus, and although they had a “coffee club” subscription plan, it wasn’t the main focus of the site. They could see the potential of these subscriptions, therefore their dream site would see one-off purchasing take a back seat in favor of recurring orders. This would allow them to take the convenience of their product to a whole new level, and develop a strong, loyal, and engaged customer base.
There is however an additional challenge in the plan to build a subscription-led experience. While they have a great product, Copper Cow wouldn’t exactly be the first ever coffee subscription service on the market. Therefore we needed to help them build a unique experience that would capture the attention of their target audience and engage their customers beyond a simple recurring coffee order. To do this, we had to create a more tailored experience that would maximize personalization and retention.
Let’s look at how we achieved that.
The Solution
Snapshot:
- ReCharge integration
- Klaviyo integration
- Custom quiz flow
- Custom app development
Running a high-growth, ambitious company requires a powerful platform. The first step in Copper Cow’s journey was to upgrade their Shopify store to Shopify Plus in order to give them the added tools and functionality they’d need to scale their business. From there, it was time to work out how to deliver on that amazing customer subscription experience they were looking for.
Next, how to deliver on that amazing customer subscription experience. When it comes to coffee, everyone has their own preferences. With the growing importance of personalization in ecommerce, it was important to make sure Copper Cow’s subscription service could account for the differing tastes of their customers. That led to the idea for an intuitive, custom quiz flow that would engage customers and provide them with a unique subscription box tailored to their individual coffee preferences. Whether you prefer your coffee iced or hot, black or with creamer, latte or espresso, Copper Cow will be able to put together the perfect box for every customer.
In addition to building out the quiz flow, we also wanted to do a deeper dive into improving the buying experience by building a custom app for their store to provide the ability to customize boxes. This would allow the customer to change the flavors they receive after they’ve completed the quiz, and for every subsequent order if they want to try something different as new flavors are released. To further support subscriptions, we also suggested building out a custom middleware app to give customers the ability to purchase gift subscriptions for their nearest and dearest. These additional functionalities truly make the most of the store’s ReCharge integration, making for an even more seamless and engaging customer experience.
What this unique experience does is transform Copper Cow Coffee into a hybrid service, combining the convenience of standard replenishment subscriptions with the personalized, tailored quality of curated subscriptions. Customers never run out of their favorite coffee, but can also try the latest seasonal offering and switch up their usual routine with a new flavor. They can then share the coffee they love with their friends and family by purchasing a gift subscription, allowing Copper Cow to take advantage of the gifting market and reach new audiences.
Finally to ensure Copper Cow were able to put their store data to good use, we proposed implementing a deeper integration with Klaviyo for their subscription and quiz flow to allow for smarter segmentation and better automated email flows. On top of delivering a great on-site experience, they can then ensure all the emails they send to their subscribers are highly personalized and tailored to their purchasing behaviors and product preferences.
Developer Insight
To truly understand what went on behind the scenes of Copper Cow’s new site, you need to speak to the dev team. From figuring out how to share data between multiple apps, to constant testing, it was a tricky build that presented challenges but ultimately led to a beautifully functioning site the team are extremely proud of.
We sat down with Lead Developer, Anna Gallo, and Developer, Dani Reinking, to get a better understanding of what went into the Copper Cow Coffee site build. If you’re a fan of getting technical, you’re in for a treat.
What were the main challenges in developing the Copper Cow site?
Anna -
“Once we figured out the plan of attack, we quickly realized that sharing data between multiple apps in a way that looked and felt seamless to customers was going to be challenging.
Working with user input was a very small piece of a puzzle that also contained default states, error states, business logic, and third-party APIs, all while empowering the client to own the project and make their own updates without developer assistance.”
Dani -
“As Anna has mentioned, one of the biggest challenges throughout this process was the data handling and business logic side of box creation.
We had to take into consideration the customer input for personalization and marketing, as well as the matrix of quiz answers provided by the client that would inform our code what to do when the customer finished the quiz. It was an intense process which took a lot of time and thorough testing.”
What was the solution to those challenges in the end?
Anna -
“We ended up using Vuex, a state management library for Vue.js, to help us manage and share our data. With Vuex, we set, modified, and exposed data for each of our apps to consume simultaneously. By taking this approach, we were able to ensure that our datasets remained current and synchronized even when users took less-than-ideal journeys, and we were also able to help our client capture a lot of interesting analytics along the way. By rendering our Vue apps within our Liquid, we were also able to share our design system across apps so that everything is visually seamless and end users have no idea that multiple apps are running the experience behind the scenes.”
Dani -
“Perhaps an unexpected end result of this project was enhanced communication amongst team members. The challenges of the process also meant there was a lot of challenge in understanding, and I personally think we knocked it out of the park with this one. Any time there was a question — whether it was about quiz logic, designs or third-party integrations — somebody was always there and ready to find solutions."
What do you like about the new set-up for Copper Cow?
Anna -
“Aside from personalization just being fun, one thing I had a lot of fun working on in this project was the mechanism for extending product colors. When I initially built the feature I tested it with just a handful of colors. There was one weekend during which the Copper Cow team went in and added a bunch of data, and when I came back on Monday a magical coffee rainbow was waiting for me in my dev environment. I always enjoy things with a design systems flare and that was a fun example of being able to use tokens that came from metafield data to make something pretty and very easy to change.”
Dani -
“There was absolutely nothing better than going through that quiz and getting results for the first time! It's such a great flow, the aesthetic is so light and inviting, and knowing all the magic that's happening behind the scenes just makes it more special! I'm not ashamed to admit that I made a purchase almost immediately upon launch.”
Any final thoughts on this project?
Anna -
“I think we as a dev team all had a lot of fun nerding out on this one, because functionally we all got to build our own Vue app as part of the project. I worked on the quiz and templating for the quiz results page, Dani worked on the cart and ReCharge integration, and another one of our developers, Kristen, had a hand in basically everything, including our middleware app.
As we rendered our Vue apps within a Shopify theme, we were able to do a lot of really fun stuff with data sharing in a way that blurred the lines between headless and traditional builds. For example, all of the quiz content and graphics, the spacing and positioning of elements, and even the order of the quiz questions are bound to settings schema in Shopify. The client has the ability to update any of these things as needs arise without developer assistance, so Shopify was really like our CMS in this area of the build. The quiz app consumes the data from the settings here while in tandem committing user input to the Vuex store. All of this data gets sent to Klaviyo and Google Analytics along the way, and then also the results app when the user finishes the quiz.
As developers we all had to collaborate along the way to make sure we were sharing usable data, so we had a lot of early discussions about data structuring and naming and made sure we checked in with each other when changes had to be made.”
Dani -
“The two things I had the most hand were the results page and the cart. Both had their challenges, but there is something specific that we've done in the cart that's vital to the customer’s journey which could be fun to call out!
Each box contains a selection of coffees, which can be customized with any quantity of any flavor the customer desires. When a box is added to the cart, it's actually adding each coffee flavor individually. However, since the box is marketed as a singular product, we have to spoof it a bit! Our Vue app retrieves the cart items, identifies which items belong in a box, and then properly visualizes the information within the cart sidebar. This allows the customer to easily identify, change and remove any boxes while keeping inventory simplified for the client!”
-----
A product as great as Copper Cow Coffee deserves an equally great storefront, and we are so pleased to have delivered just that. We’re looking forward to watching their store grow and develop with their new tools and customer experience.
Now who’s ready for a cup of coffee?
View the live site here, and click here to get in touch if you’d like to learn more about working with The Taproom on your next project. migrating to Shopify Plus.