LaBelleBrune
Responsive Web Redesign
Enhancing a business website
Redesign and optimize the existing website for LaBelleBrune, a local coffee shop business located in Carmes, Toulouse, France. The business specializes in cultivating a wide variety of creative warm and cold drinks. In addition, to drink cultivation, they offer an array of homemade dishes such as healthy breakfast & brunch, lunch, and pastries that are meat based and vegetarian.
Target Users
Understanding the problem
1
The absence of information on LaBelleBrune's website creates confusion for users during their initial visit.
Users struggle to find essential information, including the Cafe’s core values, resources, specialties, location, hours, and take-out services.
The website presents a challenging and inefficient user experience, blocking and boosting in-person customer traffic.
2
The outdated design and underperforming user experience of the website were major deterrents for customers, leading them to avoid interacting with the site and finding information.
Approaching the Solution
Recreating the Landing Page
Through a user-centric approach, the new landing page focuses on intuitive navigation, reducing the time and effort users previously spent searching for information.
Providing instant access to crucial details like a clear map, business hours, and location, improving transparency.
Introducing the team and highlighting specialties builds trust and personalization. A strategically placed (CTA) streamlines navigation, enabling users to quickly access the menu, enhancing overall user experience.
Adding a Contact Page
The inclusion of a dedicated "Contact" section directly addresses user pain points by providing a streamlined and easily accessible means for users to connect with the business.
Users no longer need to search extensively for contact information, reducing frustration and enhancing the overall user experience. The "Contact" section serves as a one-stop destination for users seeking communication channels, contributing to improved user satisfaction and engagement
How did I reach the solutions?
Research Objectives:
-
Understand the user's preferences when exploring a coffee shop's website.
-
Evaluate how user-friendly the website is and how easily menus and pricing information can be found.
-
Examine the clarity of content and communication on the website.
-
Identify the factors that impact a user's decision when browsing a coffee shop's website.
Research Methods:
-
Primary Research ( User interview)
-
Secondary Research
-
Competitor Analysis
Let's Audit the Website Together!
The interview questions were based on usability heuristic principles, allowing me to gather valuable feedback and insights into each participant's experience. I decided to focus primarily on the most frequently visited pages of the website to pinpoint major issues.
Findings
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.
Additionally, I inquired about users' feelings towards the design and any encountered issues through open-ended questions.
In summary, the interviews highlighted consistent challenges in
-
website navigation,
-
content organization
-
contact information access.
Interviewees shared a desire for visual elements and a more engaging layout to better reflect the coffee shop's essence. Including the change of color palette, icon sizes, text, spacing, and alignment.
Competitor Analysis
Growth opportunities include Improvement in communication with clients, Clarity in showcasing brand identity and matching it across their digital platforms, and Improvement in design choices, organizing the content that helps represent the brand consistency. by leveraging these opportunities, LaBelleBrune is dedicated to elevating its service to provide a cozy, trendy, and delectable homemade food experience for its local patrons.
Who are my users?
After reviewing the gathered information, I created a user persona to serve as a guiding reference for the remainder of my project. This approach assists me in considering the actual needs of users, preventing my personal preferences from influencing the design decisions I make.
Things to consider
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
Sitemap
Creating a sitemap was crucial to understanding the webpage structure and improving the information architecture. The initial website lacked a clear visual hierarchy, leading to user confusion. Although the internal XML structure was well-established, it wasn't effectively translated into the external design. A redesigned sitemap was proposed to address these issues.
How does it work for the user?
Correcting the user flows was essential for this project as it significantly impacted the website's usability. Defects in the user flow and task sequences greatly influenced customer visits to the website. Given that the business's part revenue was generated from visiting the website to utilize the menu, considerable emphasis was placed on enhancing the efficiency of the main flow: Understanding the narrative, finding a product of interest, and contacting the business.
Sarah has difficulty accessing essential information when visiting the LaBelleBrune Website, This path defines the steps she needs to take to reach her goals.
Developing the Idea
Once I felt confident that I had gathered enough data to start designing solutions, I began sketching out various ideas for the pages included in the previously mentioned flows. Given the goal of creating a responsive website, I also designed mobile wireframes for key pages.
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
Ability to get to the drink menu on the main page
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, implemented a comprehensive "Map". This interactive map serves as a visual guide, offering users a clear overview of the loca
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.
Branding & Visual Identity
As the platform is set to encompass a diverse range of people, events, and groups, I aimed for an energetic, neutral, yet fun design with a touch of a welcoming, approachable tone this blend is prominently exhibited through the choice of the typeface in the logo and the accent color in the palette.
Color Palette
Typography
Iconography
Usability Testing
All five out of five participants completed both tasks successfully claiming the clarity of the process. I identified a few pain points and promptly addressed the issues.
Based on this feedback, I implemented the suggested changes to enhance clarity and user-friendliness in the star rating review feedback feature in High-Fidelity Mockups.
Here, I highlighted the major comments that were taken into account and acted upon:
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.
Prototype & Desgin
"I would choose not to visit this place due to the unclear presentation of their services. I find it challenging to comprehend what they offer, and I'm uncertain about where to find the menu."
Desktop View - Landing page
Mobile View - Landing page
"I wish to get in touch with the Coffee Shop, but there isn't a straightforward method to initiate contact."
Desktop View - Menu & Contact page
Mobile View - Menu & Contact page
Additional Screens
✨ Re-design impact ✨
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.
-
Overall positive experience using the website with clear navigation, information organization, clarity on the products and services, improved UI components, warm tone, and elevated palette matching with the store’s atmosphere.
-
Fixing the typo, alignment, and spacing on the desktop.
-
Incorporating a confirmation message after submitting a request to the business for reassurance that the request has been received.
-
Adding a subject line to the contact page’s form-filling
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.
Final Thoughts
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.
Did I encounter any challenges during the process of creating this project?
Reaching out to the business and persuading them about the necessity of redesigning their website.
Next Steps...
After updating the "Landing page," "Menu," and adding a "Contact page" in the MVP, the next step involves introducing extra features like enabling a "Newsletter" for a more personalized user experience
Read more case studies
