Overview
Design case study for Theo Chocolate to use their website to help improve and streamline orders for their custom Celebration Bars.
Timeline: December 2022 (2 weeks)
Team: Designer x 1
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 larger purchases of their product for commemoration of events such as weddings, baby showers, and corporate milestones. One of these products is their 1oz chocolate bars wrapped in a personalized label, called Celebration Bars.
Problem
As of December 2022, all communication, inquiries, and purchases for Celebration Bars are conducted through email. Theo Chocolate also details product and ordering information about Celebration Bars in a PDF weblink on their website.
Due to the limited information and unpredictability of email communications, the process to purchase Celebration Bars becomes both complex and time-consuming. In an age where customers can quickly find other gifting options or DIY efforts, this complexity can lead to lost business opportunities for the chocolate maker.
As Theo Chocolate expands its brand and market, streamlining and simplifying the purchase process for Celebration Bars can improve customer awareness of what the product offers and help increase purchases.
Narrowing Down The Problem
To determine what pain-points could streamline purchases of Celebration Bars, I tested the selection process with 5 participants. Using a hypothetical party planning scenario, I asked each participant to follow the PDF instructions to select and personalize a Celebration Bar label. Throughout the study, I asked participants to walk me through their thinking and provide a reflection on their thoughts about the current selection process.
Key findings that were identified included:
- Participants found the sample templates helpful with selecting colors and a personalized message for their label.
- Participants relied on personal preferences and instinct to influence their template and color selections.
- Participants found it challenging in visualizing potential color combinations for multi-colored labels, especially when asked to select colors that differed from sample color choices.
Number of Color Customizations per Label Type (December 2022)
Although customers can choose from 15 Celebration Bar labels, having 38 colors to choose from sharply increases the number of available choices. This representation below showcases just how many color customizations are available for each label type, 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 what the product is about
Participants found that seeing the example labels in the PDF to be influential to which color combinations and personalized message they decided on. One participant commented in their reflection that seeing the label on a chocolate bar would of quickened their label selection process.
Too many options is counterintuitive
The abundance of options hindered participants in selecting customizations of their label. This struggle was more apparent with colors, particularly with the 3-color and 4-color label templates. In this case, less options will provide customers with a more positive experience customizing their Celebration Bars.
Ideation
Exploring alternative options to the current selection and inquiry process, I used crazy 8’s to come up with potential ways that Theo Chocolate could streamline the purchases of Celebration Bars. My criteria for design ideas included that the solution should be able to integrate into Theo Chocolate’s Website, and that it improves how customers visualize and select Celebration Bar customizations. With those constraints, I narrowed my design ideas down to these 4 options:
Taking the design insights, target user demographic of the Celebration Bars (party planners), and the Website’s technical constraints all into consideration, Option 3 (Creating Color Themes) was the most aligned to effectively alleviate current pain points and streamline the label and color selection process.
Prototyping the Information & Content
Using Theo Chocolate’s website design and online purchase process, I began prototyping pages and user flow of adding a Custom Celebration Bar to Cart for Checkout to ensure ordering Celebration Bars could seamlessly integrate in an online experience.
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:
- Flavor
- Color (if customizable)
- Text
- Logo (if template allows for logo)
Updating Prototype Fidelity
To further visualize the user flow on the Website, I used Figma to translate my low-fi prototype information using visuals, branding, CSS components, and product customizability options that were already available on the Theo Chocolate Website and other BigCommerce solutions.
Gallery View
To improve visual understanding of what Celebration Bars would look like upon purchase, labels were mocked up as 1oz chocolate bars within the product image. Labels that accommodate logos were also made identifiable directly on 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 for each label. 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.
Emphasizing the importance of visual indicators in customizing the Celebration Bar, customization options (excluding selecting a personal message and/or logo) were represented visually within user selection.
For labels that accommodate logos, users only encounter the upload option if considering adding a logo. To reinforce file type requirements, it is directly stated that only .eps file types are allowed for upload.
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 customer checkouts and places the order, they then continue through the user flow of confirming the design and desired number of Celebration Bars to purchase.
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 tested with the Designer(s) to ensure that this change will not drastically affect the current process of producing mockups for customers purchasing 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 Celebration Bars market audience is and the large effort 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.
