Problem Statement
​​
Shoppers in grocery stores need a way to quickly locate items in real time and check whether products are in stock, because traditional grocery websites and in-store experiences often cause frustration, wasted time, and uncertainty when products are unavailable.
​
Therefore, I believe that by designing a website that provides real-time item location, live stock availability, and convenient delivery options with free membership benefits, I can help users save time, reduce frustration, and shop with confidence both in-store and online.
Project Goals
​​
-
Help customers find items faster through real-time in-store location tracking.
-
Reduce customer frustration by showing accurate stock availability online.
-
Increase customer loyalty through free membership and zero-delivery perks.
-
Improve online and in-store shopping efficiency with seamless digital integration.
-
Enhance the overall user experience to build trust and repeat usage.
Project Objectives
​​
-
Design a real-time product locator feature that guides users to the correct aisle/shelf.
-
Integrate a live inventory system to display current stock levels.
-
Build a membership program with free delivery and perks to increase engagement.
-
Ensure a clean, accessible, mobile-friendly UI for diverse shoppers.
-
Conduct usability testing to validate efficiency and ease of use.
Success Metrics
User Metrics
-
Time on task: Reduce time to locate a product by 60%.
-
Task success rate: At least 90% of users can find an item successfully.
-
User satisfaction: Post-usage survey ratings of 4/5 or higher.
-
Repeat usage: 60% of returning customers using locator & stock features.
​
Business Metrics
-
Increased conversions: Higher online orders and membership signups.
-
Cart size growth: Average basket value increases (especially with free delivery threshold of $75).
-
Delivery adoption: 40% of orders using free delivery options.
-
Reduced complaints: Drop in out-of-stock or “couldn’t find product” complaints.
1. User Interviews
I interviewed a variety of supermarket shoppers to have a deeper understanding of their habits and annoyances. Finding problems with finding things, determining stock levels, and utilizing delivery services was the aim. Farmers Fresh's essential elements were directly influenced by these observations.
Summary
​​
User 1: Her greatest obstacle is time. She frequently wastes minutes looking for things in-store and becomes irate when online stock information is inaccurate. She enjoys benefits like free delivery and cherishes anything that saves her time.
​
User 2: His top priority is convenience. He is not patient with outdated stock data or erroneous search results. He stated that he would use delivery more frequently if costs were eliminated and that he wanted a seamless, quick, and reliable online experience.
​
User 3: The most crucial element in her decision-making process is price. She no longer shops online because of delivery costs, and she has stopped using other sites that seemed too costly. Savings, precise stock updates, and free membership benefits are what drive her.
Key Takeaways
​​
-
Efficiency: Both online and in-store, customers want to find goods more quickly.
-
Trust: User confidence depends on accurate, real-time stock updates.
-
Value: Loyalty is greatly influenced by free delivery and membership benefits.
-
Usability: Websites that are clear, straightforward, and truthful are more enticing than ones that are cluttered or untrustworthy.
*For privacy reasons, no personal information has been disclosed, ensuring respect for participant confidentiality.
2. Observation
​
I performed in-store observations at nearby grocery stores to have a better understanding of consumer behaviour. I observed that a lot of shoppers took their time moving around the aisles, frequently going back when they couldn't find a particular item. Customers frequently sought assistance from store employees, particularly when things were mislabeled or moved. Frustration when things seemed missing, even if they were just put in less noticeable places, was another important finding. A clear item locator system and precise, real-time stock updates were deemed essential by these observations, and they were incorporated into the Farmers Fresh design.
3. Heuristic Evaluation
In order to find frequent pain problems, I used Nielsen's 10 usability heuristics to perform a heuristic evaluation of existing supermarket websites. Key potential for Farmers Fresh were informed by the usability deficiencies that were discovered during this process, including cluttered interfaces, imprecise stock information, and hidden delivery data.
​
-
Visibility of System Status: When items are unavailable, users become frustrated because many grocery websites do not update stock in real-time.
-
Match between System and Real World: Occasionally, item categories don't align with users' thinking ("Condiments" vs. "Sauces"), which makes searching difficult.
-
User Control & Freedom: On certain platforms, it can be challenging to reverse or change cart operations without having to start over.
-
Consistency & Standards: When delivery cost information and membership benefits are concealed or inconsistent, trust is diminished.
-
Error Prevention: Users are disappointed when websites fail to notify them of low stock until the moment of checkout.
-
Recognition rather than recall: Users are forced to rely on recollection rather than identification because product visuals are frequently small or ambiguous.
-
Flexibility & Usability: Users find it more difficult to purchase effectively when websites lack intelligent filters (such as "In stock only").
-
Aesthetics and Minimalist Design: With so many advertisements and promotions, some interfaces feel cluttered and divert attention from important tasks.
-
Assist Users in Identifying, Diagnosing, and Fixing Mistakes: Messages that are out of stock are ambiguous (such as "Not available") and do not offer any substitutes.
-
Help & Documentation: Users may not know where to find support because support choices are frequently hidden.
User Experience Map
The user experience helps visualize how shoppers interact with Farmers Fresh from planning to checkout. By mapping actions, emotions, and pain points, I identified opportunities to improve the experience.
Crazy 8's
I used the Crazy 8's technique to quickly come up with a range of design options. Because this exercise promoted quick thinking and research, I was able to come up with eight original ideas to improve Farmers Fresh customers' grocery shopping experiences.
Feature Prioritization
I used prioritization techniques to determine which concepts would best serve users and fit with corporate objectives after coming up with a number of ideas during the Crazy 8's session. This measure made sure Farmers Fresh concentrated on putting the most practical and effective solutions into practice first.
​​
1. Moscow Method
​
The MoSCoW technique assists in grouping concepts into four categories according to their significance and viability:
Must Have: Features that address important user pain points.
Should Have: Features that improve usability but are not essential.
Could Have: Extras that enhance user satisfaction but are not necessary.
Won't Have (for now): Features that will be delayed or eliminated because of practicality issues or low impact.
​​​​
2. Impact vs Effort Matrix
​​
The Impact vs. Effort Matrix makes it easier to see which concepts are most valuable in relation to the resources needed to put them into practice.
Low Effort, High Impact → Fast Wins
High Effort, High Impact → Large-scale initiatives
Fill-ins: Low Impact, Low Effort
Low Impact, High Effort → Steer clear of or put off
Starting the Design Process
I started making low-fidelity wireframes to see Farmers Fresh's structure and layout after outlining its essential features and user flows. These preliminary drawings prioritize hierarchy, usability, and user flow over colour or visual features.
I moved on to creating digital low-fidelity wireframes to visualize the structure of the Farmers Fresh website. This stage focused on establishing the hierarchy and layout for essential pages such as the Home, Cart, Profile, Login, and Sign-Up screens. By keeping the designs minimal and functional, I was able to clearly define how users would browse products, check stock availability, and complete purchases with ease. The digital wireframes helped translate early ideas into a cohesive layout, ensuring a smooth user journey before adding visual styling and brand elements in the next stage.
Usability Study
I conducted a usability study with five users of various ages and lifestyles to confirm the Farmers Fresh website's usability and flow. Understanding how users identify products, traverse the website, and effectively finish their purchases was the aim.
​
Among the participants were:
- A college student who shops conveniently online
- A working professional who often places home delivery orders for groceries
- Two senior citizens who would rather order online than in-store
- Quick in-store shopping is important to a parent of two young children.
​
Important Results:
Product location and search: While users valued the real-time item locator, they recommended more lucid visual signals to help users locate product aisles more quickly.
Accessibility and navigation: Larger icons and clearer navigation labels were chosen by older participants.
Checkout experience: In order to save time amid hectic schedules, the parent user appreciated the "Quick Checkout" option.
Benefits of membership: More obvious callouts and banners were suggested because some users failed to notice the free membership offer.
​
Impact:
By strengthening the navigation hierarchy, making important activities more visible, and guaranteeing accessibility for all user types, these insights influenced the subsequent round of design improvements.
View my full Usability Study Process here.
Iteration Process
Enhanced Product Locator Visibility
Users want faster access to the Find in Store feature, according to usability comments. In order to make it simpler to find products in real time, I added a map symbol to the home and product pages and made the locator button more noticeable.
Improved Cart Accessibility
For several participants, accessing the cart while browsing was a little inconvenient. I fixed this by adding a tiny cart preview and a persistent cart icon to the top navigation bar, which let customers view and control their products without ever leaving the page they are on.
Quick Checkout Option
Efficiency at checkout was prized by working professionals and parents. I created a simplified "Quick Checkout" mode that saves time and steps during transactions by automatically filling in member information and shipping selections.
Increased Membership Awareness
While purchasing, users failed to notice the free membership and 0-delivery bonus. In order to make sure consumers are aware of their savings prospects, I included highlight banners and subtly placed pop-ups promoting the membership on the Home Screen.
Accessibility and Readability Improvements
Larger typefaces and more distinct button contrast were recommended by older participants. To increase visibility and readability and create a more seamless experience for users of all ages, I increased the colour contrast and typeface hierarchy.
High-Fidelity Design
I transitioned the low-fidelity wireframes into high-fidelity mockups to bring the Farmers Fresh experience to life. The focus during this phase was to create a visually appealing and intuitive interface that aligned with the brand’s identity — fresh, organic, and community-driven. The hi-fi designs showcase consistency in spacing, typography, and color hierarchy while maintaining accessibility and responsiveness across devices.
Visual Identity and UI Systems
In order to convey sustainability and freshness, the visual director used a colour scheme of green and white. The use of soft shadows and rounded angles produced a welcoming, approachable ambiance. Modern appeal and legibility were guaranteed by a simple sans-serif typeface. In order to ensure uniformity across all pages, I created a tiny user interface kit that included buttons, input fields, and icon styles. Micro-interactions and icons were created to help users navigate the purchase process with ease.
Accessibility and Usability Considerations
All users can read when the text and background have a high contrast. On mobile devices, interactive features such as buttons and forms are spaced sufficiently apart to allow for effortless tapping. In accordance with accessibility guidelines, icons are always used in conjunction with clear language labels to prevent misunderstandings and to communicate information.
Design Refinements
​
Several improvements were implemented in response to usability feedback:
- Highlighted the search bar to facilitate speedier navigation.
- Added stock indicators for each product in real time.
- Enhanced scannability through better category spacing and product image visibility.
- Streamlined checkout process with unambiguous progress markers.
Challenge 1
​​
Cluttered Product Navigation
​
- Users found it challenging to efficiently browse or locate products in the early designs.
- Users can now find items or aisles more quickly thanks to the hi-fi version's clever search bar, visual hierarchy, and better category structure.
Challenge 2
​​​
Low Visibility of Real Time Inventory/Locating Products in Store​
​
- Users found it difficult to quickly comprehend supply availability.
- Clarity and trust were enhanced by the final design's addition of distinct "In Stock" and "Low Stock" signs with colour coding and subtly animated real-time updates.
Challenge 3
​​​
Underemphasized Membership Benefits​
​
- In the wireframes, the benefits of the free membership (no delivery fee, special discounts) were unclear.
- The hi-fi design increased visibility and sign-up intent by emphasizing benefits across key screens with big banners, symbols, and microcopy.
Style Guide
Gallery
Key Takeaways
​
My ability to translate user input into meaningful, practical design solutions was enhanced while designing Farmers Fresh. Through a combination of user research, observation, and usability testing, I was able to pinpoint the main annoyances associated with grocery shopping, such as trouble finding things or needless checkout procedures, and turn them into a smooth, user-friendly online experience.
​
Iteration and data-driven improvement taught me how important it is to put customer comfort first while upholding brand credibility. Direct user feedback drove every enhancement, such as guest checkout, real-time stock visibility, and a streamlined payment procedure, guaranteeing that the design genuinely benefited its target demographic.
​
With its clear graphics, reliable navigation, and accessibility-first features, the finished high-fidelity prototype strikes a balance between functionality and emotion, giving every customer a sense of comfort and assurance. My knowledge of UX strategy, usability testing, and responsive design has increased as a result of this project, which also demonstrated that empathy, consistency, and clarity are the foundations of effective design.