← back to Angels Flowers
DESIGN_SYSTEM.md
1008 lines
# Angel's Flowers - UI/UX Design System
## Family-Run Ecuadorian Flower Shop | East Los Angeles
---
## 1. VISUAL DESIGN DIRECTION
### Color Palette
#### Primary Colors
```css
--primary-rose: #D84B6C; /* Ecuadorian Rose Pink - Primary CTA */
--primary-rose-dark: #B83A56; /* Hover states */
--primary-rose-light: #F0869D; /* Accents, backgrounds */
--primary-rose-pale: #FDF2F4; /* Light backgrounds */
```
#### Secondary Colors (Ecuadorian Flora Inspired)
```css
--tropical-green: #2D5F3F; /* Foliage, trust, growth */
--tropical-green-light: #4A8B5F;/* Secondary elements */
--sunflower-gold: #F4C430; /* Warmth, celebration */
--orchid-purple: #8B4789; /* Elegance, premium flowers */
--sky-blue: #87CEEB; /* Fresh, calming */
```
#### Neutral Palette
```css
--warm-white: #FDFBF7; /* Background */
--cream: #F5F1E8; /* Section dividers */
--warm-gray: #6B6B6B; /* Body text */
--charcoal: #2C2C2C; /* Headlines */
--soft-shadow: rgba(45, 95, 63, 0.08); /* Card shadows */
```
#### Semantic Colors
```css
--success: #4A8B5F; /* Order confirmation */
--error: #D84B6C; /* Validation errors */
--warning: #F4C430; /* Low stock alerts */
--info: #87CEEB; /* Informational messages */
```
**Design Rationale**: The palette draws from Ecuador's vibrant flora - roses, tropical foliage, and orchids. The warm neutrals create approachability while maintaining sophistication comparable to 800flowers.
---
### Typography
#### Font Families
```css
/* Headings - Elegant yet readable */
--font-heading: 'Cormorant Garamond', 'Georgia', serif;
/* Body - Modern, clean, accessible */
--font-body: 'Inter', 'Helvetica Neue', sans-serif;
/* Accent - For special callouts */
--font-accent: 'Playfair Display', serif;
```
#### Type Scale
```css
/* Desktop */
--text-5xl: 3.5rem; /* 56px - Hero headlines */
--text-4xl: 2.5rem; /* 40px - Page titles */
--text-3xl: 2rem; /* 32px - Section headings */
--text-2xl: 1.5rem; /* 24px - Card titles */
--text-xl: 1.25rem; /* 20px - Subheadings */
--text-lg: 1.125rem; /* 18px - Large body */
--text-base: 1rem; /* 16px - Body text */
--text-sm: 0.875rem; /* 14px - Captions, labels */
--text-xs: 0.75rem; /* 12px - Small print */
/* Line Heights */
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
```
**Design Rationale**: Serif headings provide elegance and tradition (family business), while sans-serif body text ensures readability across devices. Inter has excellent accessibility characteristics.
---
### Overall Aesthetic
**Design Pillars**:
1. **Elegant Heritage** - Respect for craftsmanship and Ecuadorian tradition
2. **Warm Family Connection** - Personal, trustworthy, community-oriented
3. **Vibrant Freshness** - Celebrating the beauty of living flowers
4. **Modern Professionalism** - Competitive with major online florists
5. **Accessible Inclusivity** - Welcoming to all East LA community members
**Visual Language**:
- Soft, organic shapes (rounded corners 8-16px)
- Generous whitespace (breathing room like flower arrangements)
- High-quality photography with natural lighting
- Subtle animations (gentle fades, smooth transitions)
- Card-based layouts with gentle shadows
- Floral accent illustrations (hand-drawn, watercolor style)
---
## 2. WEBSITE STRUCTURE & NAVIGATION
### Main Navigation Menu
#### Desktop Navigation (Sticky Header)
```
[Angel's Flowers Logo] | Shop Flowers | Occasions | About Us | Gallery | Contact | [Search Icon] [Cart (0)]
```
#### Menu Structure
1. **Shop Flowers** (Mega Menu)
- By Type: Roses | Orchids | Lilies | Mixed Bouquets | Tropical Flowers
- By Color: Red | Pink | White | Yellow | Purple | Mixed
- By Price: Under $50 | $50-$100 | $100-$150 | Premium $150+
- Featured: Best Sellers | New Arrivals | Ecuadorian Specialty
2. **Occasions** (Dropdown)
- Birthdays
- Anniversaries
- Weddings & Quinceañeras
- Sympathy & Funerals
- Just Because
- Corporate Events
3. **About Us**
- Our Story
- Our Family
- Ecuador Connection
- Community Involvement
- Testimonials
4. **Gallery**
- Recent Work
- Weddings
- Events
- Daily Arrangements
5. **Contact**
- Visit Our Shop
- Hours & Location
- Request Custom Order
- FAQ
#### Mobile Navigation (Hamburger Menu)
- Same structure, collapsible accordion style
- Prominent "Call Now" button at top
- Cart icon always visible in header
---
### Homepage Layout Sections
```
┌─────────────────────────────────────────┐
│ STICKY HEADER - Logo, Nav, Cart │
├─────────────────────────────────────────┤
│ │
│ 1. HERO SECTION │
│ Full-width background image │
│ Headline + Subheadline + CTA │
│ "Ecuadorian Flowers, East LA Roots" │
│ │
├─────────────────────────────────────────┤
│ 2. VALUE PROPOSITIONS │
│ [Icon] Fresh Daily [Icon] Family-Owned │
│ [Icon] Custom Designs [Icon] Same-Day │
├─────────────────────────────────────────┤
│ 3. SHOP BY OCCASION │
│ Card Grid: Birthdays, Weddings, etc. │
├─────────────────────────────────────────┤
│ 4. FEATURED FLOWERS │
│ Product carousel - Best sellers │
│ Price, quick view, add to cart │
├─────────────────────────────────────────┤
│ 5. FAMILY STORY SECTION │
│ Split: Family Photo | Story Text │
│ "From Ecuador to East LA" │
│ CTA: "Read Our Story" │
├─────────────────────────────────────────┤
│ 6. ECUADORIAN DIFFERENCE │
│ Why Ecuadorian flowers are special │
│ Image gallery with educational content │
├─────────────────────────────────────────┤
│ 7. INSTAGRAM FEED / RECENT WORK │
│ "See Our Latest Creations" │
│ 6-8 image grid with social links │
├─────────────────────────────────────────┤
│ 8. CUSTOMER TESTIMONIALS │
│ Carousel of reviews with photos │
│ Star ratings, names, occasions │
├─────────────────────────────────────────┤
│ 9. LOCATION & CONTACT │
│ Google Map embed │
│ Hours, Phone, Address, Directions │
├─────────────────────────────────────────┤
│ FOOTER │
│ Links, Social, Newsletter, Legal │
└─────────────────────────────────────────┘
```
---
### User Flow: Browsing & Ordering Flowers
#### Primary User Journey
```
1. LANDING
└─> Homepage Hero
├─> Browse by Occasion (Birthday clicked)
└─> Featured Products visible
2. DISCOVERY
└─> Birthday Flowers Category Page
├─> Filter by Price/Color
├─> Sort by Popularity/Price
└─> View Product Card
3. EVALUATION
└─> Product Detail Page
├─> Multiple photos (zoom)
├─> Description, size options
├─> Reviews & ratings
├─> "You may also like"
└─> Add to Cart CTA
4. CUSTOMIZATION (Optional)
└─> Add to Cart Modal
├─> Select size/upgrade
├─> Add greeting card message
├─> Select delivery date
└─> Confirm addition
5. CART REVIEW
└─> Shopping Cart
├─> Edit quantities/remove
├─> Apply promo code
├─> View delivery fee
└─> Proceed to Checkout
6. CHECKOUT
└─> Multi-step form
├─> Step 1: Delivery Info
├─> Step 2: Delivery Date/Time
├─> Step 3: Payment
└─> Order Review
7. CONFIRMATION
└─> Thank You Page
├─> Order number
├─> Receipt email sent
├─> Expected delivery
└─> Share on social CTA
8. POST-PURCHASE
└─> Follow-up
├─> Order tracking page
├─> Delivery notification
└─> Review request email
```
#### Alternative User Flows
- **Quick Shop**: Homepage → Featured Product → Quick View Modal → Add to Cart
- **Custom Order**: Homepage → Contact → Custom Request Form → Phone Consultation
- **Phone Order**: Any page → Sticky "Call Now" button → Phone order
- **Walk-in Coordination**: Location page → Directions → Visit shop
---
## 3. KEY UI COMPONENTS
### Hero Section Design Concept
**Layout**: Full-width, full-viewport height (min-height: 600px)
**Structure**:
```
┌────────────────────────────────────────────────────┐
│ │
│ [Background: Lush flower arrangement photo] │
│ │
│ ┌──────────────────────────────┐ │
│ │ Angel's Flowers │ │
│ │ Ecuadorian Blooms, │ │
│ │ East LA Roots │ │
│ │ │ │
│ │ Fresh arrangements crafted │ │
│ │ with love for over 20 years│ │
│ │ │ │
│ │ [Shop Flowers] [Our Story] │ │
│ └──────────────────────────────┘ │
│ │
│ ↓ Scroll indicator │
└────────────────────────────────────────────────────┘
```
**Design Specifications**:
- Background image: 80% opacity overlay with gradient (bottom to top, dark to transparent)
- Text container: Centered, max-width 700px, padding 2rem
- Headline: 56px Cormorant Garamond, white, drop shadow for legibility
- Subheadline: 20px Inter, warm-white, line-height 1.75
- CTAs: Primary button (rose) + Secondary outline button
- Subtle parallax scroll effect on background image
- Mobile: Stack text, reduce font sizes, 70% viewport height
**Photography Direction**:
- Hero image rotates weekly
- Should show complete arrangements (not just flowers)
- Warm, natural lighting
- Shallow depth of field
- Include subtle brand elements (ribbon, card)
---
### Flower Product Cards
**Card Design**:
```
┌─────────────────────────┐
│ │
│ [Product Photo] │
│ │
│ ♡ Quick View │ ← Hover overlay
├─────────────────────────┤
│ Rose Romance Bouquet │ ← Title
│ ★★★★★ (24 reviews) │ ← Rating
│ │
│ From $65.00 │ ← Price
│ │
│ [Add to Cart Button] │
└─────────────────────────┘
```
**Specifications**:
- Card dimensions: 280px x 420px (desktop), responsive
- Border-radius: 12px
- Shadow: 0 2px 8px rgba(45, 95, 63, 0.08)
- Hover: Lift effect (translateY -4px, stronger shadow)
- Image aspect ratio: 4:5 (portrait)
- Image hover: Slight zoom (1.05x scale)
- Quick View: Modal overlay with larger images + details
- Favorite icon: Save to wishlist functionality
- Badge system: "Best Seller", "New", "Sale" corner ribbons
**Card States**:
- Default: Subtle shadow, clear imagery
- Hover: Elevated, overlay with quick view
- Loading: Skeleton placeholder with shimmer
- Out of Stock: Grayscale filter, "Notify Me" button
**Product Grid Layout**:
- Desktop: 4 columns (with sidebar filters) or 3 columns (full-width)
- Tablet: 3 columns or 2 columns
- Mobile: 2 columns (portrait) or 1 column (small devices)
- Gap: 24px between cards
---
### Family Story Section
**Layout**: Split 50/50 (Image | Content)
```
┌──────────────────────────────────────────────────────┐
│ │
│ ┌─────────────────┐ ┌─────────────────────────┐ │
│ │ │ │ Our Family Story │ │
│ │ [Family Photo] │ │ │ │
│ │ │ │ For over 20 years, │ │
│ │ Warm, candid │ │ we've brought the │ │
│ │ shot in shop │ │ beauty of Ecuadorian │ │
│ │ with flowers │ │ flowers to East LA... │ │
│ │ │ │ │ │
│ │ │ │ [Read Full Story →] │ │
│ └─────────────────┘ └─────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────┘
```
**Design Specifications**:
- Section background: Warm cream (#F5F1E8)
- Image: Rounded corners 16px, natural framing
- Content padding: 4rem (generous whitespace)
- Heading: 40px Cormorant Garamond, charcoal
- Body text: 18px Inter, warm-gray, leading-relaxed
- Decorative element: Subtle watercolor flower illustration behind text
- CTA: Text link with arrow, primary-rose color
- Mobile: Stack image on top, full-width
**Content Guidelines**:
- 150-200 words for homepage version
- Focus on emotional connection and heritage
- Mention Ecuador origins and LA community ties
- Include specific family member names
- Link to full "About Us" page for complete story
---
### Gallery/Catalog Layout
**Gallery Grid Design**:
```
┌─────────────────────────────────────────────────┐
│ Our Recent Work │
│ [Filter: All | Weddings | Birthdays | Events] │
├─────────────────────────────────────────────────┤
│ │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │
│ │ 1 │ │ 2 │ │ 3 │ │ 4 │ ← Masonry │
│ │ │ └────┘ │ │ │ │ style grid │
│ └────┘ ┌────┐ │ │ └────┘ │
│ ┌────┐ │ 5 │ └────┘ ┌────┐ │
│ │ 6 │ │ │ ┌────┐ │ 7 │ │
│ │ │ └────┘ │ 8 │ │ │ │
│ │
│ [Load More] │
└─────────────────────────────────────────────────┘
```
**Specifications**:
- Layout: Masonry grid (Pinterest-style) using CSS Grid or library
- Column count: 4 (desktop), 3 (tablet), 2 (mobile)
- Gap: 16px
- Image aspect ratios: Variable (natural dimensions)
- Hover overlay: Dark gradient with arrangement name + occasion
- Click: Opens lightbox with larger image + details
- Lazy loading: Images load as user scrolls
- Filter animation: Smooth fade in/out (300ms)
**Lightbox Features**:
- Full-screen image viewing
- Previous/Next navigation
- Image caption: Occasion, date, description
- "Request Similar" CTA button
- Share to social media icons
- Keyboard navigation (arrow keys, ESC)
- Touch gestures (swipe) for mobile
---
## 4. ACCESSIBILITY & RESPONSIVENESS
### Accessibility Requirements (WCAG 2.1 AA Compliance)
#### Color & Contrast
- All text meets 4.5:1 contrast ratio minimum
- Primary CTA buttons: 7:1 contrast ratio
- Focus indicators: 3:1 contrast against background
- No reliance on color alone for information
- Test with color blindness simulators
#### Keyboard Navigation
- All interactive elements keyboard accessible
- Logical tab order throughout site
- Visible focus indicators (2px solid outline, primary-rose)
- Skip to main content link
- Modal dialogs trap focus appropriately
- Escape key closes modals/overlays
#### Screen Reader Support
- Semantic HTML5 elements (`<nav>`, `<main>`, `<article>`)
- ARIA labels for icon buttons
- ARIA live regions for dynamic content (cart updates, form errors)
- Alt text for all images (descriptive, not keyword-stuffed)
- Product images: "Red rose bouquet with 24 long-stem roses in glass vase"
- Decorative images: `alt=""` (empty alt attribute)
- Form labels properly associated with inputs
- Error messages clearly announced
#### Interactive Elements
- Minimum touch target: 44x44px (Apple/Google guidelines)
- Button text clearly describes action
- Links have descriptive text (avoid "click here")
- Form validation: Real-time, clear error messages
- Required fields marked with text + asterisk
- Loading states announced to screen readers
#### Content Structure
- Proper heading hierarchy (single H1, sequential H2-H6)
- Landmarks for major page sections
- Lists use proper `<ul>`, `<ol>`, `<li>` markup
- Tables (if used) have proper headers and captions
- Consistent navigation across all pages
#### Media Accessibility
- All videos have captions
- Transcripts provided for audio content
- Avoid auto-playing media (or provide pause control)
- Animations respect `prefers-reduced-motion`
---
### Responsive Design Breakpoints
```css
/* Mobile-first approach */
/* Extra small devices (portrait phones) */
@media (min-width: 320px) {
/* Base styles - 1 column layouts */
--container-padding: 1rem;
--grid-columns: 1;
}
/* Small devices (landscape phones) */
@media (min-width: 576px) {
/* 2 column product grids possible */
--container-padding: 1.5rem;
--grid-columns: 2;
}
/* Medium devices (tablets) */
@media (min-width: 768px) {
/* 3 column layouts, side-by-side content */
--container-padding: 2rem;
--grid-columns: 3;
/* Show expanded navigation */
}
/* Large devices (desktops) */
@media (min-width: 1024px) {
/* Full desktop experience */
--container-padding: 3rem;
--grid-columns: 4;
/* Mega menus active */
}
/* Extra large devices (large desktops) */
@media (min-width: 1440px) {
/* Max container width: 1400px */
/* Larger hero images */
--container-max-width: 1400px;
}
```
#### Mobile-Specific Optimizations
- Hamburger menu with smooth slide-in animation
- Bottom-fixed "Call Now" button (sticky)
- Simplified product filters (drawer overlay)
- Touch-friendly carousels with swipe gestures
- Single-column checkout flow
- Large, thumb-friendly form inputs
- Click-to-call phone numbers (`tel:` links)
- Click-to-navigate addresses (`maps:` links)
#### Tablet Considerations
- Hybrid navigation (burger menu or abbreviated nav bar)
- 2-3 column product grids
- Sidebar filters can be toggled
- Side-by-side content sections
- Larger touch targets maintained
#### Performance Optimizations
- Images: Modern formats (WebP, AVIF) with fallbacks
- Responsive images: `srcset` with multiple sizes
- Lazy loading for below-fold images
- Critical CSS inlined in `<head>`
- Deferred JavaScript loading
- Font subsetting for faster loads
- CDN delivery for static assets
- Target: Lighthouse score 90+ on all metrics
---
## 5. DESIGN SYSTEM RECOMMENDATIONS
### Technology Stack
#### Framework & Component Library
**Recommended: Next.js + Tailwind CSS + shadcn/ui**
**Rationale**:
1. **Next.js** (React framework)
- Server-side rendering for SEO
- Image optimization built-in
- File-based routing
- API routes for backend functionality
- Excellent performance out of the box
2. **Tailwind CSS** (Utility-first CSS)
- Rapid development
- Consistent design tokens
- Built-in responsive utilities
- Easy customization for brand colors
- Smaller CSS bundle (purges unused styles)
3. **shadcn/ui** (Component library)
- Accessible by default (Radix UI primitives)
- Customizable (not a dependency, copy/paste)
- Consistent with modern design practices
- TypeScript support
- Excellent documentation
#### Alternative Stack (Budget-Friendly)
**Astro + Tailwind + Alpine.js**
- Static site generation (faster, cheaper hosting)
- Partial hydration (only interactive parts use JS)
- Great for content-heavy sites
- Can integrate payment forms via embeds
---
### Component Library Structure
```
/components
/ui (shadcn/ui base components)
- button.tsx
- card.tsx
- input.tsx
- dialog.tsx
- dropdown-menu.tsx
- carousel.tsx
- badge.tsx
- toast.tsx
/layout
- header.tsx
- footer.tsx
- navigation.tsx
- mobile-menu.tsx
- container.tsx
/product
- product-card.tsx
- product-grid.tsx
- product-detail.tsx
- product-quick-view.tsx
- product-filter.tsx
- add-to-cart-button.tsx
/marketing
- hero-section.tsx
- value-props.tsx
- family-story.tsx
- testimonial-carousel.tsx
- instagram-feed.tsx
- occasion-cards.tsx
/cart
- cart-drawer.tsx
- cart-item.tsx
- cart-summary.tsx
/checkout
- checkout-form.tsx
- delivery-options.tsx
- payment-form.tsx
/shared
- logo.tsx
- search-bar.tsx
- breadcrumbs.tsx
- loading-skeleton.tsx
- error-boundary.tsx
```
---
### Design Token Configuration
**Tailwind Config** (`tailwind.config.js`):
```javascript
module.exports = {
theme: {
extend: {
colors: {
// Brand colors
primary: {
DEFAULT: '#D84B6C',
dark: '#B83A56',
light: '#F0869D',
pale: '#FDF2F4',
},
secondary: {
green: '#2D5F3F',
'green-light': '#4A8B5F',
gold: '#F4C430',
purple: '#8B4789',
blue: '#87CEEB',
},
neutral: {
'warm-white': '#FDFBF7',
cream: '#F5F1E8',
'warm-gray': '#6B6B6B',
charcoal: '#2C2C2C',
},
},
fontFamily: {
heading: ['Cormorant Garamond', 'Georgia', 'serif'],
body: ['Inter', 'Helvetica Neue', 'sans-serif'],
accent: ['Playfair Display', 'serif'],
},
fontSize: {
'5xl': '3.5rem',
'4xl': '2.5rem',
'3xl': '2rem',
'2xl': '1.5rem',
'xl': '1.25rem',
'lg': '1.125rem',
'base': '1rem',
'sm': '0.875rem',
'xs': '0.75rem',
},
borderRadius: {
'soft': '8px',
'medium': '12px',
'large': '16px',
},
boxShadow: {
'soft': '0 2px 8px rgba(45, 95, 63, 0.08)',
'medium': '0 4px 16px rgba(45, 95, 63, 0.12)',
'large': '0 8px 32px rgba(45, 95, 63, 0.16)',
},
animation: {
'fade-in': 'fadeIn 0.3s ease-in-out',
'slide-up': 'slideUp 0.4s ease-out',
'slide-in': 'slideIn 0.3s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideIn: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(0)' },
},
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
};
```
---
### Iconography
**Recommended: Lucide React** (formerly Feather Icons)
- Clean, consistent style
- Tree-shakeable (only bundle used icons)
- React components
- Accessible by default
**Icon Usage**:
- Navigation: Menu, Search, ShoppingCart, User, Phone
- Features: Truck (delivery), Heart (favorites), Star (ratings)
- Social: Facebook, Instagram, Twitter
- Actions: Plus, Minus, X (close), ChevronDown, ChevronRight
- Info: Info, AlertCircle, CheckCircle
**Custom Icons**:
- Angel's Flowers logo (SVG)
- Flower type icons (rose, orchid, lily) - custom illustrated
---
### Animation Guidelines
**Principles**:
- Subtle and purposeful
- Never block user interaction
- Respect `prefers-reduced-motion`
- Smooth transitions (ease-in-out curves)
**Common Animations**:
```css
/* Button hover */
transition: all 0.2s ease-in-out;
/* Card hover */
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* Modal entrance */
@keyframes modal {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Page transitions */
transition: opacity 0.3s ease-in-out;
/* Loading skeleton shimmer */
@keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
```
---
### Photography & Imagery Guidelines
**Product Photography**:
- Resolution: Minimum 1200x1500px
- Format: WebP with JPG fallback
- Aspect ratio: 4:5 (portrait)
- Background: Clean white or soft neutral
- Lighting: Bright, natural, diffused
- Angles: Straight-on and 45-degree options
- Include size reference (person holding, ruler)
**Lifestyle Photography**:
- Show flowers in context (events, homes)
- Feature diverse people and settings
- Natural, candid moments
- Warm color grading
- East LA community representation
**Family & Team Photos**:
- Candid, authentic moments in shop
- High-quality but not overly formal
- Show interaction with flowers/customers
- Inclusive representation of family members
**Image Optimization**:
- Compress without quality loss (80-85% quality)
- Use modern formats (WebP, AVIF)
- Provide multiple sizes via `srcset`
- Lazy load below-fold images
- Use blur-up placeholders while loading
---
## IMPLEMENTATION PRIORITIES
### Phase 1: Foundation (Weeks 1-2)
- [ ] Set up Next.js + Tailwind + shadcn/ui
- [ ] Implement design tokens and global styles
- [ ] Create base layout components (Header, Footer)
- [ ] Build homepage hero section
- [ ] Implement responsive navigation
### Phase 2: Core Content (Weeks 3-4)
- [ ] Product card component
- [ ] Product grid with filtering
- [ ] Product detail page
- [ ] Family story section
- [ ] About Us page
- [ ] Gallery/portfolio page
### Phase 3: E-commerce (Weeks 5-6)
- [ ] Shopping cart functionality
- [ ] Checkout flow (if applicable)
- [ ] Payment integration (Stripe/Square)
- [ ] Order confirmation
- [ ] Custom order request form
### Phase 4: Polish & Launch (Weeks 7-8)
- [ ] Accessibility audit and fixes
- [ ] Performance optimization
- [ ] SEO optimization
- [ ] Mobile testing on real devices
- [ ] Content population
- [ ] Soft launch and feedback
- [ ] Official launch
---
## SUCCESS METRICS
**User Experience Metrics**:
- Time to first interaction < 2 seconds
- Product page load time < 1.5 seconds
- Mobile navigation discoverable within 5 seconds
- Checkout completion rate > 70%
- Average session duration > 3 minutes
**Accessibility Metrics**:
- WCAG 2.1 AA compliance: 100%
- Lighthouse accessibility score: 95+
- Keyboard navigation: All functions accessible
- Screen reader testing: Zero critical issues
**Performance Metrics**:
- Lighthouse performance score: 90+
- First Contentful Paint: < 1.5s
- Largest Contentful Paint: < 2.5s
- Cumulative Layout Shift: < 0.1
- Mobile page speed: 80+
**Business Metrics**:
- Inquiry/order form submissions (track increase)
- Phone call clicks from mobile
- Time spent on "Our Story" page
- Gallery engagement rate
- Returning visitor rate
---
## DESIGN FILES & RESOURCES
**Required Deliverables**:
1. High-fidelity mockups (Figma)
- Homepage (desktop, tablet, mobile)
- Product listing page
- Product detail page
- About Us page
- Contact page
2. Component library (Figma)
- All UI components documented
- Interaction states shown
- Spacing and typography specs
3. Style guide documentation
- Color palette with hex codes
- Typography scale
- Icon library
- Animation specifications
4. User flow diagrams
- Primary user journeys mapped
- Decision points identified
- Alternative paths documented
5. Content guidelines
- Voice and tone guide
- Photography specifications
- Copy templates for product descriptions
---
## NOTES FOR DEVELOPERS
**Code Quality Standards**:
- TypeScript for type safety
- ESLint + Prettier for consistent formatting
- Component documentation with Storybook
- Unit tests for critical functions
- E2E tests for checkout flow
**SEO Considerations**:
- Semantic HTML throughout
- Meta tags for all pages
- Open Graph images for social sharing
- Schema.org markup for products
- XML sitemap
- robots.txt configuration
**Analytics Integration**:
- Google Analytics 4
- Facebook Pixel (if using FB ads)
- Hotjar or similar for heatmaps
- Custom event tracking for key actions
---
## COMPETITIVE BENCHMARK: 800flowers Comparison
**What to Emulate**:
- Clean, uncluttered product presentation
- Clear hierarchy and navigation
- Robust filtering and search
- Professional product photography
- Trust signals (reviews, guarantees)
- Smooth checkout process
**Where to Differentiate**:
- Emphasize family story and personal touch
- Highlight Ecuadorian flower quality/uniqueness
- Stronger community connection (East LA pride)
- More intimate, boutique feel vs. corporate
- Potentially more flexible custom orders
- Local delivery emphasis vs. national shipping
**Competitive Advantages**:
- Authentic family business story
- Unique Ecuadorian flower expertise
- Local East LA community roots
- Personal customer service
- Fresh flowers (not shipped long distances)
- Custom arrangement flexibility
---
## CONCLUSION
This design system prioritizes creating an emotional connection with visitors while maintaining the professional polish of industry leaders like 800flowers. The warm, family-oriented aesthetic paired with modern, accessible design patterns will position Angel's Flowers as both a trusted local institution and a competitive online florist.
The Ecuadorian heritage should be celebrated throughout the design - in color choices, imagery, and storytelling - making it a unique selling proposition rather than just a backstory.
Every design decision should ask: "Does this make the visitor feel welcome, does it showcase our flowers beautifully, and does it make ordering easy?"
---
**Document Version**: 1.0
**Last Updated**: 2025-11-10
**Status**: Ready for Design & Development