Day Food Catalogue

Summary

Day Food Catalogue is a mobile-first catalogue focusing on the needs of Day Food's customers in the Maldives where Viber Pay is the most convenient payment method.

Checkout generates a quotation and opens Viber with the message auto-populated. Customers just tap send to order. Includes search, filter, and a quote (shopping cart).

Day Food Catalogue reduces friction at checkout!

Beyond standard e‑commerce capabilities, the checkout composes a quotation and opens Viber with the message prefilled so customers can confirm in one tap.

The current version allows customers to select product without variant or unit-of-measure, so there are still a bit of friction before order is placed. Variants & unit-of-measure and automatic order creation in Odoo are in development and will be added in the next phase.

There is also a basic PWA layer that supports regular customers who prefer an app-like experience.

1. Problem Statement & Goals

Ordering commonly happens through Viber chats with sales. The friction is turning customer's intent into a structured quote that sales can process quickly. Mobile-first is a must as Viber is the primary communication channel in the Maldives.

								flowchart TD
								    subgraph Customer["Customer Domain"]
								        C1["Small Vendors"]
								        C2["Hotel Purchasers"]
								        C3["Restaurant Managers"]
								    end
								    
								    subgraph Sales["Sales Domain"]
								        S1["Sales Reps"]
								        S2["Viber Communication"]
								        S3["Quote Processing"]
								    end
								    
								    subgraph Ops["Operations Domain"]
								        O1["Order Fulfillment"]
								        O2["Inventory Management"]
								        O3["Logistics"]
								    end
								    
								    subgraph ERP["ERP Domain"]
								        E1["Odoo System"]
								        E2["Order Records"]
								        E3["Reporting"]
								    end
								    
								    Customer -->|"Browse & Build Quote"| Sales
								    Sales -->|"Confirm Order"| Ops
								    Sales -->|"Create Record"| ERP
								    Ops -->|"Update Status"| ERP
								    ERP -->|"Sync Status"| Sales
								    Ops -->|"Deliver Products"| Customer
								    
								    classDef domainClass fill:#f8f9fa,stroke:#0dcaf0,stroke-width:1px
								    class Customer,Sales,Ops,ERP domainClass
								

2. Background

Day Food Maldives serves customers across more than 200 islands with varying connectivity. Sales conversations commonly happen on Viber, a channel customers already trust. The product needed to work well on mobile, support quick discovery, and streamline the handoff from deciding to actually placing an order.

3. Users & Research

									mindmap
										root((User Types))
											::icon(fa fa-users)
											Primary Users
												::icon(fa fa-store)
												Small Vendors
													::icon(fa fa-calendar-week)
													Weekly Orders
													Bi-Weekly Orders
												Hotel Purchasers
													::icon(fa fa-hotel)
													Bulk Orders
													Specific Requirements
												Restaurant Managers
													::icon(fa fa-utensils)
													Frequent Orders
													Specialty Items
											Internal Users
												::icon(fa fa-building)
												Sales Reps
													::icon(fa fa-comments)
													Viber Communication
													Order Confirmation
												Operations Staff
													::icon(fa fa-clipboard-check)
													Order Fulfillment
													Order Reconciliation
									

									journey
										title User Journey
										section Discover
											Search by Brand: 5: Customer
											Browse Categories: 4: Customer
											Filter Products: 4: Customer
										section Build Quote
											Add Products: 5: Customer
											Adjust Quantities: 4: Customer
											Review Quote: 3: Customer
										section Confirm
											Send via Viber: 5: Customer, Sales
											Discuss Details: 4: Customer, Sales
											Finalize Order: 3: Sales, Ops
									

									graph LR
									    subgraph "Key Research Insights"
									        I1["Viber is trusted"] --> S1["Keep human-in-the-loop"];
									        I2["Brand-focused search"] --> S2["Optimize brand filtering"];
									        I3["Remote connectivity issues"] --> S3["Offline-friendly browsing"];
									    end
									    
									    subgraph "Design Implications"
									        S1 --> D1["Viber checkout flow"];
									        S2 --> D2["Brand-first navigation"];
									        S3 --> D3["PWA with caching"];
									    end
									    
									    classDef insights fill:#e3f2fd,stroke:#0d6efd,stroke-width:1px;
									    classDef solutions fill:#d1e7dd,stroke:#198754,stroke-width:1px;
									    classDef designs fill:#fff3cd,stroke:#ffc107,stroke-width:1px;
									    
									    class I1,I2,I3 insights;
									    class S1,S2,S3 solutions;
									    class D1,D2,D3 designs;
									

4. Proposed Solution

Checkout to Viber

The checkout composes a structured quotation and opens Viber with the message prefilled to Day Food’s hotline. Customers review and tap send—minimizing onboarding and matching existing sales workflows.

• Zero learning curve; leverages familiar messaging
• Resilient to intermittent connectivity
• Keeps a human-in-the-loop for pricing and fulfilment

