UI Design
Aug 15th, 20247 min read

My UI Design Endeavors: The Story Behind the TNAU Botanical Garden Website

Exploring the journey from design to development, focusing on the tech stack choices that made it all possible.

The TNAU Botanical Garden website project was a unique opportunity to blend nature with technology, creating a digital experience that captures the essence of a physical garden.

Project Overview

Tamil Nadu Agricultural University's botanical garden needed a website that would:

  • Showcase the garden's plant collection
  • Provide educational resources
  • Enable virtual tours
  • Support event bookings

Design Philosophy

Inspiration: The garden itself

  • Organic shapes and flowing layouts
  • Green color palette with earthy accents
  • Photography-forward design
  • Calming, nature-inspired typography

Technical Decisions

Frontend: Next.js

  • Static generation for plant database
  • Image optimization built-in
  • Great developer experience

CMS: Sanity

  • Flexible content modeling for plant data
  • Real-time preview for content editors
  • Portable text for rich descriptions

Hosting: Vercel

  • Edge network for global visitors
  • Automatic deployments
  • Great analytics

Key Features

  1. Interactive Plant Database

    • Search and filter by characteristics
    • High-quality imagery
    • Botanical information
  2. Virtual Garden Tour

    • 360° panoramic views
    • Interactive hotspots
    • Audio descriptions
  3. Event System

    • Calendar integration
    • Online booking
    • Email notifications

Lessons Learned

  • Nature photography needs careful optimization
  • Educational content benefits from multiple formats
  • Accessibility is crucial for public institutions