Check
it out
Guide to Increasing Conversion

In our 7-part Guide to Increasing Conversion we'll introduce you to proven e-commerce functionality including, but not limited to, live chat, loyalty programs, and back in stock notifications! Sign up now and we'll deliver tips and best practices about each straight to your inbox!

Work

BottleKeeper
A Growth Spark Success Story

BottleKeeper
A Growth Spark Success Story

BottleKeeper
A Growth Spark Success Story

BottleKeeper’s Success Story Highlights

Company

BottleKeeper’s main e-commerce business relies on their main product, an insulated stainless steel container that keeps your beer bottle cold, fresh and safe from breaking. They originally started the company in 2012 after a series of prototyping and a successful Kickstarter campaign.

Problem

BottleKeeper first approached Growth Spark in the spring of 2015 with the goal of increasing conversion and to migrate their first website from Woocommerce. Their first website had significant performance issues with Woocommerce and constantly had customers unable to add product to their shopping cart or check out. Additionally, BottleKeeper’s top conversion tool was a video demo of their product that would frequently stop working for mobile visitors, a group that was discovered to be 50-60% of their total traffic. This was a large hurdle for conversion as their product was very easy one to understand, but only when you could see it in action.

Solution

Given the percentage of mobile visitors and the need to demonstrate the product and how it functions, we decided to take a mobile-first design approach that utilized highly-interactive design elements to 'tell the product story'. We designed an entirely custom homepage that easily illustrated how BottleKeeper’s product worked and the homepage functioned as well on mobile as it did on desktop.This interactive design element allowed us to entirely forgo using the video that kept breaking for mobile users.

Project Type

Product-Focused

Colder Beer is Better. It's Science.

Planning Phase Process

There is a strong correlation between how well planned a project is and how successfully it's executed. By taking the time upfront to thoroughly identify requirements, assumptions and constraints before starting to design or code, we reduce the number of issues we might confront later in the project. As such, we've created a three-part Planning Phase process that we used to help BottleKeeper succeed in their website redesign: Audience Discovery, Prototyping and Business Requirements Mapping.

Audience Discovery

Easy to Relate

Learn More
Business Requirements Mapping

Easy to Manage

Learn More
Prototyping

Easy to buy

Learn More

Audience Discovery

You want your users to have an exceptional experience on your website that will lead them to make a purchase. Building that experience requires a rich understanding of those users, their goals and how they will navigate your website.

When it comes to creating a solid understanding of your audience, you'll want to consider the following questions:
  • Who is your target audience?
  • What are your target audience's goals from the website vs your own?
  • Who do you think your customer is vs who they actually are?
  • What sort of demographic information do you have about your customers?
  • How technically competent is your target audience?
  • How would you describe your target audience's buying process?
The Audience Discovery step provides us an opportunity to build this understanding via a few specific activities:
  • Personas: A narrative description of the target audience profile including demographics, behaviors, interests, etc.
  • Analytics Audit: A review of any existing data or analytics to identify insights that might inform customer behavior.
Here’s a few examples of the Audience Discovery deliverables created for BottleKeeper:

Business Requirements Mapping

While sales increase, you want also want to make your e-commerce business as easy to manage as possible. Given the various aspects of managing an e-commerce business, from products to orders and support to marketing, you need to ensure the different platforms used to run your business all communicate and share data efficiently. You also want to reduce the amount of time and cost necessary to run your business day-to-day. In an effort to help you manage your e-commerce business more efficiently, we go through an activity called Business Requirement Mapping.

The goal of Business Requirements Mapping is to evaluate how data will flow and how processes will function across the primary areas of an e-commerce business including:
  • Products
  • Customers
  • Order
  • Shipping
  • Finances

This mapping phase helps us understand the people, processes and platforms used to run all aspects of your business.

When it comes to fully mapping out your e-commerce company's business requirements, you'll want to consider the following questions:
  • What platforms are you currently using to manage the operations of your business including inventory, products, orders, shipping, finances, taxes and support?
  • What platforms are you currently using to manage the marketing of your business including email, customer loyalty, CRM and analytics?
  • What should the primary system of record be in the ecosystem of platform and how should data flow between one platform and the next?
  • What are the unique attributes associated with your product?
  • How do you want customers to be able to filter and search for product, color, size availability?
