Azul Arena
Centro Cultural Website Design
Azul Arena is a cross-border non-profit art organization dedicated to amplifying marginalized voices and fostering cultural dialogue across communities.
My role was to design and develop a digital platform that not only functioned as a website but also extended Azul Arena’s cultural and political voice. The goal was to create a site that felt professional, scalable, and accessible, while remaining true to the raw, authentic energy of the community it represents.
Azul Arena — Cross-Border Cultural Platform
A custom website and CMS designed for accessibility and engagement, balancing professional credibility with a radical artistic voice.
Role
Creative Director / Web Strategist
Client
Azul Arena (non-profit art organization)
Deliverables
Website · Custom CMS · UX/UI · Branding · Motion · SEO/Accessibility
CHALLENGE
The client needed more than a standard art website. Azul Arena required:
A system that could clearly distinguish major milestones (Novedades) from the daily schedule of activities (Programación).
A platform that avoided the elitist aesthetics of traditional museums while delivering a credible, professional presence.
Tools that empowered the client to easily update content without technical knowledge.
In short, the challenge was to create a cultural platform that was as radical and experimental as the artists it represents, while remaining intuitive for everyday users.
APPROACH
Visual Direction: A stark black-and-white palette with bold typography to reflect Azul Arena’s unapologetic identity.
Cultural Vocabulary: Keywords such as cultural resistance, fragmented identity, migration, binational territory were integrated both into the copy and into SEO/alt text, turning the site into a linguistic as well as visual statement.
Accessibility First: WCAG-compliant contrast ratios (AAA/AA+), semantic HTML (aria-label, sr-only), responsive typography, and thoughtful motion design.
Data-Driven UX: Heatmaps (Smartlook) and Google Analytics informed decisions such as simplifying the navigation and redesigning the subscription flow.
SOLUTION
Information Architecture
Novedades: Highlights of major exhibitions and cultural projects.
Programación: Day-to-day activities, workshops, and events, linked or independent of the milestones.
Hero Section: Always adaptable to showcase the most important happening at any given time.
Custom CMS: Built to let the client upload text, images, and dates, which are automatically formatted into the site design with a single click.
CUSTOME FEATURES
Optimized Hero Video — Poster image loads instantly, video fades in after 20% buffer for a smooth experience.
Artist Card Swipe (mobile) — Horizontal ticker of key exhibitions, slowing down on hover for better readability.
Mobile Card Shuffle — A playful, swipeable deck of artist cards, creating “delight moments” for users.
Stylized Map — Custom-coded to match Azul Arena’s aesthetics instead of embedding a generic map.
Progressive Image Loader — Dominant color placeholder + loader circle, fading seamlessly into the final image.
Scroll Progress Indicator — Feedback bar at the top that gradually fills as users scroll, teaching them the site’s rhythm.
Adaptive Navigation Redesign — From a 7-link overloaded menu to a simplified dropdown informed by heatmap data.
Dropdown with Masked Typography — Transparent letters reveal the hero content beneath, blending design with interaction.
Context-Aware Navbar — Disappears after the hero, replaced by a compressed bar (logo + search).
Subpage Dropdown Styling — Switches to a black background to maintain contrast and clarity.
Dark Mode with Override — Syncs with system settings but allows manual override.
Interactive Typography — Section titles expand on hover, adding subtle delight.
Newsletter Popup with Friction Control — Modal with custom frequency (every visit, 1 day, 1 week, 1 month, 3 months).
Hidden Playground — Private space to prototype and test experimental features with the client.
Reservation Form + FAQs — Fully custom booking form integrated with contextual guidance.
Mobile-Optimized Form — Large, legible fields designed specifically for mobile input.
Custom Iconography System — Bespoke icons aligned with Azul Arena’s identity.
Responsive Typography System — Scales across desktop, tablet, and mobile for consistent readability.
ANALYTICS + TESTING
Google Analytics and Smartlook Heatmaps tracked real user behavior.
Heatmaps revealed broken links and rage clicks → fixed to reduce frustration.
Navigation redesign was triggered by data showing users only clicked Novedades and Programación out of 7 links.
The newsletter popup directly increased subscriptions thanks to frequency control.
Usability testing with real users and recorded sessions showed longer time on site and smoother flows
IMPACT
The redesigned site transformed Azul Arena’s digital presence into a living cultural platform:
Engagement improved across the board, more subscriptions, more time on page, more interaction with Novedades and Programación.
Accessibility standards elevated the site for all audiences, reinforcing inclusivity.
The platform became an extension of Azul Arena’s political, cultural, and artistic mission, balancing credibility with radical authenticity.
ANALYTICS + TESTING
Azul Arena demonstrates how I merge design, development, accessibility, and cultural storytelling into one cohesive digital experience.
This project is more than a website: it is a political and cultural statement that empowers a community and extends its voice online
