Pegah Taheri
La Belle Brune
E-commerce Redesign for Coffee & Cuisine
Client:
La Belle brune - Coffee Shop
LaBelleBrune is a local coffee shop located in Carmes, Toulouse, France. Specializing in a wide range of creative hot and cold beverages, LaBelleBrune also offers a menu of homemade dishes, including healthy breakfast, brunch, lunch options, and a variety of pastries. With a focus on quality ingredients and a welcoming atmosphere, LaBelleBrune provides a unique experience for coffee enthusiasts and food lovers alike.
Role
UX Designer
Timeline
80 hours
Tools
Figma, Photoshop, Maze, FigJam, Google Analytic
Skills
User research, Usability testing
Wirer-framing, Prototyping
About
Overview & Context
Problem
LaBelleBrune’s website lacked essential information, confusing first-time visitors. Users struggled to find key details such as the café’s core values, menu offerings, location, hours, and take-out services.
The outdated design and poor user experience made navigation difficult, discouraging engagement and potentially reducing in-person customer traffic.
Outcome
The website was redesigned with a user-centered approach to improve accessibility, navigation, and overall usability.
A clear information hierarchy was established, ensuring essential details were easily discoverable.
The updated design modernized the site’s aesthetic while enhancing functionality, making it intuitive and engaging for visitors. These improvements encouraged user interaction and facilitated a smoother transition from online browsing to in-person visits.
Steps
To Improve La Belle Brune's Service Quality
Recreating the Landing Page
the redesigned landing page focuses on improving user experience by simplifying navigation and reducing the time spent searching for key information.
Immediate access to essential details, such as the map, business hours, and location, enhances transparency and user convenience.
By introducing the team and showcasing the café’s specialties, the redesign builds trust and fosters a personal connection. Additionally, a strategically placed CTA guides users directly to the menu, streamlining their journey and enhancing the overall user experience.
Adding a Contact Page
The addition of a dedicated "Contact" section effectively resolves user pain points by offering a straightforward and easily accessible way to connect with the business.
​
With contact information readily available, users no longer have to waste time searching, reducing frustration and improving the overall user experience.
The "Contact" section acts as a centralized hub for communication, fostering better user engagement and satisfaction.
Audit
Testing the current Website
I analyzed the website's structure, content, and user flows to identify pain points. Interview questions based on usability heuristic principles allowed me to gather valuable feedback.
I focused on the most frequently visited pages to pinpoint major issues, assessing usability, accessibility, and performance. This helped me identify design inconsistencies and user experience barriers, forming the foundation for the redesign.
"I'd avoid visiting due to the unclear presentation of their services and difficulty finding the menu."
"I wish to get in touch with the Coffee Shop, but there isn't a straightforward method to initiate contact."
Audit Result
Key Focus Areas
Usability testing, including success rate, error rate, and average completion time, revealed a Low satisfaction rate of 1.2 out of 7 for the flow.
Competitor Analysis
How others are presenting themselves
Through competitor analysis, I identified several areas where LaBelleBrune can grow. Many competitors succeed by enhancing communication with clients, ensuring a clear and consistent brand identity across digital platforms, and improving design choices to better organize content. By implementing these strategies, LaBelleBrune can elevate its service and create a more cohesive brand presence, offering a cozy, trendy atmosphere with delectable homemade food for its local patrons.
Alignment:
Bridging User Needs and Business Goals
Business Goals
User Goals
Branding Constraints
Feasible Recommendations
Limited development resources
Ensure it’s AA Accessible
Visual appeal
&
increased engagement
Responsive web compatibility
Efficient information access
(About the business, contact, hours, physical location,
& services)
Increase Customer Satisfaction
(measured by usability score, and satisfaction rate)
Technical Consideration
Site Map
Improving the site structure & Information Architecture
The initial website lacked a clear visual hierarchy, causing user confusion.​
​
Although the internal XML structure was well-established, it wasn’t effectively reflected in the external design. A redesigned sitemap was proposed to align the structure with the user experience and resolve these issues.
User Flow and Navigation:
Simplifying user pathway
Optimizing user flows was key to improving website usability and engagement. Since revenue relied on users accessing the menu, refining the flow—understanding the narrative, finding a product, and reaching the business—was prioritized.
​
With a seamless flow, users like Sarah no longer have to second-guess their actions, making the process clear and efficient. This design saves time and builds trust in the service, turning frustration into a positive experience.
Sketching
Setting up the Layout
Menu access
Addressing user pain points and enhancing the user experience by providing quick access to the menu, which is the primary task.
Narrative
A concise introduction providing users with a clearer understanding of what LaBelleBrune entails.
Using Keywords to describe the business
Specialities
Keywords
A concise introduction providing users with a clearer understanding of what LaBelleBrune entails.
Understanding the narrative & how the products are sources & made
Hero/Introduction
By placing a prominent button, users can quickly navigate to the menu without unnecessary clicks, enhancing overall usability and convenience.
Drink Menu Access
Team
To meet user interest in learning more about the business, an "About" section was established. This area aims to introduce the team, fostering a sense of trust and providing users with a better understanding of the business.
HG Menu Access
Revealing a slide-in menu with additional navigation options, and features, allowing for a more streamlined and organized user interface.
Business Hours
Clarity of business hours is addressed on the landing page.
Map
Recognizing the importance of user-friendly navigation, I implemented a comprehensive "Map". This interactive map serves as a visual guide, providing users with a clear overview of the local area and helping them easily locate key destinations.
Contact
Serves as a one-stop destination for users seeking communication channels, contributing to improved user satisfaction and engagement
Footer
enhancing engagement & ensuring accessibility by incorporating key elements like contact details, quick links to important pages, and social media icons.
Contact
The contact page serves as a dedicated hub for users to easily access communication channels, ensuring seamless interaction with the business. By providing clear and convenient ways to get in touch, it enhances user satisfaction, builds trust, and encourages engagement, ultimately improving the overall user experience.
Branding
Designing a Visually Engaging Space
For this case study, I focused on creating a design that appeals to a diverse range of people events, and groups. My goal was to strike a balance between energy, neutrality, and fun, while maintaining a welcoming and approachable tone. This blend is clearly reflected in the logo’s typeface and the accent color used throughout the palette.
Color Palette
Typography
Iconography
Usability Testing
Gathering feedback on the iteration
Before
After
01. "Colors look dull and don't match the atmosphere of the shop"​
​
The refined color palette, typography, and introduction images have significantly enhanced the user experience, creating a cohesive and visually appealing atmosphere.
The updated typography improves readability, while the personalized images contribute to a more engaging and immersive website experience.
02. "First thing I want to see is how to access the menu"
​
A strategically placed Call-to-Action (CTA) streamlines navigation, enabling users to quickly access the menu, enhancing overall user experience.
03. "I would like to know about the team, but the link is broken"
​
Fixing broken links has ensured smooth navigation and access to information. Introducing team members adds a personal touch, building connection and trust, enhancing the overall user experience with an engaging and informative journey.
04. ​"I found the hours of operation by accident, I would like to see it more organized"
​
Simplifying the location and hours information from a cluttered layout to a clear presentation has greatly improved user understanding, reducing confusion and enhancing overall user experience.
Additionally, users can find this information on the footer.
05. Footer Lacking Informations​
​
Users expressed concerns about a lack of consistency, in the footer prompting an adjustment to the page layout.
​
By strategically organizing key elements such as contact details, essential links, and social media icons, now the footer acts as a centralized navigation hub, enhancing user accessibility and engagement.
06. Quick Access​
​
The redesign of the (HG menu) has been instrumental in streamlining navigation and improving user interaction.
The inclusion of essential elements like the home page, menu, and contact options within the new design has enhanced user accessibility.
Usability testing, including success rate, error rate, and average completion time, revealed a high satisfaction rate of 6.8 out of 7 for the flow.
Finalized Product
User pain points addressed
Desktop View - Landing page
Mobile View - Menu & Contact page
Mobile View - Landing page
Mobile View - Menu Contact page
Additional Screens
Services, Team, Gallery
After wrapping up the redesign of the LaBelleBrune website, I decided to treat myself to a cup of coffee at their shop.
It felt great to sit back, enjoy the atmosphere, and witness firsthand how the redesign positively influenced their business.
Reflection
Key Insights
How did this project contributed to my growth as a UX Designer
-
Collaborating with stakeholder: to discern their business model, objectives, and storytelling, and incorporating these elements into my design. This experience taught me how to effectively operate within time constraints and integrate the established brand identity into my designs to maintain product consistency.
​
-
Efficient operation within time constraints: This experience taught me the importance of efficient operation within time constraints and the skill of seamlessly integrating the established brand identity into my designs, ensuring consistent product representation.​