BottleKeeper: Making It Easier to Manage with Business Requirements Mapping

Since Bottlekeeper already had an existing e-commerce business when they approached us, they had data that they wanted they migrate from Woocommerce to Shopify and without ANY interruption to their current operations and customer experience. Using Business Requirements Mapping to highlight priorities and logistics, we identified an ideal loyalty management platform, Sweet Tooth, and assisted with both the implementation of the platform as well as the migration of their customer data without disruption. The Business Requirements Mapping phase also highlighted the opportunity for BottleKeeper to optimize their wholesale business, which required that their inventory management system track across both wholesale as well as direct to consumer groups. We identified an ideal inventory management system called Stitch and assisted with integrating it directly into their Shopify backend.

Prototyping

Once we have an understanding of what makes your users tick, we need to translate that understanding into the experience that will drive sales! This translation requires thinking through your website in four key types of requirements: Structure, Content, Aesthetics and Functionality.

The most efficient way to handle this thinking is by creating a 'working prototype' of your website and use that as a reference in identifying what changes need to be made across the following:
  • Structure: Layout of the website
  • Content: Content displayed and controlled in the website
  • Aesthetics: Overall branding, UI and design elements for the website
  • Functionality: Interactivity, features and functionality of the website

The goal of Prototyping is to create a grayscale, working version of the client's website that we can reference as a means to identify requirements across the following the above categories.

When it comes to fully understanding your website's structural, aesthetic, functional and content requirements, you'll want to consider the following questions:

Structure
  • What is the optimal path that users will take in order to make a purchase or achieve any additional goals on the website such as leaving a product review, sharing products or submitting a support ticket?
  • Do your users tend to navigate your website primarily by filtering, searching or browsing?
  • What information do customers need to gather before making a decision to purchase your product?
Content
  • What is the optimal path that users will take in order to make a purchase or achieve any additional goals on the website such as leaving a product review, sharing products or submitting a support ticket?
  • Do your users tend to navigate your website primarily by filtering, searching or browsing?
  • What information do customers need to gather before making a decision to purchase your product?
Aesthetics
  • What is the optimal path that users will take in order to make a purchase or achieve any additional goals on the website such as leaving a product review, sharing products or submitting a support ticket?
  • Do your users tend to navigate your website primarily by filtering, searching or browsing?
  • What information do customers need to gather before making a decision to purchase your product?
Functionality
  • What is the optimal path that users will take in order to make a purchase or achieve any additional goals on the website such as leaving a product review, sharing products or submitting a support ticket?
  • Do your users tend to navigate your website primarily by filtering, searching or browsing?
  • What information do customers need to gather before making a decision to purchase your product?
BottleKeeper: Making It Easier to Buy with Prototyping

Bottlekeeper’s number one goal was to increase conversion. Given that BottleKeeper is primarily a 'single product company', we discovered we could increase conversion by bringing the buying experience and ability to make a purchase directly to the homepage. BUT Bottlekeeper’s main tool for conversion, their main marketing video, did not work on mobile devices, and big hurdle when we discovered that that 70% of their customers were shopping on a mobile device. Using interactive design elements, we highlighted the functionality of a BottleKeeper just as effectively as using video without the 'overhead' of video on the page. Take a look at their interactive homepage here.

Client Results

When BottleKeeper first came to us, their conversion rate was between 2% - 2.5%.

Since our website redesign, they've consistently seen conversion rates of 5% - 5.5%, a huge increase for the company.

They've also seen almost zero downtime (thanks to Shopify) as compared to the Woocommerce backend they previously had.

We made a number of 'marketing changes' for them, such as implementing a new loyalty program, that has produced other performance improvements such as:

300%

Increase in Return Purchases

32%

Decrease in Bounce Rate

21%

Increase in Time spent on Site

How can we help you grow your business?