System & UI/UX Design Report
Information Architecture, Visual Design System, Form Specifications, Responsive Strategy, Security & SEO Engineering
Project: Efficient Overseas Study Abroad Web Modernization
Organization: Efficient Overseas (Bathinda, Punjab, India • Licence No. 1/CEA/CC-III)
Domain: Higher Education & International Immigration Consultancy
Technical Stack: Next.js 16 (App Router), React 19, TypeScript 5, CSS Modules
- Executive Summary & Design Philosophy
For an international education consultancy, digital design directly governs student and parent trust. The redesigned Efficient Overseas web platform was architected around a Trust-First, Content-Dense, Mobile-First philosophy. Every page emphasizes official government accreditation (Licence No. 1/CEA/CC-III), transparent institutional partnerships, and clear pathways to international visas. The design system eliminates dated, clutter-heavy patterns from the legacy ASP.NET site in favor of crisp typography, harmonious color palettes, micro-interactions, and accessible information hierarchy.
- Information Architecture & Navigation Structure
The application follows a clean, intuitive hierarchical tree organized logically around student intent:
- Visual Design System & Design Tokens
A bespoke design token system was implemented in globals.css using CSS custom properties:
- Primary Color Palette: Oxford Navy (hsl(214, 80%, 20%)) establishing authority; Royal Accent Blue (hsl(214, 80%, 48%)) for interactive elements and buttons; Trust Amber (hsl(38, 90%, 48%)) for certifications and ratings.
- Country Destination Accents: Bespoke contextual accents for cultural recognition: Canada Crimson (hsl(0, 65%, 42%)), Australia Golden-Sun (hsl(38, 80%, 38%)), New Zealand Fern Green (hsl(145, 55%, 32%)), and UK Imperial Navy (hsl(214, 80%, 38%)).
- Typography Hierarchy: Display and primary headings rendered in ‘Outfit’ (weights 600/700/800); body copy and tabular data set in ‘Plus Jakarta Sans’ (weights 400/500/600) for exceptional legibility across dense visa information.
- Elevation & Surface Lighting: Subtle multi-layered drop shadows (–shadow-sm to –shadow-xl) paired with frosted glassmorphic card borders (rgba(255,255,255,0.7) + backdrop-filter blur) to create modern visual depth.
- Form & Data Structure Design (Lead Generation Engine)
The consultation contact form (components/ui/ContactForm.tsx) represents the primary business conversion mechanism. It was engineered as a finite state machine managing three operational states: Idle, Submitting/Loading, and Success.
- Responsive Design, Security & Search Engine Architecture
Responsive Layout Engine: Developed mobile-first utilizing CSS flexbox and responsive auto-fit grid templates. Standard breakpoints (1024px desktop, 768px tablet, 480px mobile) ensure zero horizontal overflow and optimal readability on all handheld viewports.
Security Architecture: Strict compile-time TypeScript type guards prevent object injection; form inputs are validated client-side and sanitized before submission; Content Security headers and restricted CORS origins (allowedDevOrigins) are configured in next.config.ts.
Comprehensive SEO Engineering: Complete dynamic sitemap generation (app/sitemap.ts) enumerating all canonical URLs with changefreq and priority rankings; robots.txt directives (app/robots.ts); JSON-LD Organization schema embedded in layout.tsx; and 17 automated 301 permanent redirects preserving legacy .aspx search visibility.