- Industry
- Creative Agency / Experiential Design
- Date
- November 2024
- Duration
- 3 weeks
- Read time
- ~3 min
- Services
- Web DesignWordPress DevelopmentPortfolio Architecture
Atom is a creative experiential design agency that builds brand activations, pop-up experiences, and event productions for clients including Martell, AMVCA, FMDQ, and HBO. Their previous site didn't reflect the scale or craft of the work they were shipping for major brands.
I designed and built a portfolio-driven site that leads with the work itself. The result is a digital storefront that lets prospective clients see the agency's range within seconds of arriving, and a content architecture that lets the team publish new projects without involving a developer.
Portfolio-first, not services-first
An experiential design agency's value proposition is the work itself. The site opens with the agency's tagline, then immediately surfaces the highlighted projects. Services get a clean section further down, treated as support material rather than the main event.
The homepage uses a marquee animation to reinforce the agency's brand voice, with the tagline 'People forget words, but they'll never forget experiences' repeating as a visual rhythm. Each project on the homepage links to a dedicated case page with hero imagery, scope, and outcomes.
Each project as a dedicated case page
Every work gets its own URL. Glenmorangie Brand Activation, Martell Tower, Jameson. Each work page follows the same structure: hero image, project brief, scope of work, gallery of execution photos, and outcomes. Each project page follows the same structure: hero image, project brief, scope of work, gallery of execution photos, and outcomes.
The architecture means the agency can publish a new work case study without involving a developer. The work automatically appears on the works index, gets its own URL for sharing, and inherits the structured data needed to rank for branded queries.
Capabilities as navigation, not brochure
The agency offers ten capabilities: project/account management, brand development, strategy development, ideation/design, fabrication, animation, exhibitions, event technology integration (AR/VR), experience planning, and pop-up store designs. Each capability is a navigation card, not a paragraph of marketing copy. Visitors can scan the full range in seconds.
Heavy imagery, fast load
An experiential design agency's site is image-heavy by definition. Each project has 20-50 high-resolution execution photos. We implemented WebP conversion on upload, responsive srcsets, lazy-loading below the fold, and a CDN with edge caching.
The result is a site that loads a 30-image project case page in under 2 seconds on mobile 4G, despite the visual richness.
Three weeks to launch
Week one was the portfolio architecture: custom post type for projects, gallery component, and the project case page layout. Week two was the supporting pages (about, services, contact) and the marquee animation. Week three was performance optimization, image pipeline, and SEO setup. We launched with three highlighted works pre-loaded.
Measurable outcomes
An experiential design agency's portfolio is the proof. Every decision on this site, from the architecture to the animation rhythm, was made to surface the work first and let the services copy support it.
Next
Designed Spaces by Yemi
Building a portfolio-driven website for an architecture firm that delivers end-to-end.