onyx-food

byMahavirsinh Gohil

Design a modern, clean, and premium web app UI for a Canada-based food ecosystem platform named Mitzy. Mitzy is NOT a food delivery app. It is a discovery and subscription platform where users can explore home chefs, cloud kitchens, food businesses, and catering services, and directly connect with them. The design should follow a professional startup-level UI/UX similar to Airbnb and modern marketplace platforms, with a strong focus on simplicity, clarity, and trust. Use the primary color #FBD802 (warm yellow) for call-to-action elements and highlights, and secondary color #008AFF (blue) for structure, icons, and headings. Use a white background with soft shadows, rounded corners (12-16px), and clean typography like Poppins or Inter. The main dashboard (homepage) should include: 1. A top navigation bar with: * Location selector (default: Ontario, Canada) * Notification icon * User profile icon 2. A search bar with placeholder text: “Search tiffin, cakes, snacks, catering...” 3. A category grid section with 7 categories: * Tiffin * Cloud Kitchen * Snacks * Ready-Made Products * Bakery Products * Restaurant * Catering Service Each category should be shown as a rounded card with icon, label, and subtle color accents. 4. A “Trending in Ontario” section with horizontal scroll cards showing: * Food image * Kitchen/service name * Rating * Category tag 5. A “Tiffin Plans” section showing subscription cards: * Weekly/Monthly plan * Price * Meals included * CTA button “View Plan” 6. A “Featured Kitchens” section showing chef cards: * Chef image * Kitchen name * Cuisine type * Rating * Location * CTA button “View Kitchen” 7. A “Top Rated” section 8. A “Catering Services” section with: * Service name * Event type * Starting price * CTA button “Request Quote” Include a bottom navigation bar with: Home, Explore, Subscriptions, Saved, Profile Also design a Category Listing Page (for example: Tiffin): * Header with category name and location * Filter chips (Price, Rating, Type, Location) * List of service provider cards with image, name, rating, location, price * Buttons: “View Details” and “Save” Also design a User Personal Dashboard page: * Welcome message * Saved Providers section * Active Subscriptions section * History (recently viewed/contacted) * Reviews given * Settings The UI should feel premium, minimal, and scalable like a real funded startup. Focus on usability, spacing, and clear visual hierarchy. Avoid clutter. Prioritize mobile-first responsive design but suitable for web as well. Do not include delivery tracking or logistics features. Focus only on discovery, subscription, and connection between users and food providers.

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

Project Name: onyx-food

1. Introduction

The onyx-food platform is a modern, premium web application designed to serve as a discovery and subscription ecosystem for food enthusiasts and foodpreneurs. Unlike traditional food delivery apps, onyx-food focuses on connecting users with home chefs, cloud kitchens, food businesses, and catering services. The platform is tailored for the Indian market, with scalability to expand globally.

This document outlines the system requirements for onyx-food, including functional and non-functional specifications, user personas, design principles, and technical architecture. The goal is to create a scalable, mobile-first platform that delivers a clean, professional, and trust-building user experience.

Page 1 of 8

2. System Overview

onyx-food is a discovery and subscription platform that enables users to explore food categories, connect directly with service providers, and subscribe to curated food plans. The platform will feature two distinct user roles:

  1. Regular Users (Customers):

    • Explore food categories such as tiffin, snacks, bakery products, catering services, etc.
    • Subscribe to tiffin plans and other food services.
    • Manage saved providers, active subscriptions, and history via a personal dashboard.
  2. Service Providers (Foodpreneurs):

    • Manage listings, menus, subscription plans, leads, and profiles via a dedicated dashboard.
    • Showcase their offerings to attract customers.

The platform will leverage smart search functionality with automatic province-based location filtering and additional filters for cuisine, price, rating, category, and dietary preferences. It will be designed as a premium marketplace with a clean layout, strong visual hierarchy, and trust-building elements.

3. Functional Requirements

Page 2 of 8

Regular Users (Customers):

  • As a Regular User, I should be able to explore food categories such as tiffin, snacks, bakery products, and catering services.
  • As a Regular User, I should be able to subscribe to tiffin plans and other food services.
  • As a Regular User, I should be able to save providers to my dashboard for quick access.
  • As a Regular User, I should be able to view my active subscriptions and history of recently viewed/contacted providers.
  • As a Regular User, I should be able to leave reviews for providers.

Service Providers (Foodpreneurs):

  • As a Service Provider, I should be able to create and manage my listings, including menus and subscription plans.
  • As a Service Provider, I should be able to view and manage leads from interested customers.
  • As a Service Provider, I should be able to update my profile and showcase my offerings.

