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
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.
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.
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.
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.
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:
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:
- Color (if customizable)
- 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.
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 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.