La Esquinita
Mexican autentic food grocery e-commerce redesign
@La Esquinita - Paris, France
The problem:
How might we enhance the online shopping experience of 'La Esquinita' to make authentic Mexican food products more accessible and desirable, thereby meeting the owner's ambitious sales goals and providing a seamless, engaging, and informative journey for both Mexican expatriates and French food enthusiasts alike?
THE PROJECT
-
The product: the project's product is a responsive and highly functional e-commerce website prototype for "La Esquinita," designed to provide an optimized user experience, promote accessibility to authentic Mexican food products, and support ambitious business goals through an elegant interface and intuitive navigation.
-
The target persona: mexican expatriates and french food enthusiasts.
-
The contexte:
-
"La Esquinita," an online Mexican grocery store, responds to the COVID-19 pandemic by recognizing the need to enhance its online presence to meet its ambitious business goals of tripling e-commerce sales by 2023. By redesigning its website, the company aims to create a smoother shopping experience, attract new customers, particularly in France, and adhere to the principles of design thinking to deliver an improved prototype. This strategic project aims to boost company growth, increase customer satisfaction, and expand its reach in the e-commerce market.
-
-
The client needs:
-
Increase sales.
-
Improve user experience.
-
Highlight product authenticity.
-
Optimize site navigation and presentation.
-
Strengthen online presence and contextual content.
-
Implement a loyalty program.
-
Harmonize product visuals.
-
-
The goals: the overall objective of the project is to create hi-fi mockups and a responsive prototype for the "La Esquinita" e-commerce site, aiming to significantly enhance the user experience, increase sales, and more effectively communicate the authenticity of Mexican products, meeting both customer needs and owner expectations.
THE APPROACH
-
Needs and Expectations Analysis
-
User Empathy
-
Problem Definition
-
Ideation
-
Prototyping
-
Usability Testing
-
Design System and Visual Identity Development
-
Responsive Design
-
Final Validation and Iterations
-
The Conclusion & The Next steps
THE PROJECT SETUP
-
Project duration: 1 month, Nov 2022
-
Team: 3 UX/UI Designer
-
Tools: Figma, Figma, Trello, Notion, Slack, Pen & Paper
-
Deliverables: Prototype: hi-fi wireframes prototype, desktop format.
-
My role: UX/UI Designer
RESEARCH
The research strategy
The research strategy for the UX/UI redesign project of "La Esquinita" revolves around a methodical and multi-layered approach aimed at deeply understanding the users, the market, and the specific challenges with the current interface and user experience of the e-commerce website.
The Goal: This research strategy aims to provide a holistic and data-driven understanding of user needs, business context, and technical challenges, thereby effectively guiding the design and innovation process for the redesign of "La Esquinita" e-commerce website.
SECONDARY RESEARCH
(E-commerce competitors analysis)
The Goal: to gather existing information and data related to the project's subject matter, such as market trends or competitor analysis, to inform subsequent steps.
-
The Context: we started brainstorming using the CSD method (Certainties-Suspicions-Doubts) based on intuition. Then, we conducted Secondary Research, focusing on e-commerce competitors in France through desk research.
-
The Founds:
-
Many Mexican grocery stores lack e-commerce, even in urban areas like Paris.
-
The Mexican grocery segment is still emerging, offering opportunities for market growth.
-
Direct competitors' e-shop interfaces and AI could be improved compared to indirect competitors like Italian and Japanese groceries.
-
The Conclusion : "La Esquinita" maintains a strong market position with limited Parisian e-commerce competition, competitive pricing, and a diverse product range including niche items like nopales. Our refined Certainties-Suspicions-Doubts (CSD) framework, informed by insights from secondary research, confirms hypotheses and guides strategic decision-making for further success.
PRIMARY RESEARCH
The Goal: to directly collect new and specific information from stakeholders, customers, or target audiences through interviews, surveys, or observations to gain deeper insights into their needs, preferences, or behaviors.
(Affinity Diagram)
-
The Methodology :
-
Stakeholder Interviews.
-
User Interviews.
-
Affinity Diagram.
-
-
Stakeholder Interview Insight:
-
Stakeholder aims to target French customers for increased sales.
-
Desired website traits: Original, authentic, colorful, elegant, and user-friendly.
-
-
Customer Interview Insights:
-
Quality is the top criterion for purchases.
-
Monthly spending on exotic products ranges from 20 to 50 euros on average.
-
Majority has been buying Mexican groceries for over 5 years.
-
Key features for successful purchase experience: Availability status, favorites, loyalty program, and bestsellers.
-
General Pain Points:
-
Authentic Mexican products not easily accessible, leading to infrequent consumption.
-
Mainstream Mexican products in supermarkets lack quality and authenticity.
-
70% of users were dissatisfied with their online shopping experience due to site navigation difficulties and amateur design.
COSTUMER PERSONA
(Persona)
Based on our research, we developed a Customer Persona aligned with:
-
The goals, needs, motivations, and frustrations of interviewed users.
-
The owner's confirmed objectives, such as targeting a young French clientele.
Customer Persona: Meet Elisa, a creative urban Foodie and Plants Enthusiast in her early '30s from Paris. She finds it challenging to source high-quality Mexican products locally, leading her to cook less frequently. Elisa seeks a Click & Collect option to accommodate her busy schedule and regularly looks for inspiration for new exotic recipes. Her aim is to impress her friends with unique dinners and find a go-to e-shop for authentic Mexican ingredients.
HEURISTIC EVALUATION
The Goal: to systematically assess the usability of a product or system based on established heuristic principles, aiming to identify usability issues and areas for improvement.
-
Methodology:
-
Conducted Heuristic evaluation using Nielsen's 10 principles.
-
Identified interface usability problems and violations.
-
Assigned Severity ratings and provided design advice.
-
-
Results:
-
Discovered issues with 7 out of 10 principles.
-
Major issues: consistency, system status visibility, real-world match.
-
Sitemap recreation revealed inconsistencies in product classification and main menu.
-
The Conclusion: our analysis revealed significant usability problems within the current website interface. Specifically, we identified issues related to product classification and the main menu structure, which could hinder user navigation and experience. However, by implementing the recommended solutions, we anticipate a notable improvement in overall usability and user satisfaction. These adjustments aim to address the identified issues and enhance the website's effectiveness in meeting user needs and expectations.
DATA ANALYSIS
The Goal: to extract meaningful insights from the gathered data, such as identifying patterns or trends in user behavior, to inform decision-making and improve the user experience.
The Conclusion : the analysis revealed that to achieve an improved user experience and drive sales growth, "La Esquinita" must focus on improving the accessibility and visibility of authentic products, enhancing the shopping experience with personalized features and a loyalty program, and addressing the usability issues identified by the heuristic evaluation. The redesign must also take into account the owner's specific expectations to attract a broader clientele and reflect the brand's authenticity. By addressing these pain points, the renovated site will be able to offer an optimal user experience, foster customer engagement, and support the owner's ambitious business goals.
GENERAL PAIN POINTS
-
Accessibility and Visibility of Products: difficulty in finding and navigating among authentic Mexican products due to unintuitive menu structure and product classification.
-
Online Shopping Experience: unsatisfactory user experience characterized by outdated user interface, lack of interactivity, and absence of personalization.
-
Lack of Loyalty: absence of an engaging loyalty program and customization features, reducing customer engagement and retention.
-
Usability Issues: violation of several Nielsen heuristic principles, particularly in terms of consistency and standards, system status visibility, and correspondence between the system and the real world.
-
Value Communication: inefficiency in communicating the authenticity and quality of products, essential for differentiation from competitors.
CONCLUSION & RECOMMENDATIONS
-
Improve Product Navigation and Classification: review site structure to facilitate product discovery and enhance navigation experience.
-
Revamp User Interface: update site design to make it more modern, interactive, and responsive, in line with current consumer expectations.
-
Implement Loyalty Program: create an engaging loyalty program offering personalized rewards and benefits to encourage repeat purchases.
-
Address Usability Issues: specifically address issues identified during heuristic evaluation to improve overall user experience.
-
Strengthen Brand Communication: use contextual content (e.g., recipes and product stories) to emphasize the authenticity and quality of Mexican products.
The Conclusion : by effectively addressing these general pain points, "La Esquinita" can significantly improve the user experience, increase customer engagement, and achieve its ambitious business goals. Implementing these recommendations will form the foundation for the redesign of the e-commerce site, aligning site features with user needs and strategic business objectives.
PROBLEM STATEMENT
Customer Statement
French foodie GenY needs to find a large, qualitative and desirable Mexican Products Offer because they consider they don’t have access to these kinds of exotic products in the supermarkets around them.
Stakeholder Statement
the website is not meeting the user goals in terms of fluidity of the product search, and languages available which is causing missed sales & failure to reach french customers.
DESIGN
NEW WEBSITE SITE MAP
(Site Map)
WIREFRAME & PROTOTYPE PHASE
(Low-fi wireframe)
(Mid-fi wireframe)
A. LOW-FI WIREFRAMES:
-
Created using paper and pens.
-
Testing: conducted 3 rounds of concept testing with quick tests to collect feedback.
-
Iterations: reduced product quantity and visuals, added icons to improve identification of carousel features.
B. MID-FI WIREFRAMES:
-
Created in Figma with grey and white shades, focusing on main interactions.
-
Testing: conducted 4 rounds of usability tests, gathering feedback and insights to iterate the prototype until users could navigate seamlessly without encountering issues.
-
Iterations: adjusted banner font weight for improved legibility, added additional Instagram posts, and merged information cards for design consistency.
THE LOGO
MOODBOARD & DESIGN SYSTEM
(Design System)
(Moodboard)
-
MOODBOARD: for "La Esquinita's" moodboard, we aim to evoke the warmth, authenticity, and conviviality of Mexican culture while ensuring a modern and elegant user experience. The moodboard will focus on vibrant colors like Mexican Pink, complemented by hues reminiscent of traditional markets. We'll incorporate easy-to-read yet unique typography, high-resolution imagery of authentic Mexican dishes, and subtle patterns inspired by Mexican art. Our goal is to create a welcoming yet sophisticated design that immerses users in the essence of Mexico, enhancing their shopping experience on the site.
-
DESIGN SYSTEM - Key elements include:
-
Design Principles: reflect authenticity, conviviality, and accessibility.
-
Color Palette: inspired by Mexico's visual richness, featuring Mexican Pink and complementary hues.
-
Typography: readable and adaptable font family evoking "La Esquinita's" spirit.
-
UI Components: reusable components for buttons, forms, and product cards.
-
Icons and Graphic Elements: complementing the visual identity with Mexican-inspired elements.
-
Interaction Guidelines: rules for intuitive and enjoyable user experience.
-
Documentation: detailed guidelines for consistency across the site.
-
HIGH-FI WIREFRAMES:
(Hi-fi wireframe)
-
Utilized Figma for high-fidelity wireframes, facilitating real-time collaboration and swift iteration.
-
Emphasized captivating visual design, integrating the defined color palette to embody the essence of "La Esquinita."
-
Developed refined interactions, including subtle animations and smooth transitions, to enhance the user experience and guide navigation seamlessly.
RESPONSIVES PROTOTYPE:
-
Medium to large laptops: 1440 x 1024 pixels.
-
Tablets or smaller laptops in landscape orientation: 1024 x 832 pixels.
WATCH FINAL PROTOTYPE
TEST
-
During the testing phase, we ensure that all user actions and scenarios function correctly before release and development. Testing occurs at each stage of product development, with different techniques employed based on the project's progress:
-
Concept testing: Evaluates ideas early in the process, isolating them from implementation details to gather user feedback.
-
Usability testing: Observes participants as they attempt tasks, identifying usability issues and gauging satisfaction.
-
-
Tests conducted during the project include:
-
Owner website usability testing with 4 classmates.
-
Concept testing of low-fidelity wireframes with 3 customers for quick feedback.
-
Usability testing of mid-fidelity wireframes with 4 customers, revealing significant UX issues.
-
Usability testing of high-fidelity wireframes with 5 customers, highlighting UI concerns.
-
CONCLUSION
The UX/UI redesign project for "La Esquinita" aimed to enhance the online shopping experience of this authentic Mexican food store. Through research, ideation, prototyping, and testing phases, we identified and addressed key user pain points while meeting the owner's ambitious goals. By applying a consistent design system and creating hi-fi wireframes, we crafted an appealing and user-friendly website across various devices. Our user-centric approach ensures that "La Esquinita" stands out in the online Mexican grocery sector while providing an exceptional customer experience.
WHAT'S NEXT ?
-
Front-end and Back-end Development: Convert hi-fi prototypes into a functional website using current web technologies, focusing on clean code, SEO optimization, and accessibility.
-
Content Integration: Populate the site with engaging content, including detailed product descriptions, high-quality images, and relevant articles.
-
Usability Testing: Conduct testing sessions with real users to validate the site's experience, optimizing user journeys and addressing any usability issues.
-
Mobile Optimization: Ensure a smooth user experience on mobile devices, optimizing page loading speed and adapting to current consumption trends.
-
Launch and Marketing: Implement a robust launch strategy, utilizing social media, email marketing, and other digital channels to attract and retain customers.
-
Analysis and Iteration: Use web analytics tools to track user behavior and conversion rates, iterating and improving the site based on data insights.