Overview
Project BriefingGRN URBAN is a cultural guide to Granada that brings together an events agenda, thematic walking routes, long-form guides and a planning tool into a single, opinionated interface. The site is designed around the idea of 'living the city like a local', prioritising real venues, neighbourhoods and habits over generic sightseeing checklists. From a product perspective, it acts as my personal sandbox to explore content modelling, information architecture and advanced front-end interactions at scale, while remaining fast, accessible and easy to navigate.
The Challenge
Most digital guides to Granada are either static blogs, dense institutional portals or SEO-driven landing pages with little focus on actual user journeys. They rarely connect live events with routes, local advice and practical constraints like available time, budget or mobility, forcing visitors to stitch together information manually. I wanted to design a product that could answer a simple yet complex question—'what should I do in Granada, today, given my time and interests?'—in a way that felt opinionated, beautiful and usable on any device.
Information Architecture
GRN URBAN is structured around four core pillars: Events, Routes, Guides and Planifica (Plan Your Visit). Events aggregate concerts, exhibitions and cultural activities in the city with clear categories, venues and pricing, turning the homepage into a live agenda for 2025–2026. Routes are organised both by theme (tapas, miradores, monuments, flamenco, 'secret corners') and by time, including 2-hour walks, 1-day itineraries with Alhambra and 2-day deep-dives into different neighbourhoods. Long-form Guides provide contextual articles on topics like 'Granada in one day', 'Sierra Nevada without a car' or 'What to do for free in Granada', written as narrative pieces that link back into relevant routes and events. The Planifica section acts as a configurator that lets users build a custom itinerary combining more than 60 curated places, balancing editorial control with user flexibility.
Visual & Interaction Design
Editorial Experience, Live InterfaceThe visual language takes cues from print cartography and editorial design: vertical 'GRANADA' lettering, coordinate references (37°N · 3°W) and section labels like 'AGENDA', 'CARTOGRAFÍA' or 'EDICIÓN ESPECIAL' frame the experience as a contemporary city volume rather than a generic brochure. A carefully constrained typographic system and grid create hierarchy across cards, lists and long-form content, while maintaining consistency between Spanish and English versions. Interactive details—scroll prompts, transitions between sections, and the way cards expand into detailed pages—are designed to feel smooth and cinematic but never obstruct navigation. The interface emphasises legibility and rhythm: generous spacing on desktop, compressed but structured layouts on mobile, and clear primary actions such as 'Ver todos', 'Crear mi itinerario' or 'Explorar archivo completo'.
Technical Approach
Stack & ImplementationGRN URBAN is built with Astro as the foundation for a content-heavy, static-first site that remains extremely fast even as the number of events, routes and guides grows. Tailwind CSS powers a bespoke design system that encodes the project's editorial identity into reusable utility classes and components, enabling rapid iteration while keeping styles consistent across layouts. The project uses semantic HTML and accessible navigation patterns such as 'Skip to main content' and clear landmark regions, helping both screen readers and search engines understand the structure. From a performance standpoint, the site relies on static generation, careful image handling and minimal JavaScript on content pages, with richer interactions reserved for sections like the itinerary configurator.
Outcome
A Living Atlas of GranadaGRN URBAN now operates as a living digital atlas of Granada: it can surface upcoming concerts, propose a sunset route through Albaicín, and provide a complete 1- or 2-day itinerary with concrete stops, timings and local advice. As my personal flagship project, it showcases how I approach product thinking, editorial UX and front-end engineering when I control every layer—from the content model and naming to layout, animation and implementation. It also serves as a foundation for future iterations, including more advanced filtering, user-saved itineraries and deeper integration with real-time data around weather, opening hours and mobility.