Angelina’s Bracelets

Introduction

Angelina’s Bracelets is a small business focused on creating and selling custom and pre-made bracelets. The website will serve as a platform for customers to view available designs, contact the business for custom orders, and purchase bracelets directly online.

System Overview

The system will provide an online platform for Angelina’s Bracelets, allowing customers to browse available bracelet patterns and colors, place orders for pre-made bracelets, and contact the business for custom designs. The website will also include a checkout system for purchasing items.

Functional Requirements

• As a Customer, I should be able to view all available bracelet patterns and colors online, including 7 different string bracelet patterns and over 200 color options.
• As a Customer, I should be able to view and purchase pre-made bracelets directly from the website.
• As a Customer, I should be able to contact the business via text or email to request custom bracelet designs with specific patterns and colors.
• As a Customer, I should be able to complete a purchase using an online checkout system.

User Personas

• Customer: Individuals interested in purchasing bracelets, either pre-made or custom-designed, from Angelina’s Bracelets.

Core User Flows

• Customer visits the website -> Browses available patterns and colors -> Selects a pre-made bracelet -> Proceeds to checkout -> Completes purchase.
• Customer visits the website -> Browses available patterns and colors -> Contacts the business via text/email for a custom design -> Receives confirmation and payment instructions.

Visuals Colors and Theme

• primary: #8A2BE2 (Blue Violet)
• primary_light: #B19CD9 (Light Blue Violet)
• secondary: #FF6347 (Tomato)
• accent: #FFD700 (Gold)
• highlight: #FFA07A (Light Salmon)
• bg: #FFFFFF (White)
• surface: rgba(255, 255, 255, 0.9)
• text: #000000 (Black)
• text_muted: #696969 (Dim Gray)
• border: rgba(138, 43, 226, 0.2)

Signature Design Concept

The homepage will feature an interactive bracelet design studio. Users can drag and drop different beads and charms onto a virtual bracelet to visualize their custom design. The interface will use framer-motion for smooth animations and transitions, allowing users to see their bracelet come to life in real-time. This interactive experience will make the website engaging and memorable, encouraging users to experiment with different designs.

Interaction Model & Motion Direction

The landing page will use a "parallax" interaction model, providing a layered depth effect as users scroll through the page. This will create a visually rich experience, with decorative elements moving at different speeds to enhance the storytelling aspect of the brand. Internal pages will adopt a "static" model to ensure clarity and ease of use during the purchasing process.

Non-Functional Requirements

• The website should be responsive and accessible on all devices, including desktops, tablets, and smartphones.
• The system should ensure secure transactions and protect customer data.
• The website should load within 3 seconds to ensure a smooth user experience.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations

Assumptions and Constraints

• The website will primarily target customers in the US, with transactions conducted in USD.
• The business will handle customer communications and custom order confirmations manually.

Glossary

• Custom Design: A bracelet designed according to the customer's specific pattern and color preferences.
• Pre-made Bracelet: A bracelet that is already designed and available for immediate purchase.
• Checkout System: The online process through which customers complete their purchase transactions.