Le Concilabule
Revamp the website for a Toronto-based French bakery to enhance user flexibility and update the UI for a seamless online experience, enabling customers to effortlessly adjust pickup locations and times before checkout, overcoming current operational limitations.
Website Redesign & UX Research Project
2024
Overview
Le Concilabule is a French bakery in Toronto, owned and managed by a creative husband-and-wife team. They operate two locations: Bisou in Cabbagetown where all baking occurs, and Conci in Little India where items are delivered each morning.
Current
Challenges
-
Customers frequently select the pickup location at Bisou when placing online orders but then mistakenly arrive at Conci, expecting their order to be ready.
-
Due to limited inventory and a small team, once items are sold out at a location, they cannot be restocked for the day. Which means that those orders cannot be fulfilled.
-
Customers become confused and disappointed which impact business reputation and customer satisfaction goals significantly.
-
The current website's rigid user journey requires users to select their pickup location before shopping, with no easy way to change locations without starting a new order basket, leading to frustration and potential order abandonment.
Goal
​​​
Enhance Flexibility.
Allow for easier modification of pickup locations without requiring users to start a new order basket, thus reducing frustration and potential order abandonment.
​​
Improve Location Clarity.
Ensure that users are clearly informed about the two separate pickup locations (Bisou and Conci) from the outset of their shopping journey.​
​​​
Refresh UI Elements.
Mirror the intuitive experience customers would encounter in-person at the café.
Discovery: Current State Analysis, Usability Tests, User Persona
Current State Analysis
Above: Screen recording of the current Le Concilabule website.
After conducting a thorough current state analysis, which included usability tests on the current website to understand user perspectives, several opportunities for improvement have been identified:
​
-
Enhance the information architecture to encourage users to explore the website more extensively.
-
Increase the size of UI elements, such as buttons, to improve user interaction.
-
Include images of both locations on the homepage.
-
Ensure that the contact button directs users to a web form.
-
Standardize the format of product photos for consistency.
-
Improve flexibility and usability for online shopping.
​
These improvements aim to enhance engagement, facilitate online transactions, and boost event attendance. Optimizing the online shop is crucial for increasing sales without being critical of the current setup.
User Requirements
Based on the initial usability test conducted on the current website and user interviews, we have identified core user requirements that will guide the website redesign prototype. These requirements reflect insights gathered directly from user interactions and feedback, ensuring that the redesign addresses real user needs effectively.
User Persona
The user personas are crafted from a diverse range of the cafe's customers, including young adults socializing, professionals working remotely, families dining together, and elderly patrons enjoying coffee and lunch. These personas accurately represent the cafe's varied customer base.
Laura
University Student​
Laura, a resident of Cabbagetown, has heard great things about Bisou as a cozy cafe perfect for studying. She's eager to try all the pastries offered, but finds it challenging because the cafe is often busy, making it difficult to inquire about each pastry individually. Turning to the cafe's website for more information, she's frustrated by the lack of detailed product descriptions, which prevents her from fully understanding her options.
22 Years Old
11 visits in 6 months
Michael
Canadian Poet
​
Michael is one of the cafe's regulars, visiting 3 days a week for his usual double shot latte and ham & cheese croissant. Recently, he has been visiting less frequently because he finds it challenging to stand in long lines at the cafe. He has expressed interest in placing his order online but encounters difficulties navigating the website and completing his order.
78 Years Old
72 visits in 6 months
User Journey
The following diagram depicts the current user journey for online order placements. It highlights areas where the current flow can be enhanced for better user experience.
​
Currently, users must navigate through 11 clicks to access the online store. Furthermore, they need to click the "order online" button 4 times before they can explore the cafe's offerings, which can lead to click fatigue and user frustration.
​
Additionally, the inability to change the pickup location after items are added to the cart increases user frustration and significantly raises the risk of cart abandonment.
The Redesign: Design, Testing, Iteration
Optimized User Journey
To mitigate user fatigue and confusion and increase completed online orders, I have streamlined the user journey. Users now have immediate access to the online store, and I've introduced the option to change their pickup location before reaching the payment page.
The optimized user journey is depicted in the diagram below.
Paper Prototype
The purpose of creating the paper prototype is to refine the most intuitive user flow and identify essential information for each page. My focus at this stage is on sequencing and content. Below, you'll find the paper prototype screens along with annotations, which represent responses from users based on usability tests conducted.
Homepage
Prioritize location instead
of Special Events on the
Homepage.
Location
Location Details
Pickup Time & Location Page
Automatically set the pickup time to the products' earliest availability.
Selecting pickup time should be done before checkout considering some items are only available for pickup after 11 AM and or require 72 hours in advance.
Product Page
Make sure the product description is informative, photos follow consistent format and categorize items accordingly.
Select Pickup Location - Screen 4
Low Fidelity Prototype
Now that the user requirements are understood, the focus shifts to designing a low-fidelity prototype. The aim is to test whether an additional screen confirming the pickup location before shopping is necessary. An A/B test was conducted to evaluate the necessity of this screen and its potential impact on user experience.
68% prefers version B over A
32% of them prefer to have the option to change pick up location before checkout.
Select Pickup Location - Screen 4
For The Next Iteration
The A/B testing provided valuable insights into enhancing user experience. Participants expressed interest in an additional screen that confirms their selected pickup location. While there is a screen that prompts users to select their pickup location before shopping, many selected the wrong one because they were too focused on their cart contents. They only addressed this later when reviewing their orders. These findings will be incorporated into the high-fidelity prototype.
​​​
Flexibility of Use
Allow users to adjust pickup location throughout shopping and at the order summary page.
​​​
Automatic Cart Update
Due to operational & logistics constraints, items that are not available at the new pickup location will be greyed out and automatically removed from their cart.
​​​
Error Prevention
Users can easily undo their decision and have everything restored back to their shopping cart by clicking the revert button.
The Final Results
Above: Screen recording of the final prototype. Stock images used to illustrate recommended visuals for enhancing website engagement.
Updated IA, UI & Flow
After integrating all changes into the final prototype, updated UI elements accurately depict the website's envisioned look, presenting cohesive and compelling visuals. Maintaining consistent branding, the designer expanded the color palette with hues that complement the brand's primary colors. Additionally, a new font was introduced for headers to enhance visual hierarchy and readability, ensuring a seamless user experience.
Before & After
Below are before and after comparisons of the key screens outlined in the user journey. These screens were designed using Adobe XD and incorporate stock images that illustrate the types of visuals recommended for highlighting the client's products and services.
Above: Original homepage.
Right: Redesigned homepage.
To avoid confusion regarding the locations, the decision was made to place information about each location below the hero image. Additionally, photos depicting both Conci's and Bisou's exterior and interior have been included to clearly differentiate between the two locations.
Above: Location section on homepage
Below: Pickup location confirmation page.
Right: Redesigned pickup location confirmation page before shopping.
In the original user journey, clicking 'order now' from the top navigation directs users to the location section, anchored on the homepage. Here, they select their pickup location before proceeding to the screen on the bottom left to confirm it once more, prior to shopping.
​
The redesigned screen above consolidates these two left-hand screens, streamlining the user journey for enhanced intuitiveness.
Above: Current shop page.
Right: Redesigned shop page.
Above: Current product page.
Right: Redesigned product page.
The redesigned product page offers a more streamlined experience compared to the current version, featuring consistent image formatting and enhanced product descriptions. When users click on a product, a pop-up will display a cross-section view along with detailed food descriptions and ingredients, aiding users in identifying potential allergens.
​
These descriptions provide users with key information typically sought from staff, including insights into bestsellers, products containing common allergens, and details about pastries.
As previously noted, users have expressed a desire to change their pickup location before making payment, which is not currently an option. This functionality has been introduced in the final prototype. To maintain operational efficiency and account for logistical considerations, the cart will automatically update if a user changes their pickup location and a specific item is unavailable at the new location. Users have the option to click 'revert' to retain all items in their cart for pickup at the original location, ensuring a seamless experience.
Above: Current order review page.
Above: Redesigned order summary page
Above: Redesigned time, date & location picker.
Above: Response message when users change pickup location.
Above: Automatically updated cart.
Conclusion & Reflection
Ultimately, this UX case study highlights the specific challenges encountered by small businesses entering the online sales market, especially within the artisanal products niche. Operational constraints have influenced certain usability features, such as the inability to change pickup locations once items are added to the cart. While this decision prioritizes business continuity and customer satisfaction, it also impacts the overall shopping experience.
​
Looking ahead, the project will focus on refining the website design further. Plans include the creation of dedicated pages for special events and seasonal menus, aimed at enhancing user engagement and meeting evolving customer demands. By continually iterating on the design and incorporating user feedback, our goal is to deliver a more enjoyable and seamless online shopping experience while upholding the business's operational integrity.
Stay tuned for updates on our progress!"