Theo Chocolate

Platform

BigCommerce

SERVICES

Creative, Data Driven UX & UI, Search, Strategy, Systems Architecture, Technology

From the cocoa farmer in the Congo, to the truck driver in Seattle and the chocolate lover in Philadelphia, they believe there is a thread that runs through us all. The choices they make in Seattle touch lives across the planet in real and lasting ways. That knowledge and that responsibility drives them to do things in ways that contribute toward a more compassionate and enduring world.

"It’s why we make our own chocolate, to ensure that everyone is treated in a way that we can be proud of and that only the highest quality ingredients and processes are used."

Theo Chocolate makes the best chocolate ever (in our opinion anyway) and is the preeminent chocolate brand in Seattle (based on our in-depth research on eating a lot of chocolate). The brand had reached a point where growing eCommerce sales was a priority but was unsure about the best technology to build with. They had a WordPress/WooCommerce site hosted on bare metal and they knew they needed to change and had many ideas around digital marketing; yet with so many technology options available, the best platform to serve the growth of the business was unclear.

Theo's team is small and they needed to be able to run their eCommerce website with minimal staff. They needed to find tools that they could use to manage the business long term, yet still be able to enhance it as operations allow.

Enter Overdose. We began working with Theo early in their discovery and helped define requirements/features for both B2B and B2C eCommerce. Next, we led a platform-agnostic review of eCommerce platforms providing a comparison based on the recently defined features. This gave the Theo team a foundation to make good decisions and be in control of their eCommerce site.

Theo landed on BigCommerce as the eCommerce platform and asked the Overdose. team to build the site. The new Theo site serves both B2B and B2C customers using a single instance of BigCommerce and we aimed to use out-of-the-box features as much as possible. While the site was getting built, Theo was finalizing a major update to their brand look and feel, the hustle to get the site live then was to align the site launch with the completion of a rebrand. We got the site live in 90 days and ready for the holidays keeping the Theo team on time for their brand launch and a speedy site for holiday shopping.

Speaking of site performance, the migration to BigCommerce reduced page load by 30% compared to WordPress/WooCommerce!

At the start of 2022, Overdose. and Theo started working together on Performance Marketing services. Our objective is to support Theo through their digital strategic marketing operations within the American market by providing and testing new marketing platforms and providing strategic direction. We're excited to be adding Performance Marketing services with the Theo team. Ongoing platform and campaign management include a quarterly review of campaign pacing and analysis of ad performance, upon which Overdose. can make creative performance recommendations in line with Theo's user journey.

Integrations

Shogun :
Shogun Page Builder is a drag-and-drop page builder and visual content management system seamlessly integrated with BigCommerce that solved Theo’s needs in publishing landing pages, product pages and other static content on the website.

Klaviyo :
Overdose. integrated Klaviyo on BigCommerce. Theo Chocolate identified the email service platform as their preferred solution and made the decision to move off of Mailchimp and onto Klaviyo. Overdose. did an audit of their email marketing.

Avalara :
Standard integration with BigCommerce.

Authorize.net was Theo's original payment method on Wordpress/ WooCommerce and migrated over to the new BC Instance.

MapMyStore :
Theo utilized MapMyStores for their store locator in the BigCommerce site using the Google Map version. The Google Map version is an out of the box, mobile responsive, an embedded iFrame solution that allows Overdose. to utilize the CSS from the BigCommerce site. Theo was responsible for loading the store data to MapMyStores as well as updating the MapMyStores user interface in order to implement the map solution.

Elfsight (Instagram Feed) :
Overdose. completed integration with Theo’s Instagram feed. Overdose. used the BigCommerce app called ElfSight to drive the integration. The Instagram app can be used to display the Theo Instagram feed on other pages in addition to the Home page.

Recharge :
Recharge's recent integration with BigCommerce was released last year. Overdose. integrated Recharge. The functionality is simple and easy: schedule for more chocolate! https://theochocolate.com/subscriptions

ShipperHQ :
Overdose. integrated ShipperHQ and utilized their rules based on customer group and product groups.

[ODINT] CASE STUDY IMAGES_ THEO_tier 2 image 4

Challenges

CHALLENGE #001

Phased Implementation

Migrate Theo website and eCommerce functionality using BigCommerce core functionality and third-party modules where possible in order to allow Theo the time needed to fully develop the website design to embody the new brand standards.

SOLUTION

