Web design UX/UI
Local destination, tourism and digital product
Estepona Travel
We designed and built Estepona Travel: a living destination guide where the daily agenda, interactive map, routes, food and trip planner all work as one product, in three languages.
Client
Own project
Year
2026
Sector
Local destination, tourism and digital product
Location
Estepona, Málaga
Categories
Services
Context and challenge
The starting problem wasn't a lack of information but how scattered it was. A visitor arriving on a Thursday in August might find a poster for a concert, a review of a restaurant and a beach map in three different places, none of them updated on the same day, and still not know what to do that afternoon. The information existed; what was missing was somewhere to turn it into a decision.
A destination isn't explained, it's walked
Estepona has 74 large-format murals spread across the old town and the neighbourhoods, a long seafront promenade, a marina, streets whose flowerpots are an attraction in themselves, markets, beaches that are nothing like each other, and a cultural calendar that never stops. All of it works as a physical experience and falls apart on screen: it turns into lists. The challenge was to design a product that kept that sense of a route.
The visitor and the resident aren't the same person
A resident wants to know what's on this weekend. Someone arriving for the first time wants to understand the place. Someone with two hours before getting in the car wants a short answer. All three had to fit inside the same product without any of them feeling out of place, and without building three separate sites.
Strategic approach
We built Estepona Travel around four intents, not around a menu. The navigation, the homepage, the map and the agenda are different faces of the same four questions.
Discover
For someone who doesn't know what they're looking for yet. Editorial content about the old town, the mural route, the beaches, the market, local history and the places that don't come up in a first search. Here the product behaves like a magazine with a point of view, not a directory.
Know what's happening
For someone who wants the pulse of the destination. The homepage opens with the temperature, the state of the sea and what's on today, with tabs for today, tomorrow and this weekend. This is the layer that forces the product to stay alive: if it isn't up to date, you notice immediately.
Decide
For someone who already has options and needs to choose. Entries with opening times, exact location, context and a reason why it's worth it. The interactive map layers more than a dozen categories —murals, beaches, places to eat, gardens, museums, urban art, history, nature— over the same geography.
Plan
For someone working with a fixed amount of time. The planner doesn't ask "what do you like?" but "how much time do you have?": a morning, a day, a weekend, a week, or I already know Estepona. Available time is the variable that really shapes the decision, and it's the one almost no guide asks about.
Scope of work
Product direction and strategy
- definition of the product and why it should exist
- the intent model as the basis of the architecture
- editorial criteria and a policy for what gets in and what doesn't
- phased roadmap for how it grows
Brand and visual identity
- full visual identity and logo
- colour system with semantic roles per section
- photographic art direction and image treatment
- tone of voice and writing rules
Information architecture and UX
- section structure derived from the four intents
- navigation, search and cross-cutting discovery
- design of the planner around available time
- place, event, route and restaurant entries as reusable pieces
Interface and design system
- component system, typography and hierarchies
- editorial modules, carousels, explorers and maps
- responsive design across every surface
- empty states, loading and transitions
Content and SEO
- writing and editing of the editorial pages
- semantic structure, metadata and structured data
- Spanish, English and German versions
- sitemap, indexing and internal linking architecture
Technology and development
- frontend and backend on Next.js and React
- database for the agenda, places, routes and business directory
- map integration with Google Maps
- live weather and sea data
- admin panel for content management
- transactional email and newsletter
Visual development
The visual direction comes from the place, not from a trend. Estepona is whitewash, bougainvillea, painted flowerpots, botanical gardens and sea: a chromatically loud destination. The decision was not to compete with that. The system rests on a deep botanical green that acts as both background and authority, lets photography carry the colour, and reserves the bright tones for signalling rather than decoration.
Each colour family has a job. Garden green marks action and things you can do; coral, the agenda and events; golden sand, food; turquoise, routes and the coastline; Mediterranean blue, planning and culture. Browse for long enough and you start navigating by colour without having consciously learned it.
The rest of the language is deliberately editorial: large headlines, plenty of air, generous grids, photography full-bleed when the place deserves it and restrained when the information is what matters. The premium feel doesn't come from effects — it comes from spacing, contrast and not adding one element more than necessary.
Guía de color
Colores primarios
Deep Botanical Green
#1D614D
Living Garden Green
#6FAF45
Mediterranean Blue
#4170B4
Sea Turquoise
#37B3BE
Colores secundarios
Bougainvillea Coral
#C35D5F
Golden Sand
#DE9F2C
Carbon
#17211D
System, replicability and depth
Estepona Travel isn't a set of pages: it's a system where content is entered once and appears wherever it makes sense. An event lives in the agenda, surfaces on the homepage the day it happens, appears on the map if it has a location, and enters a plan if it fits the user's available time. That's the difference between publishing and operating.
The agenda as a system, not a list
The agenda is what holds up the product's promise. It's organised by navigable months, by proximity —today, tomorrow, this weekend— and by type of event, and every entry carries its own validity window. An event running until 16 August behaves differently from one that's only tonight, and the system understands that. The homepage consumes the agenda rather than duplicating it: what you see under "today" is the agenda filtered by the moment someone opens the page.
Mural route explorer
The 74 murals are the destination's most recognisable cultural asset and deserved more than a gallery. They were resolved as an explorer with three ways in: the full gallery with image, artist and exact address; a map with every mural pinned; and a route builder where you select and order the ones you want to see and take it with you on your phone. The same information works for looking, for getting there and for walking.
The interactive map as a cross-cutting layer
The map isn't a section: it's another way of reading all the content. It filters by category over the same surface —murals, beaches, restaurants, gardens, museums, urban art, history, nature, the marina— and lets you go from "what's nearby" to the full entry without leaving the geographic context.
Multilingual as a product decision
Spanish, English and German aren't a translation layer on top of the site: they're three versions with their own routes, their own metadata and their own indexable content. In a destination where international visitors are a significant part of the audience, treating languages as a surface layer would have limited the product exactly where most of it is at stake.
Design and SEO worked together
The editorial structure and the semantic structure were decided at the same time. Every page has a reason to exist for a person and a reason to exist for a search engine, and when the two didn't line up, the page was rethought rather than forced. That includes heading hierarchies, structured data, internal linking between related sections, and a sitemap generated from the content itself.
Technical foundation
Next.js
frontend and backend under one architecture, routing per language and rendering suited to content that changes daily
React
a composable interface; explorers, maps, carousels and entries share the same base blocks
TypeScript
typed events, places, routes and categories; the data model is explicit and holds up as it grows
MySQL database
agenda, business directory, points of interest and routes with real relationships between entities
Google Maps
geolocation for every point in the destination and direct navigation from each entry
Live data
temperature, sea state and daily conditions built into the homepage
Tailwind CSS
a styling system consistent with the identity, with no drift between sections
Resend
transactional email and newsletter carrying the project's identity
Admin panel
in-house management of the agenda, entries, routes and content without depending on an external CMS
The website
The identity, extended into the digital space.
Result and transformation
The result is a digital product that works as destination infrastructure: a place where Estepona's scattered information is gathered, ordered and connected to the decision someone actually has to make.
The transformation translates into:
a guide that answers "what do I do now", not just "what to see in Estepona"
an operational agenda that feeds the rest of the product instead of living apart
the 74 murals turned into an experience you can browse, plan and walk
a map that unifies categories that used to sit in separate sources
a planner that starts from available time, the variable that really decides
three languages treated as three indexable products, not as a translation
an identity that orders content by colour and makes the site navigable by instinct
a technical base ready to keep growing in sections, data and functionality
Strategic reading
A destination doesn't need another website describing it: it needs something that makes it usable. Estepona Travel isn't competing to have more content than anyone else — it's competing to turn the content that exists into a decision someone can make in thirty seconds. Designing that forces a lot of decisions before anything is drawn — which questions matter, which information is noise, what gets shown first — and it forces you to build it so that it's still true tomorrow. A product that promises to be up to date only works if its architecture allows it; design and engineering, there, are the same conversation.
More projects