Architecture Diagram (Systems Design)

flowchart LR
  User["Customer (Mobile)"] --> UI["Rails + Hotwire UI"]
  UI --> Spree["Spree Commerce Domain"]
  Spree --> DB[("PostgreSQL")] 
  UI -.-> Viber["Viber Deep Link\n(prefilled quote)"]
  Viber --> Sales["Sales (Human-in-the-loop)"]
  Sales -->|confirm| Odoo[("Odoo ERP")] 
  Odoo -->|sync status| UI

  UI --> SW["Service Worker\n(cache-first)"]
  SW --> CDN["Static Assets"]
							

Information Architecture Map

flowchart TD
  Catalog["Catalog"] --> Category["Category"]
  Category --> Brand["Brand"]
  Brand --> Product["Product"]
  Product --> Line["Quote Line"]
  Line --> Qty["Quantity"]
  Line --> UOM["Unit of Measure (future)"]
  Line --> Variant["Variant (future)"]

  Quote["Quote Message"] --> Header["Header"]
  Quote --> Totals["Totals"]
  Quote --> Contact["Contact"]
							

5. Experience Flows

6. Delivery & Project Management

• Phases: Discovery → MVP (quote-to-Viber) → Variants/UOM → Odoo order automation
• Risks: connectivity, Viber dependency, ERP timing; Mitigations: offline-first UI, fallbacks, staged integration
• Collaboration: weekly stakeholder reviews; sales feedback in the loop

								gantt
									title Day Food Catalogue Project Timeline
									dateFormat  YYYY-MM-DD
									axisFormat %b %Y
									todayMarker stroke-width:5px,stroke:#0dcaf0,opacity:0.5
									
									section Phase 1: MVP
									Discovery & Research       :done, disc, 2025-01-15, 30d
									Design & Prototyping       :done, design, after disc, 45d
									MVP Development            :done, dev1, after design, 60d
									Quote-to-Viber Launch      :done, milestone, after dev1, 0d
									
									section Phase 2
									Variants & UOM             :active, var, 2025-07-01, 45d
									Odoo Integration           :odoo, after var, 60d
									PWA Enhancements           :pwa, 2025-07-15, 90d
									
									section Phase 3
									Hotwire Native Planning    :plan, 2025-10-01, 30d
									Native App Development     :native, after plan, 90d
									
									section Risk Mitigation
									Offline-first UI           :crit, risk1, 2025-03-01, 120d
									Viber Fallbacks            :crit, risk2, 2025-04-15, 45d
									Staged ERP Integration     :crit, risk3, 2025-08-01, 90d
								

								flowchart TD
								    subgraph PM["Project Management"]
								        Weekly["Weekly Stakeholder Reviews"]
								        Feedback["Sales Feedback Loop"]
								        Agile["Agile Development Cycles"]
								    end
								    
								    subgraph Risks["Key Risks"]
								        R1["Connectivity Issues"]
								        R2["Viber Dependency"]
								        R3["ERP Integration Timing"]
								    end
								    
								    subgraph Mitigations["Risk Mitigations"]
								        M1["Offline-first UI Design"]
								        M2["Alternative Checkout Fallbacks"]
								        M3["Staged Integration Approach"]
								    end
								    
								    R1 --> M1
								    R2 --> M2
								    R3 --> M3
								    
								    PM --> Risks
								    PM --> Mitigations
								    
								    classDef riskClass fill:#f8d7da,stroke:#dc3545,stroke-width:1px
								    classDef mitigationClass fill:#d1e7dd,stroke:#198754,stroke-width:1px
								    classDef pmClass fill:#e3f2fd,stroke:#0d6efd,stroke-width:1px
								    
								    class R1,R2,R3 riskClass
								    class M1,M2,M3 mitigationClass
								    class Weekly,Feedback,Agile pmClass
								

7. Outcomes & Validation

• Metrics: time-to-order, quote completion rate, Viber checkout adoption
• Validation Plan: staged rollout, sales feedback loops, instrumented events
• Status: MVP delivering quote-to-Viber; upcoming: variants/UOM, Odoo automation

8. Showcase

Search and Filter Experience

Search Functionality

Customers can search by brand and/or product name to quickly find matches. The search system includes fuzzy matching to handle common spelling variations and typos.

Category Navigation

Pre-defined product categories help customers find options or related products quickly. The hierarchical structure allows for intuitive navigation through 12 main categories and over 40 subcategories.

Product Management & Checkout

Quote (Cart) Management

Dynamic product buttons clearly state the actions that customers are about to perform. The intuitive interface allows users to add, remove, and adjust quantities with minimal effort.

Add to Quote Flow:

1

Click + to add quantity of product.

2

Click Add to Cart.

3

Product is added to cart.

4

Click - to reduce quantity. Click Remove from Cart button.

5

Product is removed from cart.

Sketches and Low-Fi Mockups

Work in progress artifacts

These artifacts document the progress and decisions made during the project.