One organisation, five audiences, one CMS to hold it together
Aspire Zone runs stadiums, a sports academy, a hospital, a logistics arm and a hotel — under one foundation, one CMS, and (soon) one visual language.
Aspire Zone Foundation is the organisation behind Qatar's national sports city in Doha — Khalifa International Stadium, Aspire Academy, Aspetar sports hospital, Aspire Logistics and The Torch Doha hotel all sit under it. The public website is the front door to all of it: news, events, venue bookings, careers, tour requests, feedback forms, and corporate information, published through a custom ASP.NET CMS in English and Arabic.
The existing site had accumulated years of one-off page templates — a card here, a slider there — with no shared system behind them. My brief was to redesign the site in Figma and then rebuild it as production-ready, reusable HTML/CSS components the CMS team could assemble like building blocks, page after page, in both languages.
From facility map to file structure
The site's own venue map — numbered pins connected across the zone — became the mental model for how the component library itself should be organised.
Audit & discover
Catalogued every existing template on the live site — cards, sliders, forms, tables, popovers — and grouped near-duplicates that had drifted apart over time.
Design in Figma
Rebuilt the visual language around Aspire's magenta and slate palette, then designed each component with every real state it needed: empty, hover, filled, error, RTL-mirrored.
Build the system
Converted the Figma library into semantic HTML with Bootstrap grid and utility-first CSS — one class system, reused across cards, forms, sliders, modals and navigation.
Integrate into the CMS
Wired components into the ASP.NET templates so editors could compose pages — hero, events, venues, feedback — without touching a stylesheet.
The same grid, dozens of situations
A selection of the component families delivered — each one built once and reused across news, events, venues, hospitality and corporate pages.
12 card styles, one content model
Award cards, image-only cards, gradient overlay cards with dates and location pins, and CTA-button variants — all sharing the same markup and spacing tokens, restyled through modifier classes.
Feedback & enquiry modal
A single modal shell reused for feedback, share, and quick-enquiry flows across the site — optional fields, radio groups and validation states built in.
Timeline & awards page
A year-marker timeline pattern for corporate milestones — reused for awards, certifications and governance pages with the same list-and-divider structure.
A full field-type library
Text, phone with country prefix, password, URL prefix, range slider, file upload, select, date picker, checkboxes, radios and reCAPTCHA — documented once, dropped into any "Let's talk" or booking flow.
Three slider treatments, one engine
Dot pagination, progress-bar pagination and thumbnail-strip navigation — same underlying carousel, three ways to browse Aspire Park, stadium and hotel imagery depending on the page's density.
The connective tissue of the site
Contact tiles, "did you know" stat banners, leadership grids, feedback call-to-action bands, story timelines and values lists — the smaller components that hold corporate pages like Our Story together.
Every component was designed to flip, not just translate
Aspire Zone publishes in English and Arabic from the same CMS. Rather than mirror pages after the fact, spacing, icon direction, button order and alignment were built as logical (start/end) values from the start — so a component authored once in Figma works both ways without a second design pass.
Try the toggle: the card on the right swaps direction, font and button order live.
Your feedback matters
Tell us about your experience across Aspire Zone's venues and services.
Editors compose, developers stop redrawing
CMS editors can now assemble a new landing page — hero, event cards, venue map, feedback CTA — entirely from existing components, with no new CSS per page.
One design language across five sub-brands
Aspire Academy, Aspetar, Aspire Logistics, The Torch Doha and the Foundation itself now read as one family, instead of five loosely related templates.
Arabic stopped being an afterthought
RTL states shipped with every component from day one, cutting the back-and-forth that previously happened only after English pages were already approved.
What this project actually tested
- Systems thinking over screen design. The job wasn't "design a homepage" — it was deciding which twelve card layouts were actually one card with modifiers, and which were genuinely different components.
- Designing for someone else's CMS. Every component had to survive being dropped into an existing ASP.NET template by a content editor, not just look right in Figma.
- Bilingual as a constraint, not a checkbox. Building RTL in from the first component made the English version more disciplined too — anything that only worked one direction got redesigned.
- Restraint in a large surface area. With this many component families, the risk was visual noise. Keeping one grid, one radius scale and one accent colour across all of them held the system together.