Eugenia's General Store
Summary
Project type: Website Redesign
Role: UX/UI design
Industry: E-Commerce (Retail)
Team: Independent Independent project with feedback from mentor and peers
Tools: Figma, Optimal Sort, Photoshop
Timeline: 2 weeks
Background
Eugenia’s General Store, a family-owned business in Manlius, New York, offers a curated selection of unique, high-quality products, including gourmet foods, home goods, apparel, and gifts. The store blends the charm of a classic general store with modern convenience and supports local artisans and small businesses. Part of "The Yard," a vibrant community area, Eugenia’s General Store creates a nostalgic yet contemporary shopping experience, making it a popular spot for both locals and visitors.
Problem
The website for Eugenia’s General Store is outdated, with missing or non-functional sections likely due to technical issues or maintenance delays. It has several broken links, outdated content, and incomplete product listings, such as unavailable items or out-of-stock notices without updates. This suggests the site has not been properly maintained, possibly due to resource constraints.
Solution
We propose a thorough update of Eugenia’s General Store’s website to improve functionality, content accuracy, and user experience. This includes fixing broken links, updating product availability regularly, and ensuring all site sections work properly. Our goal is to create a reliable e-commerce platform that reflects the store’s offerings and supports its business goals through ongoing maintenance and technical expertise.
Don't feel like scrolling?
See the full prototype here
RESEARCH
Methods: Competitive Analysis, User Interviews
​Research Goal: The project goal for revitalizing Eugenia's General Store's website is to modernize the design for a better user experience, update all content and enhance functionality. This includes implementing a responsive design. The aim is to increase website traffic, improve user engagement, and boost online sales while ensuring data security and regulatory compliance.
​Research Objective:
-
How might we redesign Eugenia’s website to be more user-friendly and intuitive, ensuring it reflects the pride and quality of All American goods?
-
How might we improve the navigation and search functionality on Eugenia’s website to make it easier for busy cooks to quickly find the ingredients they need?
-
How might we enhance Eugenia’s website with better search functionality, detailed product descriptions, and modern features like drive-up pickup to meet the needs of tech-savvy users?
-
How might we create an online shopping experience on Eugenia’s website that captures the warmth and community spirit of the in-store experience?
-
How might we make Eugenia’s website more efficient and user-friendly for busy professionals, ensuring it supports their on-the-go shopping needs?
​Competitive Analysis
​I began by downloading and thoroughly analyzing popular products currently available to tackle this relevant challenge. Through an in-depth assessment, I carefully examined their various features alongside user feedback. This detailed analysis provided insights into the strengths and weaknesses of these applications, identifying potential opportunities for market growth and improvement.​
​
Key Takeaways:
​
Company Overview
Eugenia's General Store
-
Mission Statement: Specializing in Local, New York State & Made in USA Products.
Target
-
Mission Statement: To help all families discover the joy of everyday life.
Walmart
-
Mission Statement: To save people money so they can live better.
Strengths
Eugenia's General Store
-
Clear Product Descriptions: Provides detailed information to help customers make informed decisions.
-
Fast Loading Times: Quick load times enhance user experience and reduce bounce rates.
Target
-
User-Friendly Interface: Easy to navigate, enhancing customer experience.
-
Visual Appeal: High-quality images and engaging visuals attract customers.
-
Wide Product Range: Extensive options across various categories.
-
Convenient Features: Includes personalized recommendations, saved lists, and order tracking.
-
Mobile Compatibility: Optimized for mobile devices for shopping convenience.
Walmart
-
Extensive Product Selection: Wide range of products across numerous categories.
-
Competitive Pricing: Known for low prices and budget-conscious offerings.
-
User-Friendly Interface: Intuitive navigation aids in product search.
-
Convenient Services: Includes free store pickup, same-day delivery, and subscription options.
-
Mobile App Integration: Seamless experience across devices with additional features.
Weaknesses
Eugenia's General Store
-
Complicated Navigation: Can deter visitors and make it difficult to find products.
-
Poorly Organized Layout: Can overwhelm visitors and obscure key information.
-
Lack of Customer Support Options: Limited options can lead to unresolved inquiries.
-
Outdated Design: May appear unprofessional and deter potential customers.
Target
-
Overwhelming Layout: Can be cluttered, especially during peak seasons.
-
Limited Product Information: May lack detailed descriptions and customer reviews.
-
Slow Loading Times: Can lead to frustration and a negative experience.
-
Choppy Checkout Process: Can be perceived as complex, especially with multiple payment options.
-
Limited Inventory Visibility: Some items may be out of stock or unavailable, causing disappointment.
Walmart
-
Website Performance: Occasional issues like slow loading or glitches can frustrate customers.
-
Limited Product Information: Insufficient details or customer reviews for some products.
-
Complex Checkout Process: Can be cumbersome, particularly with multiple steps.
-
Out-of-Stock Items: Frequent issues with items being unavailable.
-
Customer Service Issues: Delays in responses or difficulty in resolving inquiries impact satisfaction.
Opportunities for Eugenia's General Store
-
Improve Navigation and Layout: Simplify the website structure to enhance user experience.
-
Enhance Customer Support: Add more options for customer service, such as live chat or a dedicated support line.
-
Modernize Website Design: Update the design to appear more professional and appealing.
-
Provide Detailed Product Information: Include more comprehensive descriptions and user reviews to aid in purchasing decisions.
-
Optimize for Mobile Devices: Ensure the website is fully compatible with smartphones and tablets.
In-Person Interviews
​I conducted one-on-one interviews with five potential users using a script of prepared questions. I recorded all the interviews and transcribed them into a Word document for later reference, allowing me to gather key findings and identify recurring themes among the participants.
During the interviews, I maintained a receptive and impartial demeanor. The participants were selected based on their grocery shopping habits, specifically targeting those who live in or around Syracuse and shop at Eugenia's or support local small businesses in their community
Total Participants: 6
Ages: 30+
​Learnings:
-
Navigation Issues: Categories on the website are not intuitively organized, making it difficult for users to locate specific items like bread. This was a common issue reported by multiple users.
-
Search Functionality: The search feature often yields irrelevant or incomplete results, which frustrates users and complicates the process of finding specific items.
-
Time Consumption: Users frequently spend excessive time and require multiple attempts or clicks through various sections to find the desired items, indicating inefficiency in both navigation and search functionalities.
-
User Experience: The overall user experience is generally frustrating, highlighting the need for a more streamlined, intuitive navigation system and a more reliable search feature. However, some users found the current system manageable, suggesting that it is functional to an extent but requires significant improvements
Card Sorting​
​Card sorting is one of many research methods that can be used to create a list of user-centric content requirements. After completing your user interviews, you might want to get a better picture of how to organize your content. Card sorting can help you understand how your users organize content and design paths that will make sense to them.
To address the issues with the website's disorganized and mislabelled information architecture, I decided to conduct a card sorting exercise. The existing structure was confusing and disoriented, making it difficult for users to navigate and find specific items. By using card sorting, I aimed to support my research findings and gain insights into how users naturally categorize and label content. This approach would help in reorganizing the website’s information architecture into a more intuitive and user-friendly format.
​
Card Sorting Results​
​Overview:
The card sorting results provide insights into how participants categorize items, helping to understand the mental models they use. This can inform better organization of products on a website, enhancing usability and navigation.
Participant Overview:
-
Number of Participants: 6
-
Completion Status: All participants completed the sorting task.
-
Time Taken: The time taken ranged from 2:22 to 28:12 minutes.
-
Cards Sorted: Each participant sorted all the provided cards.
-
Categories Created: Participants created between 3 to 10 categories.
-
Categories Named: All categories were named by the participants.
Categories and Standardization:
All 6 participants agreed on the categorization of items into the following categories:
-
Bakery
-
Beverages
-
Breakfast
-
Candles
-
Candy
-
Canned Goods
-
Coffee/Tea/Cocoa
-
Condiments
-
Dried Foods
-
Grains
-
Groceries
-
Health & Beauty
-
Miscellaneous
-
Novelty/Humor
-
Pasta
-
Pickled Foods
-
Sauces
-
Snacks
-
Soups
-
Spice/Seasoning
This high level of agreement suggests a clear consensus among participants on how products should be grouped.
Dendrogram Analysis:
The dendrogram provides a visual representation of the clustering agreement among participants. It shows the relationships and similarities between different categories based on participant sorting.
-
High Agreement Clusters: Categories such as Beverages, Coffee/Tea/Cocoa, and Condiments show high levels of agreement, indicating strong consensus on their grouping.
-
Moderate Agreement Clusters: Categories like Health & Beauty and Miscellaneous exhibit moderate agreement, suggesting some variability in how participants perceive these groupings.
-
Low Agreement Clusters: Some categories, while agreed upon, might have lower levels of hierarchical agreement, indicating potential areas for further clarification or refinement.
Key Insights:
-
Consistency: The high level of agreement in category names and the clustering indicates that the participants have a shared understanding of product groupings.
-
Time Variability: The wide range in time taken to complete the sorting suggests that while some participants found the task straightforward, others may have needed more time to decide on their categorizations.
-
Category Clarity: Certain categories like Beverages and Snacks were universally recognized and sorted with high agreement, indicating these are intuitive groupings for users.
Recommendations:
-
Utilize Common Categories: Use the categories identified with high agreement for the website’s navigation and product organization.
-
Refine Less Clear Categories: Further investigate and possibly refine categories that showed moderate agreement to ensure they align with user expectations.
-
User Testing: Conduct additional user testing to validate these findings and ensure that the website structure meets the needs of a broader user base.
-
Iterative Design: Consider an iterative approach to website design, incorporating feedback and continuously improving based on user interaction and feedback.
This detailed analysis of the card sorting results provides a solid foundation for structuring Eugenia’s General Store’s website in a user-friendly manner that aligns with customer expectations and mental models.
​
​
Affinity Mapping​​​
Affinity Mapping Key Insights​
​1. Outdated Website
-
Overall Experience: Users find the website outdated and cluttered, which negatively affects their overall experience.
-
Layout and Design: The website's layout is described as old-fashioned and not user-friendly. Users suggest a more modern design with better use of space and higher-quality images.
2. Difficulty in Navigation
-
Complex Navigation: Users struggle with finding what they are looking for due to complex and unclear navigation.
-
User Confusion: The navigation process is confusing and not intuitive, making it difficult to browse and find specific categories or products.
3. Ineffective Search Functionality
-
Irrelevant Results: The search function often fails to return relevant results, causing frustration among users.
-
Need for Improvement: There is a clear need for a better search functionality to help users find products more efficiently.
4. Lack of Mobile Responsiveness
-
Mobile Shopping Challenges: Users who shop on their mobile devices face difficulties due to the website not being mobile-friendly.
-
Critical Mobile Experience: Given the prevalence of mobile shopping, making the website more responsive and easier to use on smaller screens is crucial.
5. Limited Product Information
-
Insufficient Descriptions: Users feel that product descriptions and customer reviews are inadequate.
-
Desire for More Details: More detailed product information and user reviews would help customers make informed decisions.
6. Complex Checkout Process
-
Cumbersome Process: The checkout process is described as complicated and cumbersome, which can deter users from completing their purchases.
-
Simplification Needed: Streamlining the checkout process to make it faster and easier would improve the user experience.
7. Mismatch with Brand Identity
-
Brand Perception: The website does not reflect the quality and American-made focus of the brand.
-
Improving Brand Communication: Aligning the website design and content with the store's brand values and identity would enhance the overall perception.
8. General Feedback
-
User Experience: Overall, users express dissatisfaction with the website's current state, indicating a strong need for redesign and improvement across various aspects.
By addressing these issues, Eugenia's General Store can significantly enhance its online presence, user experience, and brand alignment.
Persona ​​
1. User Personas Identification:
-
Methodology: Conduct comprehensive user interviews and apply affinity mapping techniques to uncover distinct user personas.
-
Analysis: Efficiently analyze behavioral patterns, preferences, and user requirements to gain insights into diverse user groups.
2. User Personas Creation:
-
Development: Create detailed and representative user personas based on the identified patterns from the analysis.
-
Representation: Each persona captures the unique characteristics, traits, and behaviors of a specific user type.
3. Personalized Design and Development:
-
Foundation: Utilize the developed user personas as a foundational element for the app's design and development process.
-
Alignment: Ensure that the app's design and functionality are tailored to meet the specific needs and preferences of each user persona.
4. Targeted Product Enhancement:
-
Focus: Focus on enhancing the app's functionality based on the needs of the identified user personas.
-
Effectiveness: By catering to these personas, the app will be better equipped to address a wide range of healthcare requirements, improving its overall effectiveness and user satisfaction.
This structured approach ensures that the app development process remains user-centric, leading to a more intuitive and responsive product that effectively meets the needs of its intended audience.​
​
 |  |  |
