Theo Chocolate Celebration Bars

Theo Chocolate Celebration Bars

Overview

Design case study for Theo Chocolate to use their website to help improve and streamline orders for their custom Celebration Bars. This is a conceptual idea.

Timeline: December 2022 (2 weeks)

Role: UX Designer, UX Researcher

Skills: Desk Research, User Testing, Heuristic Evaluations, Prototyping (low-fi & high-fi), UX Writing

Background

Headquartered in the Fremont neighborhood in Seattle, Washington, Theo Chocolate is an organic, fair trade certified chocolate maker.

Primarily selling chocolate bars in grocery stores around the area, Theo Chocolate also takes an ecommerce approach with their website to sell gifting options and large purchases of their product for commemoration of events such as weddings, baby showers, and corporate milestones. One of these such offerings is their 1oz celebration bars showcasing a customized label which customers can personalize to their liking.

Problem

The multi-step instructions for how to place an order for Theo Chocolate’s Celebration Bars is only available through a static PDF weblink, and the current processes for communication, inquiries, and orders for this product are all done through email.

In result, navigating the website to be rerouted to email communications becomes challenging to customers searching for quick answers. This can lead to a loss of business opportunities from new customers deciding between other gifting options or DIY efforts.

As Theo Chocolate continues to expand their brand and market, streamlining the selection and inquiry process for their Celebration Bars can help improve both customer awareness and understanding of what the product is and how to successfully place an order for it.

Narrowing Down The Problem

To identify potential consumer habits, I conducted user testing with 5 participants by placing them in a scenario where they were tasked to follow the PDF instructions and select and personalize a Celebration Bar template for a medium to large size wedding. Throughout the study, I had participants walk me through their thinking process during the study and provide a reflection after completing the task.

Key findings that were identified included:

  • Participants found the sample templates helpful in providing inspiration for selecting colors and text.
  • Participants relied on personal preferences and instinct to influence their template and color selections.
  • Visualizing potential color combinations from the PDF was seen as challenging, especially for participants who wanted to select colors that were different from the sample templates.
One of the templates listed in the Celebration Bar PDF

Number of Color Combinations per Template Type (December 2022)

Although customers can choose from 15 Celebration Bar templates, having 38 colors to choose from sharply increases the number of available choices. This representation below showcases just how many different options are available for an individual template based on the number of colors it has, assuming no two colors are repeated.

Pre-set Template

1 option

2-color Template

1406 options

3-color Template

50,616 options

4-color Template

1,771,560 options

Design Insights

Visualization is key to understanding the features of this product
For selecting the template, colors, and message, the visual components played a heavy role in the decision-making process for the design. One participant even took this a step further and indicated they would of liked a preview of what the labels would look like on a chocolate bar.

Too many options is counterintuitive
This was mostly seen within selecting colors, but the abundance of options seemed to actually hinder the participant’s decision-making process. This was especially apparent with participants that were selecting 3 or 4 colors for a template.

Ideation

Exploring alternative options to the current process, I used crazy 8’s to come up with potential ways that Theo Chocolate could better streamline customer selection of Celebration Bars templates. My criteria for design ideas included that the solution should be able to integrate with the Theo Chocolate website, and that it improves how customers can visualize and select their Celebration Bar customizations. Based on those constraints, I narrowed my design ideas down to these 4 options:

  • Option 1: Customizable Color Picker (external SaaS tool): Gives the most control to the customers in visualizing color options for templates. Reduces amount of tasks for Designer, but requires the most time to implement and maintain on Website.
  • Option 2: Reduce Number of Colors to Select: Less control to customers but not as overwhelming in selecting color options. Allows Designer to have more creative oversight in selecting other colors, especially for 3-color and 4-color templates.
  • Option 3: Create Color Themes: Similar to the effect of providing sample templates on the PDF. Group colors swatches together (based on Designer input and/or current trends) to illustrate what kinds of professional looking themes customers can select from.
  • Option 4: Use Adjectives to Describe Template Color Outcomes: The least visual solution, but the easiest to implement through a form. Allows the customer to convey what type of template they want (fun, elegant, stylish, etc.). Grants full creative oversight to the Designer, but would require lots of intuitive interpretation to properly identify each customer’s needs.

Through process of elimination and taking technical constraints of the Website into consideration, going with Option 3 and establishing Color Themes seemed to be the most aligned to visualize potential color options because of its visual component and that it is an easier solution for Theo Chocolate to implement and maintain.

Prototyping the Information & Content

Using the Theo Chocolate website for template inspiration to ensure this content integrates seamlessly, I began prototyping pages and user flow of adding a Custom Celebration Bar to Cart for Checkout.

For object hierarchy I used the label templates in the product gallery view, and pushed the remaining details (Flavor, Colors, Text, & Logo) into the individual product view.

Using the PDF instructions as a guideline, I settled with formatting the user flow of placing an individual order starting with the following:

  1. Flavor
  2. Color (if customizable)
  3. Text
  4. Logo (if template allows for logo)

Updating Prototype Fidelity

To help further visualize the user flow on the Website, I used Figma to translate my low-fi prototype information using the visuals, branding, CSS components, and product customizability options that are currently available on the Theo Chocolate Website.

Gallery View

To improve visual understanding of what the purchased product would look like, templates were reformatted to represent the 1oz chocolate bars that they are placed on within the product image. Templates that can accommodate logos were also visually identified within the product image.

In refining a search using filters, customers can also filter templates based on if they are seasonal or can include a logo.

Product View

Product briefs, images, and descriptions were added on each individual template. Doing this helps provide a more in-depth and personal look into not just the template, but the Theo Chocolate brand itself.

To avoid confusion throughout the ordering process, each step is separated into individual components. Users can progress to the next step after filling out the necessary information first.

For templates that accommodate logos, the requirement for .eps file types is indicated for uploading a logo.

Viewing Template in Cart

To ensure that customers are not charged before the approval of the mockups, adding a template to an order does not incur a financial cost.

Once the order is placed, the customer then continues through the same user flow as before to confirm the design and number of Celebration Bars to purchase with the Designer.

Compatible Across Devices

To make the design responsive, I prototyped the design across different designs to showcase how this solution can be accommodated across screens accordingly.

Future Features & Next Steps

This implementation will need to be confirmed with the Designer(s) to ensure that this change will not drastically affect the current process of producing mockups for customers wanting to purchase Celebration Bars. An observational study to confirm whether customers are selecting the pre-determined color sets or wanting more control over the customizability should also to be conducted to ensure if customer orders increase or decrease with the implementation.

What I Learned

The first idea is not always the best idea.
When I was ideating potential design solutions, my first thought was to go with Option 1 (the customizable color picker SaaS solution) because of its customer-first approach. After taking a step back and looking at all the stakeholders and resources that would have been needed to be involved in implementing and maintaining the design, I realized this idea did not pan out in the long run due to how specific the market audience for Celebration Bars is and the amount of effort that would be needed to develop the solution onto the Website.

Understanding current technical constraints is ESSENTIAL.
In prototyping my design and content, I had to quickly understand what underlying technologies Theo Chocolate was using in their website, and what the design could be capable of doing. Having done my research about the software that the Theo Chocolate Website was running on (BigCommerce), I was able to understand and reference their capabilities into my high-fidelity prototypes.