Garden Indian Restaurant

Project Overview

This project involved redesigning the Garden Indian Restaurant website to create a modern, user-friendly experience that works well across all devices. The focus was on improving visual design, implementing an online ordering system with localStorage integration, and creating a booking system for table reservations.

Design Approach

The design approach prioritized creating a visually appealing website that also provides excellent usability and accessibility. A mobile-first methodology was used to ensure the site works well on all devices.

Key Design Principles

• Simplicity: Clean, uncluttered layouts with clear visual hierarchy
• Consistency: Uniform design patterns across all pages
• Feedback: Visual cues that respond to user interactions
• Accessibility: Design accommodations for users with disabilities
• Performance: Optimized assets and minimal dependencies

Visual Design

Color Palette

The color palette was carefully selected to represent the rich, vibrant nature of Indian cuisine while maintaining good contrast for accessibility:

Typography

The typography choices aim to balance elegance with readability:

• Headings: Georgia (serif) for a touch of elegance
• Body Text: Segoe UI/Helvetica Neue (sans-serif) for excellent readability
• Scale: A modular type scale ensures consistent sizing hierarchy

Imagery

The images were selected to showcase the restaurant's food and ambiance authentically. Photos were optimized for web delivery and designed to be responsive. Alt text was added to all images for accessibility.

Layout and Responsiveness

The layout uses modern CSS techniques to create a fully responsive experience:

Layout Techniques

• CSS Grid: Used for major page sections and complex layouts
• Flexbox: Used for components and alignment within sections
• CSS Variables: Used for consistent spacing, colors, and transitions

Responsive Breakpoints

The site uses three main breakpoints to optimize the experience across different devices:

• Mobile: Up to 480px
• Tablet: 481px to 768px
• Desktop: 769px to 992px
• Large Desktop: 993px and above

Mobile-Specific Considerations

For mobile devices, we implemented:

• Larger touch targets for buttons and controls
• Simplified navigation with a hamburger menu
• Single-column layouts to maximize readability
• Optimized form inputs for touch interaction

Menu and Ordering System

The online ordering system was designed to make it easy for customers to browse the menu and place orders:

Key Features

• Categorized Menu: Clear organization by food categories
• Filtering System: Allow users to filter items by category
• Visual Presentation: Food images and descriptions to entice customers
• Quantity Controls: Intuitive controls for adding items to order
• Real-time Order Summary: Dynamic updates as items are added/removed
• Form Validation: Clear feedback on required fields and errors

Implementation Details

The ordering system was implemented using vanilla JavaScript with jQuery for DOM manipulation. CSS Grid was used for the menu layout to ensure responsiveness.

localStorage Implementation

The localStorage API was used to persist user data between sessions, offering several benefits:

Benefits of localStorage

• Persistence: Data remains available even after browser close
• Privacy: Data stays on the user's device only
• Performance: No server requests needed to retrieve saved data
• Simplicity: Easy implementation without backend requirements

localStorage Usage

The following data is stored in localStorage:

• Current Order: Items in the user's current order
• Saved Order: Order explicitly saved by the user
• Last Order: Most recently completed order
• Customer Details: Name, phone, email (for convenience)

Implementation Code Example

// Save order to localStorage
function saveOrderToStorage() {
    const currentOrder = {
        orderItems: orderItems,
        orderTotal: orderTotal,
        lastUpdated: new Date().toISOString()
    };
    localStorage.setItem('currentOrder', JSON.stringify(currentOrder));
}

// Load order from localStorage
function loadOrderFromStorage() {
    const savedOrder = localStorage.getItem('savedOrder');
    if (savedOrder) {
        const orderData = JSON.parse(savedOrder);
        orderItems = orderData.orderItems || [];
        updateOrderDisplay();
    }
}

Accessibility Improvements

Accessibility was a key consideration throughout the design and development process:

Accessibility Features

• Semantic HTML: Proper use of headings, landmarks, and semantic elements
• ARIA Attributes: Added to enhance screen reader compatibility
• Keyboard Navigation: Fully navigable without a mouse
• Focus Management: Visible focus indicators for keyboard users
• Color Contrast: WCAG 2.1 AA compliant contrast ratios
• Text Alternatives: Alt text for images and descriptive link text
• Form Labels: All inputs have associated labels
• Error Handling: Clear error messages for form validation

JavaScript Functionality

JavaScript was used to create interactive features while ensuring fallbacks for users without JavaScript:

Key JavaScript Features

• Form Validation: Client-side validation with clear error messages
• Dynamic Content: Menu filtering and order updates
• localStorage Integration: Saving and loading user data
• Interactive UI: Buttons, toggles, and navigation enhancements
• Responsive Components: Elements that adapt to device and screen size

JavaScript Organization

The JavaScript code was organized into modular files by functionality:

• main.js: Common functionality used across the site
• takeaway.js: Order management and menu functionality
• booking.js: Booking form validation and submission

Performance Considerations

Several techniques were employed to ensure fast loading and smooth performance:

Performance Optimizations

• Minimal Dependencies: Only jQuery 3.5.1 as an external dependency
• Image Optimization: Images compressed for web delivery
• Lazy Loading: Images loaded only when needed
• CSS Organization: CSS separated by functionality
• Efficient Selectors: Optimized CSS and JavaScript selectors

Testing Process

Comprehensive testing was conducted to ensure quality across devices and browsers:

Testing Methodology

• Browser Testing: Chrome, Firefox, Safari, and Edge
• Device Testing: Desktop, tablet, and mobile devices
• Accessibility Testing: Screen reader compatibility and keyboard navigation
• Usability Testing: Testing with representative user tasks
• Validation: HTML and CSS validation

Conclusion

The redesigned Garden Indian Restaurant website represents a significant improvement over the original site. The modern design, responsive layout, and enhanced functionality create a better user experience for customers.

Key achievements include:

• A fully responsive design that works well across all devices
• An intuitive online ordering system with localStorage integration
• An accessible booking system for table reservations
• Improved visual design that better represents the restaurant's brand

These improvements will help the restaurant attract more customers, increase online orders, and provide a better overall digital experience.