Katherine Anne Confections:
Bringing local goods nationwide via a redesigned e-commerce experience
Katherine Anne Confections creates micro-batch truffles, caramels, hot chocolate, and marshmallows. It was founded in 2006 in Logan Square, Chicago. At first, it was a brick-and-mortar store and cafe selling locally made truffles and other confections. However, they’ve since expanded into online sales and ship their goods nationwide.
In a 2 week design sprint, I conducted user interviews and competitive research, evaluated Katherine Anne's current website, and developed a redesigned digital shopping experience that enhances conversion rates and usability.
Position
UX Designer & Researcher
Company
Timeline
2 Weeks
Tools
Figma, FigJam, Dovetail, Optimal Workshop
Problem:
Katherine Anne’s existing e-commerce experience is difficult to navigate and doesn't provide necessary purchase details – creating user uncertainty.
How might we make it easier for users to intuitively navigate the website?
How might we make it easier for users to ensure they’re sending a gift that meets their needs?
Solution:
Guided by my user research and evaluations of the existing website, I overhauled the web design to have cleaner flows, more intuitive CTAs, and a more intentional site map. I expect these improvements to improve both top and bottom of funnel conversion, while minimizing drop off rate throughout the experience.
Additionally, I revamped the website’s overall aesthetic and style to enhance its credibility and appeal to potential online customers.
Before & After
How do you shop for (edible) gifts online?
User Interviews
Usability Testing
Competitive Research
With the help of a few screener questions, I arranged user interviews with users who purchase chocolates or sweet treats online. These interviews included inquiries into their gift-giving and treat-buying habits, along with targeted questions about their specific use cases for shops like Katherine Anne.
Additionally, a live user test was conducted on the existing site - participants were asked to select a chocolate truffle for a recipient, add it to their cart, and complete the checkout process. Through the analysis of interview data and usability test metrics, the following target user attributes and key journey phases were identified.
I also conducted a competitive assessment of similar e-commerce websites - including “big box” vendors like Goldbelly, mid-sized confiseries like LA Burdick, and other local Chicago chocolatiers like Vosges-Haut.
How might we make it easier for users to intuitively navigate the website?
Card Sort Analysis
Wireframing
Prototyping
I also introduced global headers and footers to help guide the navigation:
There was a ton of clunky navigation, and users were getting lost
Users had difficulty figuring out how to get started on the homepage - with one user even failing to find the product pages entirely. And there isn’t any global navigation - like a header or footer - to help.
Since testers found the navigation to be confusing, I ran a card sort test to identify how different products were intuitively categorized. Most users agreed on the core confection categories (truffles, caramels, marshmallows, hot chocolate), but diverged when it came to seasonal and gift items (medleys, boxes, kits).
So, since a large portion of the target user base are giftgivers, I intentionally carved out these gift categories to make them easier to locate.
Here is the site map I created on based on the above.
How might we make it easier for users to ensure they’re sending a gift that meets their needs?
Sketching
Wireframing
Prototyping
Multiple testers were frustrated by the lack of upfront information (price, quantity, shipping, etc.)
Especially since the majority of interviewees cared about both cost and tailoring the gift towards their recipient’s needs, these details are important to display earlier in the flow.
Users all sought additional information, including ingredients, packaging, and delivery details. When looking at competitors, both “big box” and similarly sized local shops included these details - so it seems like these are table stakes.
Shipping and presentation are super important when it comes to gifts, and testers were confused about the delivery and gifting options presented.
The incumbent delivery options did not include any specific details such as shipping dates or ETAs - which users cared a ton about, especially when it came to online shopping and sending gifts.
Users were also confused by poorly labeled fields on the checkout page and weren’t sure how to tailor the gift to their preference.
More detailed shipping copy
Tool tips
Ingredients & packaging information available
Shipping policy dropdown
Intuitive photo carousel
Listed prices & quantities
Clear CTA
Clearer, more industry standard copy
Tool tips
So what’s next?
Recommendations
My Recommendations:
Customer Reviews
Existing customer reviews should be gathered to improve website legitimacy and increase user conversion.
Prototype Testing
My high-fidelity prototype should be tested again with real users in order to identify gaps and validate flows.
Product Suggestions
Suggested items should be introduced throughout the flow to help users shop and improve internal linking (SEO).