TL;DR (Summary): I was asked to investigate, via a quick and iterative design deep-dive, potential web solutions to improve the experience for Sucré customers looking to purchase customized Sucré products, which currently puts a large strain on their customer service team. Research and discovery centered around uncovering and (in)validating the source of the customization need. Ideation and Design explored potential solutions and the overall interaction design of a feature that would allow eCommerce customers to build their own macaron box in a fun and delightful way.
Read overview below or view entire Case Study Here >
- Reduce strain on in-store associates and customer service team by bringing elements of the custom order process online
- Increase eCommerce revenue by adding additional products and/or purchasing options
- Create a more seamless experience between their website and stores, from functionality to brand look and feel
- Ensure web experience is responsive across platforms (in its design and its functionality)
Challenge | Uncover a consumer-facing solution that leverages Sucré’s website to reduce the strain on Sucré’s customer service team while addressing user’s needs for customization.
Client | Sucré Confections
Role | Lead Designer: Design Researcher, IxDesigner, Visual Designer
Duration | 2 weeks
Process + Tools | See more about my process as a designer >
- Pen and Paper
Build your own custom macaron box!
What is Sucré and why is it important?
Sucré is a nationally-renowned artisan dessert and confection boutique with locations in New Orleans and an eCommerce site that ships nationally. Offering a range of sweet, haute confectionary treats like gelato, petit fours, chocolates, macarons and cakes, its products routinely top foodie lists in publications like Food and Wine and Bon Appetit, making it a must-see destination in New Orleans.
The brand has multiple consumer touch points to consider - across the brick and mortar and the digital space - when examining the full scope of the user journey.
The Context + Problem
Only 9 years old, Sucré has grown exponentially year-over-year, while its core team remains small and nimble. The customer service department in particular has felt the growing pains most of all.
Impeccable customer service is the keystone of the Sucré experience, but it’s become an increasingly difficult promise to deliver on as their outdated website often creates more problems than it solves.
Frustrated customers, unable to fulfill their requests for customization online flood Sucré’s phone lines.
With a larger site redesign scheduled for 2018, Sucré asked me to identify potential solutions that can be implemented at that time to help customers who are looking for a more custom experience. They also wanted to take this time to think about what an updated web design might look and feel like, so this was ultimately baked into the solution as well where relevant.
Research and Discovery
Getting to Know the Problem
The founder’s use of customer “customization” felt rather broad and nebulous to me. What exactly did their customers want to customize? Who was that customer? Were the employees seeing this need on the front lines? To answer these questions and many more, I set out on my quest.
- (in)validate “customization” pain point from customer and employee perspective
- understand customer and team member motivations, frustrations, and ultimate goals by way of more immediate needs
- observe and understand the in-store service design and experience; look for ways to bring the experience online
Through a mix of research techniques and guided by customer and team member proto-personas, I plunged in, conducting a current site audit for glaring usability errors, leading contextual inquiries and spending an entire day at the store’s flagship location interviewing team members and customers alike. (Such a hard life, but someone’s got to do it).
After days of observation, interviewing, and contextual inquiry, the problem came into sharp focus. Watching dozens of customers point to glistening rows of macarons as associates filled up the box with the customer's favorite flavors, hearing the manager of customer service groan as she fulfilled box after box of only this-or-that-kind of macarons over the phone for her eCommerce customers. These observations were just a taste of the overwhelming and unmet need for custom macaron orders, something that is the focal point of the in-store experience, yet presently impossible to do online.
This was a huge point of tension, and thus the focus of my design process.
Synthesizing + Defining the Problem
Through my research, I synthesized my findings using an empathy map and storyboards and created two distinct personas. Their ultimate end goals focused on macaron customization, but their needs differed drastically.
Natalie, the primary persona, needs to customize a box of macarons with her favorite flavors online quickly and easily. She’s an out of state customer who stumbled into Sucré on her last visit to New Orleans and needs to get her macaron fix to transport her back to that state of indulgence and relaxation.
Maggie, the secondary persona, needs an entire custom macaron display for her friend’s wedding. She’s a local customer and Sucré advocate, but has never needed this before, so isn’t quite sure what’s possible, and where she should start.
Designing for the Primary (with the Secondary in Mind)
While two personas were identified, I chose Natalie as the focus of my design solution because her needs (if met) would do more for Sucré - increased eCommerce revenue with additional product offering and a decreased strain on CX team who would no longer have to fulfill this mindless and time-consuming task over the phone.
What’s more, my interview revealed that not only do Sucré associates not mind fulfilling Maggie’s need, they like it! I didn’t want to wrestle their joy away, especially when this user was much less active than it’s eCommerce counterpart.
Even so, I knew there were ways to easily improve Maggie’s experience by being more thoughtful about this user by using the on the website to aid her research in its early stages.
So off I went, designing for the primary user, but always keeping the secondary user in mind.
Reframing the Problem
To guide my brainstorming and feature prioritization, I went through a rapid whiteboarding session, until a set of prioritized features came out the other side.
Solving the Problem
I developed integral interaction design artifacts so that I could better understand the overall flow of this solution and its place in a reimagined site design.
A huge pain point during my current site audit and contextual inquiries was the site's architecture, specifically its nav bar elements. I was able to streamline the site's main nav elements from 9 categories to 6 by conducting a closed card sort to validate assumptions from the contextual inquiry phase, and also reflect where and how the 2 new elements would plug in: the "build-your-own" box page for our primary user and the Special orders category with resources for our secondary user.
Task Flow + User Happy Path
Because this design process was centered around creating an entirely new feature on an entirely new site, I developed a user task flow to better understand screens and interactions to be designed for.
The task I set out to design and validate was the creation of a custom 8-piece box of macarons
Interaction Design: From Paper to Prototype
I selected 4 key screens integral to the user’s task of building a custom macaron box: homepage, macaron gallery page (which I should say, was a very frequent “pattern” of macaron makers), “build-your-own” macaron box page (the main interface of the solution), and the cart page. Because the site needed to be responsive, both the mobile and desktop prototypes were built out for testing.
Design Validation: Usability Testing
In order to validate my solution, I conducted 8 in-person usability tests for both platforms. Due to the stage in design and specificity of task, the prototype had limited functionality (clickable links, buttons, and available pages). Though inactive, these perceived functional elements were still central to certain tasks where the user is asked to describe navigation or information expectations.
Task: Review Sucré macarons before deciding to build your own custom box of 8 macarons.
Areas of Interest:
- Where do they start their journey? What pages do they try to explore?
- How do they arrive at the BYO page?
- Do they edit the box size first or begin by adding macarons?
- Where are the points of friction? Of delight?
Testing revealed that overall, creating a custom box was a delightful experience, with most user’s vocalizing delight in “oohs” and “ahs.” This was a huge win, because the same feelings of delight are integral to the in-store experience.
The largest point of friction centered around improving the information hierarchy on the “Build-Your-Own” page, providing clearer and more explicit instructions on how the page worked.
Sucré’s overall brand has not been updated since its founding in 2007. Because the focus of this process was on the interaction design of a new feature, the time allotted to visual design had to be efficient. Rather than get too bogged down in a major brand refresh, I demonstrated brand updates in elements relevant to the user flow to demonstrate what this feature would look like in its final form, but also what an updated site design might manifest as. I drew inspiration from Sucré's existing product photography.
Sucré’s primary font “Century Gothic” is not the most legible and readible font, so I decided to use it sparingly - as a page title and for the macaron names. Avenir in various weights and sizes was then used throughout the design, to echo the design aesthetic of Century Gothic, while being more web-friendly. Colors were saturated and brightened to communicate a more modern brand, and used sparingly to keep the focus on the product images.
Final Hi-Fidelity Frames
Based on initial feedback and findings, this feature has the potential to have a strong positive impact both on the online user and the Sucré team. The solution is a delightful experience that feels and behaves much more closely to the in-store experience of trying, sampling, and having a customized moment that goes beyond just the food.
Next Steps + Considerations
Since great design means never really being finished, it was important for me to hand over my solution with some actionable next steps.
Improve the secondary user’s experience
This final design demonstrated multiple design elements in the primary user’s journey that serve to meet the secondary user’s needs: “Previous Flavors” in the macaron gallery to demonstrate other color and flavor options, call-outs to “Learn more about Special Orders” at key decision points should they realize they’re not finding what they’re looking for. They’ll now need to determine how the website and relevant content can help her early on in her discovery phase, even before she sets foot in store or comes in for a consultation.
Analyze site behavior and product performance
this feature will ultimately be validated by the user’s eagerness to engage and purchase. It will be important for the Sucré team to monitor online activity and sales.
Find the right balance
Ultimately, Sucré will need to understand what role this product should play in its online store based on these findings. Whether it remains a primary call to action, or assumes a smaller role.
Examine product's operational impact
reviewing sales performance of this new offering is only half of the story. Sucré will need to look critically at how this feature impacts its own team Does it reduce call volumes like we assume it will? Are we robbing Peter to pay Paul and will this pain merely be transferred to another department?
Hungry for more? Check out my full case study here!