The initial phase will be to establish the foundation for eCommerce and rebrand introduction with BigCommerce. Overdose. will work with Theo to redesign and re-architect the navigation (primary navigation, header and footer), introduce key brand elements such as fonts and colors, create a new Home page, and develop the capability to create immersive landing pages for product launches and holiday campaigns. While Overdose. executed Phase 1 of the website project in preparation for an October launch, the Theo design team completed the branding effort and full website redesign. The second phase of the project followed the completion of Theo’s design phase. After the website designs were finalized and approved, the BigCommerce templates were updated to reflect the brand evolution. The second phase also provided the project team with the opportunity to release additional features to enhance the user experience.

CHALLENGE #002

The Flexibility of the BigCommerce Admin

Assisting their sales team in maintaining a back-end workflow that was not going to change due to budget or technology limitations.

SOLUTION

Documented their business process and mapped it against UX on BigCommerce. This resulted in their team getting what they need out of BigCommerce and being able to support their B2B efforts.

CHALLENGE #003

Custom Gifting

Theo wanted to create a chocolate selection and knew how it should work. The UX/UI and product configuration presented challenges that we had the opportunity to get creative with.

SOLUTION

We were able to streamline the eCommerce operations, which opened up bandwidth on the production side so that Theo was able to fulfil Custom Confection Boxes. As a part of Phase 2 (Feature release), we quickly custom-designed the UI to choose: the box, ribbon, & chocolate assortment on their PDP; then when the order is placed, it flows through to operations and is packaged up. This was a cool feature that allows a user to create their own custom box of chocolates. So, if you don’t like caramels, you can pick all truffles, pick the box size, and the ribbon color. We had to get creative in how the products were entered in the admin and then how the custom product was configured on the PDP. Check it out!

Create Your Own Chocolate Box Here

CHALLENGE #004

B2B Ordering Tool

Theo's B2B Business requirements for processing wholesale orders with a great customer experience.

SOLUTION

Overdose. created a custom BigCommerce template that was built by a single developer using logic that allowed B2B customers to quickly lookup and add items to an existing order; Versus having to go to a PLP or PDP to add to cart. Then they could submit the B2B form, without payment, and it would go to the B2B sales team at Theo so they could process the order and invoice the wholesale customer. This involved using BigCommerce Customer Group, catalog pricing, custom templates, front-end logic and a custom form submission to the sales team.

"The Overdose. team has been an important partner as we established and grew our eCommerce strategy at Theo. From the initial site migration to ongoing development support and strategy, and now expanding to support our performance marketing, they’ve been a valuable resource for our small team."

Lynne Rowan, Brand Manager, Direct to Consumer
- Theo Chocolate

Objective & Insights

Increase in average conversion rate (YOY)

+30%

Reduction in page load (YOY)

+30%

Increase in mobile transactions (YOY)

+200%

UX & UI

The design portion of the project was handled in two phases. In phase 1, Theo provided new branding guidelines to Overdose., as well as a set of the completed homepage, header, and footer mock-ups for both desktop and mobile. As part of the re-platform, Overdose. utilized the Cornerstone theme within BigCommerce. This alone provided a better overall user experience to the Theo site. Combined with a new homepage, updated fonts, colors, imagery, and a header/footer, we expected to hit 80% of the new design goals for the initial launch on BigCommerce.

In phase 2, Theo worked with the approved wireframes to complete their website design. The Overdose. team worked with Theo to hand off the UX deliverables for the Theo designer to use in creating mock-ups. Theo was responsible for providing completed designs for both mobile and desktop views, a redline outlining pixel-level dimensions of the mock-ups, and a style guide outlining the colors, fonts and hierarchy of elements on the site (ie tags, buttons, text links, etc.) and all font licensing.

The Theo team provided all photographic assets, copywriting and content. Sample content was used by the design team in order to accommodate actual information and was combined with ‘greeked’ copy.

Shogun Page Builder is a drag-and-drop page builder and visual content management system seamlessly integrated with BigCommerce that solved Theo’s needs in publishing landing pages, product pages and other static content on the website for the launch of Phase 1.

Shogun can be used for the design-heavy pages with BigCommerce native page templates used for the more static, basic content (ie Shipping, FAQs).

Theo had the opportunity during the requirements review to identify which pages to be built using Shogun. All static pages in the site map – whether managed using Shogun or BigCommerce – were accessed through the BigCommerce admin. Overdose. formatted the Shogun page components to meet the current design on the product detail pages. Theo had the ability to manage the content upon completion of the Phase 1 site.

The final content integration approach for both Phase 1 and Phase 2 was determined during the technical discovery and during the content audit process of UX.

screencapture-theochocolate-2022-05-13-09_24_56