Website redesign, CMS restructure, and optimization for the largest classical music festival in the Middle East
Abu Dhabi Festival, presented by the Abu Dhabi Music & Arts Foundation (ADMAF), is the most significant classical music and arts festival in the Middle East — a year-round programme spanning Abu Dhabi, New York, Vienna, Lyon, Seoul, Beirut, and beyond. B2X Software was brought in to evolve the festival’s existing Webflow platform: implementing a full visual redesign from supplied Illustrator files, restructuring a CMS that had to carry a decade of programming archive and a sprawling event taxonomy, building custom filter logic and new pages that Webflow does not support natively, and engineering performance across a media-heavy, partner-heavy site.
Challenge
Evolving a major cultural platform without breaking what already worked
Abu Dhabi Festival had been operating its Webflow platform for years before B2X joined the project. The site carried a substantial editorial archive — programming from 2014 through the current edition, hundreds of individual events, dozens of partners across strategic, lead, energy, education, and media tiers, and a full About / Initiatives / Awards / Education & Community surface. It was a working site doing real work for a major institution. The brief was not to replace it. The brief was to evolve it.
Four constraints shaped the technical brief
Years of historical event data, established URL structures, indexed content, partner relationships rendered on every page — none of that could be lost or broken during the migration. At the same time, the festival team needed the platform to do things it could not do before: support a deeply restructured CMS, accept new pages with custom logic, and hold a full visual redesign without degrading performance on a site already heavy with video, imagery, and partner walls.
01
A decade of archive to preserve. Programming from 2014 onward, hundreds of past events across four stages and more than twenty event types, all of it indexed and linked from external sources — the redesign and CMS restructure could not invalidate any of it.
02
A complex, multi-dimensional taxonomy. Events are classified by Stage (Abu Dhabi Stage, Global Stage, Youth, Visual Arts), by Type (Concert, Opera, Orchestra, Ballet, Flamenco, Jazz, Recital series, Choir, Dance, Contemporary dance, Spiritual music, Theatrical performance, ADMAF Talks, Youth Matinées, Masterclasses, Exhibition, and more), by Edition Year (2014–2026), and by Upcoming vs Past status. The filter system had to handle all of that — and the existing implementation could not.
03
A redesign supplied as a finished visual system. The festival’s creative team supplied a full redesign in Adobe Illustrator — typography, layout, color, motion. The implementation brief was pixel-perfect: no degradation of visual quality between Illustrator and the live Webflow site.
04
Performance under media weight. Hero videos, large editorial imagery, partner logo walls, and complex filter pages on every key surface — a media profile that demands deliberate performance engineering, not default Webflow output.
Solution
Pixel-perfect implementation of the supplied redesign
We worked from Adobe Illustrator design files supplied by And Us Group, one of the leading design agencies in Middle East — a complete redesign covering the homepage, programme listing, event detail templates, About, Awards, Initiatives, Education & Community, and footer system. Our role was to translate that visual system into a production Webflow build with no loss of fidelity between the Illustrator source and the live site, while keeping the site operational for the festival audience throughout the transition.
CMS restructure
We worked from Adobe Illustrator design files supplied by And Us Group, one of the leading design agencies in Middle East — a complete redesign covering the homepage, programme listing, event detail templates, About, Awards, Initiatives, Education & Community, and footer system. Our role was to translate that visual system into a production Webflow build with no loss of fidelity between the Illustrator source and the live site, while keeping the site operational for the festival audience throughout the transition.
Solution
Custom Webflow Development
A festival programme with twenty-plus event types across four stages and a decade of edition years cannot be filtered with Webflow’s native CMS filtering alone — the platform does not support multi-dimensional combined filters, year-based archive views, or upcoming-versus-past dynamic states out of the box. The redesign also introduced new pages and surfaces that did not exist before, each with its own custom behavior. We built a substantial layer of custom JavaScript and Webflow Components on top of the platform to deliver what the design and the editorial model required.
Performance optimization for a media-heavy, partner-heavy site
A festival website is a media product. Full-screen video heroes, large editorial imagery on every event card, archive pages rendering dozens of historical events with their imagery, partner walls displaying logos in multiple tiers — all of it loads on the same pages where the audience is making decisions about which performances to attend. Performance is not a finishing touch on a site like this. It is the difference between a working cultural product and a frustrating one.
We applied a deliberate performance protocol across the entire platform:
Video delivery on the homepage hero tuned for fast first paint — preload optimization, format selection, and poster-frame strategy to protect Largest Contentful Paint.
Image delivery via Webflow’s responsive image pipeline with explicit dimensions on every image, preventing cumulative layout shift across event cards, archive listings, and partner walls.
Lazy-loading applied below the fold for archive pages and partner walls — pages that surface dozens of media assets cannot afford to load all of them on first render.
Critical CSS inlined and non-critical scripts deferred, with third-party trackers (Google Tag Manager, analytics, marketing pixels) gated behind consent and isolated from the main bundle.
Filter component performance tuned — multi-dimensional CMS filtering on the programme page operates without page reload, with computed states cached and DOM updates batched to prevent jank.
A cultural platform ready for a year-round, global programme
The redesigned, restructured Abu Dhabi Festival platform now operates as the system of record for the festival's programming, archive, initiatives, partners, and institutional presence. The work delivers measurable outcomes across five dimensions.
Design fidelity at production scale
The supplied Illustrator redesign holds in full across every page — typography, spacing, motion, responsive behavior — with no loss of quality between source and production build.
Design fidelity at production scale
The supplied Illustrator redesign holds in full across every page — typography, spacing, motion, responsive behavior — with no loss of quality between source and production build.
A CMS that fits how the festival actually operates
The restructured Events, Partners, Initiatives, Awards, and Education collections let the editorial team publish in minutes rather than hours. Multi-axis classification means a single CMS entry surfaces correctly across the homepage, the programme page, the relevant filters, and the archive — without manual repetition.
A decade of archive preserved and discoverable
Programming from 2014 onward remains live, searchable, and properly attributed under the new system.
Custom logic that supports a complex programme
The multi-dimensional filter, year-based archive navigation, and automatic Upcoming/Past state handling give the festival a programme surface that matches the actual structure of its programming.
Performance preserved on a media-heavy surface
With video heroes, large imagery, partner walls, and complex filter pages, the site moved from Lighthouse Performance 79 to 97 and SEO 92 to 100 on desktop, with Core Web Vitals in the green band.
