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. User Research

The Day Food team shared valuable insights from their customer interactions. Vendors, hotel purchasers, and restaurant managers all need to browse products efficiently and place orders through Viber. The design needed to accommodate both regular customers who know exactly what they want and new customers who need to explore the catalog.

									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

Systems Design

• Rails + Hotwire front-end on Spree Commerce domain
• PostgreSQL as system of record
• Viber deep link with encoded cart lines and customer info
• PWA service worker for cache-first assets

Information Design

• Catalog hierarchy: Category → Brand → Product
• Search by product and brand with filters
• Quote schema: header → lines → totals → contact
• Future: variants & UOM enrich line items

UX Patterns

• Sticky header with search and cart
• Infinite scroll for product browsing
• Quick add from catalog and product detail
• Slide‑in cart review before checkout

Architecture Diagram

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

Product Management & Checkout

Sketches and Low-Fi Mockups

Work in progress artifacts

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

9. Moving Forward

Phase 2: Core Enhancements

10. Appendix: Technical Notes

			sequenceDiagram
			  autonumber
			  participant C as Customer (Mobile)
			  participant UI as Rails + Hotwire UI
			  participant SP as Spree Commerce
			  participant DB as PostgreSQL
			  participant VB as Viber
			  participant S as Sales
			  participant OD as Odoo ERP
			  
			  C->>UI: Browse catalog
			  UI->>SP: Get products
			  SP->>DB: Query products
			  DB-->>SP: Return products
			  SP-->>UI: Products data
			  UI-->>C: Display products
			  
			  C->>UI: Add to quote
			  UI->>UI: Update cart
			  C->>UI: Checkout to Viber
			  UI->>VB: Open Viber with quote
			  VB->>S: Send quote message
			  VB->>S: Message delivered
			  S-->>C: Confirm details
			  S->>OD: Create order (planned)
			  OD-->>UI: Status sync (planned)
			  UI-->>C: Status update
						

Conclusion

The Day Food Catalogue demonstrates how modern web technologies can be leveraged to create a performant, accessible, and user-friendly product showcase. The combination of Ruby on Rails, Hotwire, and PostgreSQL provides a solid foundation that balances developer productivity with application performance.