Project Overview

Grocery shopping shouldn't be a stressful, time-consuming chore—but for many, it is. Crowded aisles, hard-to-find items, and multiple store visits due to supply chain issues can turn a simple task into a major hassle. To solve this, I realized that a well-designed app could eliminate many of these pain points by streamlining the shopping process, making it faster, easier, and more enjoyable.

Timeline: July 2024 - September 2024
My Role: UX Researcher, UI/UX Designer
Tools: Figma, Adobe CC
Project Type: Solo Passion Project

The Problem

Current methods for grocery shopping are time-consuming and inefficient, leading many people towards deliveries or in-store pickups for busy shoppers. Grocery store apps are often difficult to navigate and don’t display all of the information shoppers need, creating frustrations and losing time spent elsewhere.

The Solution

To develop an application that revolutionizes the grocery shopping experience by offering convenience, efficiency, and personalization. Key features such as smart shopping lists, product locators, and suggested shopping routes help streamline the process, allowing users to save both time and money. This solution reduces the need for delivery or pickup fees, ultimately enhancing customer satisfaction and building loyalty.

Competitor Analysis

Before diving into the design, I conducted a thorough competitor analysis to better understand current market trends, and identify opportunities for innovation. By comparing major platforms like Fred Meyer, Instacart, and Walmart, I aimed to uncover key insights to better shape my design decisions, particularly in addressing pain points such as navigation, personalization, and user experience.

Takeaways

After thoroughly analyzing the existing grocery shopping apps, several critical insights emerged that influenced the design strategy:

• Competitors organize content well but have complex and confusing shopping list features.

• Overwhelming homepages and high service fees negatively affect user experience.

• Opportunities lie in improving navigation, adding shopping routes, and enhancing product details.

• With increasing competition from more user-friendly platforms, enhancing efficiency and reliability will be key to standing out.

Proto Personas

Based on insights from the competitor analysis, I developed proto-personas to empathize with users, highlight their goals and pain points, and guide future design decisions to create human-centered solutions.

User Flows

Building on the goals and pain points identified in the proto-personas, I designed detailed user flows to map out how users like Emily and Jason would interact with the app. These flows focus on the key tasks they need to complete, such as viewing product information, creating shopping lists, and placing pickup orders. Each flow aims to minimize frustration, save time, and provide a seamless user experience that aligns with their specific needs.

Site Map

After defining the user flows, it was imperative to create a sitemap to establish hierarchy, which was essential to ensure seamless navigation and a clear hierarchy for users. The challenge was balancing a variety of functionalities—such as lists, deals, and profile management—without overwhelming users with too many options.

Challenges

While developing the site map, I encountered three key challenges:

• Complex navigation hierarchy – I simplified it by grouping tasks under intuitive categories like “Profile” and “Shop,” helping users navigate smoothly.

• Feature overload – Prioritized core features like shopping lists and deals, while nesting less-used features under secondary tabs to avoid overwhelming users.

• Essential features buried – Ensured actions like creating a list or viewing deals are easy to access, reducing steps for primary tasks.

Sketches

I developed initial sketches focusing on key screens essential for the critical tasks identified in the user journeys—such as product searches, list creation, and the checkout process. These sketches are designed to make crucial features readily accessible, ensuring the user interface is intuitive and aligns with how personas would interact with the app.

Mid-Fi Wireframes

Transitioning from sketches to digital, I crafted mid-fidelity wireframes to further refine the app's design. These wireframes provide a clearer view of the user interface and interaction sequences, allowing for the visualization of element placement, navigation paths, and core functionalities. This step is crucial for iterating quickly based on preliminary feedback, ensuring that each user’s journey through the app is intuitive and efficient.

Feedback

The feedback gathered from user testing was crucial in highlighting pain points and areas for improvement. Here are the key adjustments made to the high-fidelity wireframes based on users' experiences and suggestions:

Clarified Navigation:

• Feedback: Users found the icons on the floating navigation bar needed to be clarified.

• Change: Added clear, descriptive labels to each icon to enhance understanding and ease of use.

Enhanced Store Selection Process:

• Feedback: Users felt the transition from the store selector to the store page was abrupt and confusing.

• Change: Integrated additional screens featuring a map-based store selector. This not only smooths the transition but also ensures users are confident about which store location they are selecting.

Additionally, a personal review of the design against the user personas revealed a significant oversight:

Introduction of Smart Shopping Lists:

• Insight: Recognized that the initial design did not adequately showcase the smart shopping list feature, which was crucial according to the user personas.

• Change: Developed three additional screens to demonstrate the creation and use of smart shopping lists, including a detailed view of a 'Pizza Night' list and a navigational map with a checklist for an efficient in-store experience.

Check out the full prototype below:

Reflections

Throughout this project, I refined my technical skills, particularly in creating responsive, high-fidelity wireframes and integrating user feedback directly into the design iterations. The development of the smart shopping list feature highlighted the importance of aligning with user expectations and directly addressing their core needs, teaching me the delicate balance between feature-rich interfaces and user simplicity. The process has been invaluable in enhancing my ability to anticipate user needs and design with precision and empathy.

Next Steps

Looking ahead, I plan to expand the app’s functionality by exploring integrations with real-time inventory systems and personalized user analytics. Further user testing and feedback will continue to shape its evolution, ensuring the app remains adaptable and relevant in a rapidly changing retail environment.