MORPHO System Requirements Document

1. Introduction

MORPHO is a premium Sri Lankan T-shirt brand aiming to develop a modern, responsive e-commerce website. This platform will allow both local and international customers to browse, customize, and purchase T-shirts, maintaining a premium visual identity.

2. System Overview

The MORPHO e-commerce website will offer a seamless shopping experience with features tailored to both Sri Lankan and international customers. The site will support currency selection, product customization, and a comprehensive shopping journey from discovery to order placement.

2a. Source Content Inventory

• Product Categories: Oversized T-Shirts, Raglan T-Shirts
• Currency Options: LKR for Sri Lankan customers, USD for international customers
• Visual Identity: Premium black/navy, white, and gold

3. Functional Requirements as Story Points

• As a Customer, I should be able to select my country/region to shop in the appropriate currency.
• As a Customer, I should be able to browse and choose between Oversized and Raglan T-shirts.
• As a Customer, I should be able to filter, sort, search, and wishlist products by color, size, category, and design.
• As a Customer, I should be able to view detailed product information including images, description, price, reviews, and available options.
• As a Customer, I should be able to customize T-shirts by choosing type/color, uploading artwork, adding text, and previewing the design.
• As a Customer, I should be able to manage items in my cart, calculate totals, and proceed to checkout.
• As a Customer, I should be able to enter shipping information, select delivery/payment methods, and place orders securely.
• As a Customer, I should be able to create an account, view order history, save details, and track orders.
• As a Customer, I should be able to access customer support, contact forms, business information, and FAQs.
• As a Visitor, I should be able to learn about MORPHO's story, quality, identity, and vision.

4. User Personas

• Local Customer: Shops in LKR, interested in local shipping and easy returns.
• International Customer: Shops in USD, interested in global shipping and secure payments.
• Visitor: Browses the site for information about MORPHO and its products.

5. Core User Flows

• Discover: User lands on the homepage -> selects region -> views featured content.
• Shop/Customize: User chooses product category -> browses listings -> customizes a T-shirt.
• Select Product: User views product details -> adds to cart.
• Cart: User reviews cart items -> proceeds to checkout.
• Checkout: User enters shipping/payment details -> places order.
• Order: User receives confirmation -> tracks order status.

6. Visuals Colors and Theme

• primary: #000000 (Black)
• primary_light: #1a1a1a (Dark Gray)
• secondary: #001f3f (Navy)
• accent: #FFD700 (Gold)
• highlight: #FFA500 (Orange)
• bg: #FFFFFF (White)
• surface: #F8F8F8 (Light Gray)
• text: #000000 (Black)
• text_muted: #666666 (Gray)
• border: #DDDDDD (Light Gray)

7. Signature Design Concept

The MORPHO website will feature an interactive homepage that showcases a dynamic T-shirt customization experience. As users scroll, they will see a T-shirt morphing through various designs and colors, reflecting the customization options available. This will be achieved using motion/react for smooth animations and transitions. Users can click to pause the animation and interact with customization tools directly on the homepage.

LANDING HERO MOTION BRIEF

The landing hero will feature a continuous loop where a plain T-shirt is gradually transformed through user-selected designs and colors. The animation will highlight the customization process, showing the T-shirt changing as users upload artwork or add text. The loop will last 10 seconds, with a clear start and end point, emphasizing the ease and creativity of the customization process.

8. Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• Description: The homepage will feature moderate scroll-triggered reveals and hover transitions, with spring physics applied to interactive elements. This will create a polished and engaging user experience, suitable for a feature-rich e-commerce platform.

9. Non-Functional Requirements

• The website MUST be mobile-first and responsive.
• The platform SHALL emphasize secure payments and easy returns.
• The site MUST support both local and global shipping options.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB
• AI Models: Not specified
• Local Orchestration: Docker, docker-compose
• Server-Side Orchestration: Kubernetes

11. Assumptions and Constraints

• The website will primarily target Sri Lankan and international markets.
• Currency conversion rates will be managed externally.
• The customization feature will support image uploads and text additions.

12. Glossary

• LKR: Sri Lankan Rupee
• USD: United States Dollar
• Responsive Design: A design approach that ensures the website functions well on various devices and screen sizes.