Project overview
Grocifyr is a grocery store that helps shoppers quickly locate products in-store. The typical user is busy and values efficiency. Grocifyr’s goal is to make in-person shopping faster, easier, and more convenient for all customers.
Project duration:
August 2024-October 2024
The problem:
Shoppers often struggle to find specific products in-store, leading to frustration and wasted time during their shopping trips.
The goal:
The goal of the project is to provide an easy-to-use solution that helps shoppers efficiently locate products within the store, improving their overall shopping experience.
My role:
Lead UX Designer and Researcher.
Responsibilities:
Conducted user research to understand shopper pain points, developed user flows and wireframes, designed and prototyped the app interface, etc.
Understanding the user
User research: summary
I conducted personal interviews with shoppers to better understand their frustrations and needs while navigating the grocery store. Initially, I assumed that most users would prefer a map-based navigation system to locate products quickly. However, after conducting research, I found that many users prioritized simplicity and speed over detailed maps. They expressed a desire for a straightforward, step-by-step guide to find products efficiently, rather than complex visual aids. This insight led me to adjust the design to focus on ease of use and clear directions, rather than an over-complicated interface.
User research: pain points
1 - Shoppers often get frustrated searching for specific items. This will guide the design to focus on creating a simple, fast product locator.
2 - Time spent searching for products is a key issue. The design will prioritize efficiency, allowing users to find products quickly.
3 - Many users find store maps confusing. I will focus on a clear, step-by-step guide rather than detailed maps.
4 - Some shoppers struggle with understanding complex interfaces. Moving forward, I will ensure the design is intuitive and easy to use for all.
Persona: Javier
Problem statement:
Javier is a busy working professional and father of two who needs a fast and reliable way to locate grocery items in-store because he values efficiency and has limited time for shopping.
User journey map
Javier seeks to complete his grocery shopping quickly to enjoy more time with his family. He values a seamless shopping experience and relies on the app to efficiently plan his list and navigate the store. His focus is on quickly locating products while avoiding unnecessary distractions or frustrations.
Starting the design
Sitemap
The primary goal is to enhance the in-store shopping experience by helping users easily locate products while offering a convenient option for delivery. The design focuses on simplicity and efficiency, ensuring users can create shopping lists, navigate stores, and complete purchases quickly, whether shopping in-person or opting for home delivery. The app's structure reflects these priorities, streamlining essential tasks for a seamless user experience.
Paper Wireframes
When sketching paper wireframes I focused on addressing user pain points related to product location, efficient navigation, and seamless checkout.
Each screen was designed with the goal of enhancing user experience, whether they are shopping in-store or opting for delivery. The home screen wireframes prioritize quick access to shopping lists, categories, and navigation tools, ensuring a streamlined browsing experience.
Paper Wireframe Screen Size Variation
In designing paper wireframes for different screen sizes, I focused on making sure core features like shopping lists, navigation, and checkout are easy to use across devices. Key elements were adjusted to ensure a smooth experience on both mobile and tablet screens.
Digital Wireframes
I streamlined navigation and search in the digital wireframes. Based on feedback, I enlarged buttons, improved the search bar, and simplified the checkout process to enhance ease of use and speed.
Digital Wireframe Screen Size Variation
I adapted the wireframes for different screen sizes, ensuring key features stayed accessible. Based on feedback, I improved spacing and button sizing for mobile and desktop views to enhance usability and maintain consistency across devices.
Low-fidelity Prototype
The low-fidelity prototype demonstrates the user flow from creating a shopping list to locating items in the store and completing the checkout process. Based on peer feedback, I simplified the navigation and optimized the layout for quicker access to key features, like the search bar and category filters, ensuring a smooth, efficient experience across different screen sizes.
Usability Study: Parameters
Usability Study: Findings
The usability study revealed several key areas for improvement in navigation and overall user experience. Below are the main findings from the study:
1 - Users found the product search feature helpful but suggested adding filters to refine results more quickly.
2 - He checkout process had too many steps, which made it feel slow; users recommended simplifying it for a faster experience.
3 - Some users found the navigation buttons too small on mobile screens, making it harder to interact with key features.
Refining the Design
Mockups
I adjusted the design to use secondary colors for buttons and reserved green for tertiary actions, improving visual hierarchy and making the interface more intuitive.
Feedback indicated that users should control the carousel, so I adjusted the design to let them navigate the cards. This change enhances user control and improves the browsing experience.
Mockups: Original Screen Size
Mockups: Screen Size Variation
High-fidelity Prototype
The high-fidelity prototypes showcase the user flow from browsing items to completing purchases. Based on feedback, I adjusted the color palette to use a darker green and a lighter background, enhancing contrast and readability for a more visually appealing experience.
Accessibility Considerations
1 - I ensured that the color contrast between text and background meets accessibility standards, making content easier to read for users with visual impairments.
2 - I used headings with different sized text to create a clear visual hierarchy, making it easier for users to understand the structure of the content.
3 - I implemented landmarks to help users navigate the app, especially those relying on assistive technologies.
Takeaways
Impact:
The design improvements led to positive feedback from peers and study participants, with one participant noting, "The app is intuitive and makes grocery shopping so much easier!" This highlights the effectiveness of the user-centered approach in enhancing the overall experience.
What I Learned:
Throughout this project, I learned the importance of user feedback in shaping design decisions. Iterating on wireframes and prototypes based on real user input helped me create a more intuitive and efficient app. Additionally, I gained valuable insights into accessibility considerations, reinforcing the need to design for all users.
Next Steps
1 - I would conduct additional usability testing to gather more feedback on the high-fidelity prototype. This will help identify any remaining pain points and ensure that the user experience is as smooth and intuitive as possible.
2 - Based on user feedback, I would focus on implementing further accessibility enhancements, such as improving keyboard navigation and refining alt text for images. This ensures that the app is inclusive for all users, regardless of their abilities.
3 - I would begin planning the development phase of the project, collaborating with developers to ensure that the design vision is accurately translated into a functional product. This step is crucial for bringing the Grocifyr app to life and making it available to users.