La Noche de los Libros
ROLE
UX Designer
UI Designer
Front-end Developer
DELIVERABLES
Website Redesign
Website Development
TOOLS
Figma
HTML, CSS, JS
Supabase (PostgreSQL)
About the project
Background
La Noche de los Libros (The Night of Books) is Madrid's premier annual literary festival, celebrating literature through author readings, book signings, and cultural performances across the city. As one of Spain's most significant literary events, it attracts thousands of visitors each year to promote reading and cultural engagement.
Challenge
- Outdated information architecture with confusing navigation
- Non-responsive design sections creating accessibility barriers on mobile devices
- Inefficient content discovery for event schedules and locations
- Visual design that didn't reflect the event's cultural significance
Solution
- Streamlined navigation: Eliminated dropdown menus in favor of direct access to all content
- Enhanced discovery tools: Implemented combined search and map functionality
- Mobile-first approach: Completely rebuilt the responsive framework
Design Process
Objectives
- Accessibility: Ensure all users could easily find and participate in events
- Cultural Representation: Visually communicate the event's literary significance
- Scalability: Create a system that could grow with the event year after year
Homepage
- Integrated the thematic video with explanatory content previously buried in secondary pages
- Added clear call-to-action elements guiding users to key event information
- Implemented a visual hierarchy that emphasizes the event date and essential details
Special Events
- Replaced dropdown navigation with persistent location buttons
- Standardized activity cards across all sections for consistency
Activities
- Interactive Map Integration: Allowed users to visualize event locations geographically
- Smart Filtering: Combined multiple filter types with real-time results
- Responsive Cards: Designed activity cards that adapt to various screen sizes
Press
The Prens page was redesigned to improve the user experience by simplifying the layout and making it more visually appealing. The new design features a cleaner, more modern look.
Mobile Experience
With most users accessing the site via mobile devices, we prioritized:
- Navigation: Redesigned the menu system to utilize full-screen overlays for better readability
- Touch Targets: Ensured all interactive elements met accessibility standards for touch devices
Development
Approach
The technical implementation focused on creating a maintainable, high-performance foundation:
- Component-Based Architecture: Built reusable UI components for consistent implementation
- Progressive Enhancement: Ensured core functionality worked across all browsers
- Accessibility Compliance: Achieved WCAG 2.1 AA standards throughout
- Performance Optimization: Implemented lazy loading and asset optimization
Data Migration
One of the most significant technical improvements was migrating from front-end data storage to a Supabase PostgreSQL database:
- Secure API Layer: Implemented row-level security for controlled data access
- Efficient Queries: Optimized database queries for fast filtering and sorting
- Content Management: Enabled non-technical staff to update event details through Supabase's admin interface
This migration eliminated the need for manual content updates in the codebase and provided a scalable foundation for future growth.
Limitations
The project presented unique technical challenges due to being built on Microsoft Expression Web, a deprecated web design tool:
- Legacy Code Constraints: Worked within the limitations of Expression Web's generated markup while implementing modern design patterns
- Responsive Workarounds: Developed custom solutions to achieve responsive behaviors not natively supported by the platform
- Integration Challenges: Created bridges between Expression Web's framework and modern JavaScript functionality
- Maintainability: Structured code to be maintainable despite the outdated tooling
These constraints required creative problem-solving to deliver a modern user experience within the legacy framework.
Results
Impact
The redesigned platform successfully addressed the original challenges:
- Significant reduction in user-reported navigation issues
- Improved engagement metrics across all device types
- Positive feedback from both attendees and participating organizations
- Increased media coverage due to improved press resources
Key Learnings
This project reinforced several important lessons:
- The value of user-centered design in cultural event platforms
- Migrating to Supabase transformed how content was managed, proving that even small projects benefit from structured backends.
- How to balance innovation with technical constraints
- The importance of designing for accessibility from the ground up
Working within the constraints of Expression Web ultimately strengthened our problem-solving skills and demonstrated that excellent user experiences can be achieved even with limited tools.