Search Functionality:

  • As a User, I should be able to perform a free-text search for food categories, cuisines, or specific keywords.
  • As a User, I should see location-based filtering applied automatically (default: province).
  • As a User, I should be able to refine my search using filters such as cuisine, price, rating, category, and dietary preferences.

4. User Personas

Page 3 of 8

Regular Users (Customers):

  • Description: Individuals looking to discover and subscribe to food services such as tiffin plans, catering, or bakery products.
  • Goals: Explore food options, connect with providers, and manage subscriptions.
  • Pain Points: Lack of trust in providers, difficulty in finding curated food services, and cluttered interfaces.

Service Providers (Foodpreneurs):

  • Description: Home chefs, cloud kitchens, snack makers, bakery businesses, restaurants, and catering service providers.
  • Goals: Showcase offerings, attract customers, and manage leads effectively.
  • Pain Points: Limited visibility, difficulty managing listings, and lack of direct connection with customers.

5. Visuals Colors and Theme

Color Palette:

  • Background: #FFFFFF (White)
  • Surface: #F5F5F5 (Soft Gray)
  • Text: #333333 (Dark Gray)
  • Accent: #FBD802 (Warm Yellow)
  • Muted Tones: #008AFF (Blue)

Typography:

  • Primary Font: Poppins
  • Secondary Font: Inter
Page 4 of 8

Design Principles:

  • Clean and minimal layout.
  • Rounded corners (12-16px) for UI elements.
  • Soft shadows for depth and hierarchy.
  • Strong focus on usability and trust-building.

6. Signature Design Concept

Concept: Interactive Food Ecosystem Map

The homepage will feature an Interactive Food Ecosystem Map that visually represents the food categories and providers in the user's selected province.

Details:

  • Visual Layout: A dynamic map with clickable pins representing food categories (e.g., Tiffin, Bakery, Catering). Each pin expands into a mini card showing top providers in that category.
  • Animations: Smooth transitions as pins expand and collapse. Hover effects to highlight pins.
  • Micro-Interactions: Clicking a pin zooms into the category view, revealing trending providers and subscription plans.
  • Color Shifts: Accent colors (#FBD802 and #008AFF) subtly pulse on hover to guide user attention.
  • User Experience: The map creates an engaging first impression, making the platform feel alive and connected.
Page 5 of 8

7. Non-Functional Requirements

  • Scalability: Support multi-city operations within provinces and global expansion.
  • Performance: Ensure fast load times and smooth interactions, even with high traffic.
  • Security: Implement robust authentication and data encryption.
  • Responsiveness: Optimize for mobile-first design while ensuring seamless web experience.
  • Accessibility: Adhere to WCAG standards for inclusive design.

8. Tech Stack

Frontend:

  • React for Web
  • React Native for Mobile App

Backend:

  • Python
  • FastAPI

Database:

  • MySQL or MariaDB (with Alembic for migrations)
Page 6 of 8

AI Models:

  • GPT 5.4 for user-friendly responses
  • Claude 4.6 Opas for coding and academic tasks

AI Tools:

  • Litellm for LLM Routing
  • Langchain

Orchestration:

  • Docker and docker-compose for local development
  • Kubernetes for server-side orchestration

9. Assumptions and Constraints

  • The platform will initially focus on the Indian market, with scalability for global expansion.
  • Location filtering will default to provinces (e.g., Ontario, Canada) and later expand to cities.
  • No delivery tracking or logistics features will be included.
  • The design will prioritize mobile-first responsiveness.
Page 7 of 8

10. Glossary

  • Regular Users: Customers exploring and subscribing to food services.
  • Service Providers: Foodpreneurs offering services such as tiffin, catering, and bakery products.
  • Tiffin Plans: Subscription-based meal services.
  • Food Ecosystem Map: Interactive map showcasing food categories and providers.
  • Filters: Search refinement options such as cuisine, price, and rating.
Page 8 of 8

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View Homepage
Login: Sign In
Signup: Create Account
Home: Browse Categories
Search: Filter Results
Listing: View Providers
Provider: View Details
Provider: Save Provider
Subscription: Subscribe Plan
Dashboard: Manage Subscriptions

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View Homepage
Login: Sign In
Signup: Create Account
Home: Browse Categories
Search: Filter Results
Listing: View Providers
Provider: View Details
Provider: Save Provider
Subscription: Subscribe Plan
Dashboard: Manage Subscriptions