|---|---|---|
 |
How might we enhance Eugenia’s website with better search functionality, detailed product descriptions, and modern Visual interface to meet the needs of tech-savvy and busy users?
Project Goals
​To ensure well-informed decision-making for the website enhancement, it was essential to meticulously reexamine and reinforce the project's objectives based on comprehensive research findings. Prior to addressing the intricate details of the website, it was crucial to confirm that these objectives were perfectly aligned with the identified user needs and preferences. This thorough review process was paramount in setting a clear and coherent direction for the project, ensuring that every aspect of the website redesign is strategically focused and effectively meets user expectations.
​
​
​
Features Roadmap
​With the robust foundation of my product goals firmly established, it was time to embark on the meticulous journey of developing a distinguished array of features. This process involved carefully assigning precise priorities to each feature, a task undertaken with utmost care and strategic foresight. Each priority level was intricately calibrated based on its paramount importance in aligning with the overarching business objectives and meeting the discerning needs of our esteemed user base.
​
DESIGN AND PROTOTYPE
User Flow and Task Flow
​I mapped out key flows for the site to start to visualize how users could move through the design. This process allowed me to identify complexities that I may not have thought of before.
I would suggest visiting the link which you will find by clicking the image since the flowchart is very detailed, it is hard to put that on the case study.
​
​
Scenario 1 : the user wants to buy sourdough bread and do a curb side pickup in the store
User Flow
Task Flow #1
Task Flow #2
Sitemap​
​Creating a sitemap is an essential step in the website design process as it provides a clear and organized structure of the website’s content. By outlining the hierarchy and relationship between different pages, a sitemap ensures that the navigation is intuitive and user-friendly. It helps in planning the placement of key elements, improving user experience, and making sure that all necessary information is easily accessible. Additionally, a well-structured sitemap aids in identifying potential issues in the website’s architecture early on, allowing for more efficient adjustments and optimizations. Ultimately, a sitemap serves as a blueprint that guides the design and development process, ensuring that the website aligns with both business goals and user needs.
​
Sitemap that I designed with the card sorting results, I focused on rearranging the categories and the sub categories to have a smooth user experience, and also organized the mismatched products.
Low-Fidelity Wireframes
​With key flows meticulously mapped out, I delved into an extensive evaluation of a myriad of organizational apps to analyze diverse design patterns for inspiration. Subsequently, I commenced the creation of a Lo-fi wireframe on Figma, painstakingly iterating through numerous versions of pivotal screens to fully articulate and materialize all my conceptualized ideas.
​
Link for low fidelity wireframes
​
UI Kit
​A UI kit is an essential tool in the design process of websites and apps, providing a comprehensive collection of pre-designed elements and components. It ensures consistency across the entire user interface, allowing designers to maintain a cohesive visual language and user experience. By standardizing elements such as buttons, icons, and typography, a UI kit streamlines the design process, saving time and reducing the potential for errors. Additionally, it facilitates collaboration among team members, ensuring that all stakeholders are aligned with the design principles and aesthetics. Ultimately, a UI kit enhances efficiency, quality, and consistency in the development of user-friendly and visually appealing digital products.
High-Fidelity Wireframes
​After meticulously crafting the visual style and principles to embody simplicity and tranquility, I proceeded to translate these concepts into refined hi-fidelity wireframes. I iterated through multiple versions of crucial screens, carefully saving each iteration for future reference. By soliciting additional feedback, I continuously refined the wireframes until they met the desired level of satisfaction. Following this, I advanced to prototype development, with the intention of subjecting the design to rigorous usability testing. This process ensures that the design not only aligns with the visual and functional goals but also provides an optimal user experience.
​
DESKTOP VERSION
MOBILE VERSION
TESTING & ITERATION
Usability Testing
​Using the Figma prototype as a platform, I carried out extensive usability testing, concentrating on two key functions of the site. This thorough assessment was designed to evaluate user interactions, pinpoint potential pain points, and iteratively enhance the design to ensure optimal usability and an exceptional user experience.
Number of Participants: 5
Tool: Figma
Key Insights on the Results:
Quantitative Data
-
Task Completion Rate: 92%
-
Average Time on Task: 4 minutes per task
-
Error Rate: 8%
-
Efficiency (Tasks Completed without Assistance): 85%
Qualitative Data
-
Common Usability Issues
-
Navigation Confusion: Difficulty finding the "Shop" feature.
-
Search Functionality: Irrelevant search results.
-
Positive Feedback
-
Visual Design: Clean and modern.
-
Checkout Process: Intuitive and fast.
Suggestions for Improvement
-
Enhance Search Function: Improve relevance of search results.
-
Simplify Navigation: Make "Shop/Categories" feature more prominent.
Detailed Findings
Task 1: Browse Products
-
Success Rate: 100%
-
Average Time: 3 minutes
-
Comments:
-
Linda Garcia: "The categories were well-organized."
-
Michael Davis: "It was easy to find what I was looking for once I figured the button for Categories."
Task 2: Search for an Item
-
Success Rate: 80%
-
Average Time: 4 minutes
-
Comments:
-
Emily Johnson: "It was easy to find bread."
-
James Lee: "The search bar is visible and accessible."
Task 3: Add Items to Cart
-
Success Rate: 100%
-
Average Time: 3 minutes
-
Comments:
-
Sarah Thompson: "Adding items to the cart was seamless."
-
Linda Garcia: "The cart icon is easy to find and use."
Task 4: Check Out
-
Success Rate: 100%
-
Average Time: 4 minutes
-
Comments:
-
James Lee: "The checkout process is very user-friendly."
-
Sarah Thompson: "I like how the payment options are laid out."
Post-Test Questionnaire Results
-
Overall Satisfaction: Average Rating: 4.2/5
-
Linda Garcia: "Overall, it's a great app with a lot of useful features."
-
Michael Davis: "It's mostly user-friendly but needs some improvements in navigation."
-
Ease of Use: Average Rating: 4/5
-
Sarah Thompson: "Most tasks were easy to complete."
-
Emily Johnson: "Some features could be more intuitive."
Favorite Features:​
-
Checkout Process: Mentioned by 3 out of 5 participants.
Suggestions for Improvement:
-
Navigation: Make key features more prominent.
-
Search Function: Improve the accuracy of search results.
-
Discount Code Application: Highlight the field for entering discount codes.
Conclusion
-
The usability test revealed that while the grocery app has a strong foundation with a visually appealing design and efficient checkout process, there are areas needing improvement, particularly in navigation and search functionality. By addressing these issues, the app can provide a more seamless and satisfying user experience.
Recommendations
-
Improve Search Functionality: Implement advanced search algorithms for more relevant results.
-
Add filters to narrow down search results effectively.
-
Redesign the navigation menu to highlight key features such as "Track Order.".
-
Add tooltips or prompts to guide users on applying discount codes.
-
User Onboarding: Include a brief tutorial or onboarding process for first-time users.
-
Regular Updates and Feedback: Regularly update the app based on user feedback to continuously improve usability and functionality.
-
Encourage users to provide feedback through an easy-to-access feedback option within the app.
FINAL DESIGN
Final High-Fidelity Wireframes
​After doing some peer reviews of my UI and editing some features of my app to make them more accessible, my designs were finalized.
​
Desktop version
Mobile version
Future Iterations & Retrospective
Future Iterations​​
-
Findings:
-
Strong foundation with visually appealing design and efficient checkout process.
-
Areas needing improvement: navigation and search functionality.
-
-
Recommendations:
-
Improve Search Functionality:
-
Implement advanced search algorithms for more relevant results.
-
Add filters to narrow down search results effectively.
-
-
Enhance Navigation:
-
Redesign the navigation menu to highlight key features like "Track Order."
-
Use clearer icons and labels to guide users.
-
-
Streamline Discount Code Entry:
-
Make the discount code entry field more visible during checkout.
-
Add tooltips or prompts for applying discount codes.
-
-
User Onboarding:
-
Include a brief tutorial or onboarding process for first-time users.
-
-
Regular Updates and Feedback:
-
Regularly update the app based on user feedback to improve usability and functionality.
-
Encourage user feedback through an easy-to-access feedback option within the app.
-
-
Retrospective​
1. User Experience (UX) Enhancements: My primary focus was to elevate the user experience by crafting an intuitive and seamless interface. I conducted extensive user research, including usability testing, to understand the needs and preferences of our target audience. This informed my decision to implement a responsive design that ensures a consistent and enjoyable browsing experience across all devices. The new navigation structure simplifies the user journey, reducing friction and making it easier for customers to find and purchase products.
2. User Interface (UI) Design Improvements: In revamping the visual design, I aimed to reflect the charm and uniqueness of Eugenia's General Store. The updated color palette, typography, and imagery create a cohesive and visually appealing aesthetic that resonates with the store's brand identity. We introduced high-quality visuals and interactive elements that not only attract but also engage users, making their shopping experience more immersive and enjoyable.
Content Optimization and SEO: A critical aspect of the redesign was refreshing and optimizing the content. I meticulously updated product descriptions, added compelling images, and ensured accurate inventory management. Implementing SEO best practices, such as optimizing meta tags, using relevant keywords, and improving site architecture, has already resulted in increased organic traffic and better search engine rankings.
3. Functional Enhancements: Addressing technical issues and enhancing site functionality were key priorities. I streamlined the find a product function process, and integrated advanced search and filtering options.
4. Challenges and Insights: Throughout the project, I faced challenges such as maintaining site performance while integrating new features and ensuring compatibility across multiple platforms. These challenges were invaluable learning experiences that enhanced my problem-solving skills and reinforced the importance of adaptability in design.
5. Community and Customer Focus: Aligning the redesign with Eugenia's General Store’s mission to support local artisans and small businesses was a rewarding aspect of this project. The new website better showcases unique, high-quality products and creates a user-friendly shopping experience that emphasizes community support and customer satisfaction.
Conclusion: This project has been a significant milestone in my career as a UI/UX designer. The positive feedback from both the store’s team and its customers highlights the success of our efforts. The redesigned website not only improves the overall user experience but also supports Eugenia's General Store in its growth and commitment to the local community.
This experience has reinforced the importance of user-centered design, continuous improvement, and the ability to adapt to evolving user needs and technological advancements.