When the Market Is Too Far: Designing a Local Grocery Delivery System
ElbiMart is a high-fidelity mobile e-commerce prototype designed to consolidate local grocery options and streamline delivery logistics for the residents of Los Baños.
Abstract
ElbiMart is a user-friendly grocery shopping application prototype designed to streamline order fulfillment and logistics in Los Baños. Building upon direct interviews with local residents, the design addresses key community pain points: rising prices, time lost to heavy traffic, physical fatigue of transporting goods, and lack of fresh produce verification. The high-fidelity prototype consolidated information architecture and multiple local stores into a single interactive flow. Evaluation by testers yielded a 96% overall user satisfaction rating.
Problem Statement & Background
The Challenge
How might we enable residents to access necessary groceries without having to do physical labor and travel to the main market?
Residents of Los Baños face daily challenges accessing fresh, affordable groceries due to public transit hurdles, congested roadways, and localized inventory discrepancies.
To understand these problems, five door-to-door resident interviews were conducted. Feedback highlighted that rising transportation and grocery costs, physical strain, and unpredictable stock levels represent severe barriers to daily food security.
ElbiMart was designed to address these exact constraints by consolidating local inventories, offering transparent pricing, supporting delivery personnel, and securing a highly intuitive ordering workflow.
Design Strategy
The design process centered on user interviews, wireframing, and low-fidelity prototypes, leading to a high-fidelity UI featuring Gilroy Sans and a crisp visual layout.
A primary blue palette (#0047FA, #2A4BA0) was chosen to inspire trust, paired with vivid accents (#FF4747, #00934E, #E1FF00) for alerts, success states, and category items.
I defined a structured Information Architecture (IA) connecting Welcome, Product categories, Cart checkout, Order tracking, and Account settings into a seamless tap-driven navigation.
Design Decisions
Typography & Colors
Methodology
- Conducted five door-to-door interviews with Los Baños residents to define core user requirements and grocery pain points.
- Mapped a comprehensive Information Architecture spanning Welcome, Product, Cart, Checkout, Favorites, Tracking, and Profile segments.
- Evaluated the interactive prototype with five active shoppers using a 7-point Likert scale to rate usability across five core metrics.
Results & Discussion
The usability evaluation yielded excellent results across all dimensions, with an overall user satisfaction rating of 96% based on critical usability indicators.
| Metric | Average Score (/35) | Percentage |
|---|---|---|
| User Needs Addressed | 34.5 | 98.6% |
| Interactive Features | 33.0 | 94.3% |
| Information Architecture | 34.0 | 97.1% |
| Design Consistency | 33.5 | 95.7% |
| Purpose & Functionality | 33.0 | 94.3% |
User testing validated ElbiMart's layout, confirming that consolidating local options into a single layout reduces shopping fatigue.
Testers highly appreciated the track-your-order interface and multiple payment options (QR Ph, GCash, Maya, GrabPay) which simplify transaction flows.
Conclusion & Next Steps
ElbiMart demonstrates that local, user-centered design has a powerful impact on resolving community grocery accessibility issues.
By establishing direct seller-to-buyer ordering and logistics frameworks, the app eases the physical and financial burden on consumers.
Future milestones include integrating real-time store inventory APIs and scaling delivery mapping routines.
Skills & Frameworks
Explore Other Case Studies
Streamlining the Workflow: Evaluation of InShot and FastSnap as a Prototype in Optimizing Video Editing Experience of College Students
FastSnap is a mobile video editor prototype made using Figma. It is designed to offer an intuitive user experience for users who edit videos on the go.
Establishing a Reliable Marketplace Platform for Cosplay Products in the Philippine Community
CosMarket is a mobile e-commerce application prototype designed to revolutionize the cosplay community by offering a seamless, secure platform for buying, selling, and renting cosplay outfits and accessories.
Design and Viability of Payonnect as a Sustainable Smart Umbrella Sharing Kiosk Network
Payonnect is an eco-friendly mobile application and kiosk sharing prototype that allows commuters to borrow and return umbrellas through QR codes, providing immediate shelter during unexpected weather.