Web Design / IA · 2025
Sample Chief
How do you give a loud, varied body of work one home without turning the volume down?
The Brief
Sample Chief is a global platform celebrating African music and culture, working across Toronto, London and Montreal. Its work spans its own club nights and listening sessions, programming for institutions like Tate Modern and the Art Gallery of Ontario, exhibitions, radio and editorial series, and partnerships with brands like Holt Renfrew and Ace Hotel. The original site was built by Bianca Chami. I joined in September 2025 for ongoing maintenance and a homepage UX/UI revamp, and the scope grew into shaping where the site goes next: how projects and events are presented, how the shop works, and how the team understands its audience. I still maintain the site today.
Approach
Let the work carry the site. Sample Chief's projects range from a vinyl night in a College Street bar to a three-week exhibition, and its visual identity is just as varied: condensed display type, saturated colour, archival black-and-white photography and concert-poster graphics. The design job was to give that range a clear structure without flattening it. The homepage became a curated showcase of featured projects. Each project page pairs a gallery arranged for that event with a calm, consistent content card (Ethos, Description, Services), so very different work still reads as one body of work. Behind it sits a shared project template, so new work goes live quickly without a custom build each time.
Getting There
- —Revamped the homepage around a curated featured-projects grid, built separately from the project pages so the showcase can change without affecting the archive
- —Redesigned and built the project pages around one repeatable structure: hero, location, Ethos, Description, Services, then a photo and video gallery arranged for each project
- —Added Featured/All filtering to the Projects page so visitors can browse highlights or the full archive
- —Redesigned the music page's layout and visual treatment
- —Led a shop UX pass: added variant swatches and size pills, alternate product images on hover, and a default "Featured" sort; fixed a stale cart badge, duplicate product requests, and out-of-date price and stock display; improved load performance by optimising images and fixing pages that stayed blank until JavaScript loaded
- —Set up site-wide analytics covering the shop, newsletter, projects, music and events, with privacy-conscious consent settings
- —Maintain the site day to day: adding new projects and events, updating content, and continuing analytics and UX work
The Result
Since I joined, the projects section has doubled from 5 to 10: Ace Hotel, Kops Records, Holt Renfrew, University of Toronto, Village Boogie, Art Gallery of Ontario, Pinterest, Tate Modern, Behind the Beat and As Loud as Freedom. Each was added without a new build. The visual system holds up across that range, from a hotel New Year's Eve party to a Tate Lates night to a producer interview series. Bold display type, saturated colour, archival photography and poster graphics make the site feel closer to a flyer wall than a typical agency site. The clean white content cards on every project page sit deliberately against that collage-heavy imagery, and that contrast is what lets one template hold together across work with very different moods.
Stack
- —Next.js App Router on Vercel with no backend of its own — events, music and copy live as content arrays in the codebase rather than a CMS
- —Shopify Storefront API for the shop — products, inventory and checkout are fetched live with GraphQL, so commerce data stays out of the repo
- —Mailchimp connected through a Next.js API route for newsletter signups
- —Google Analytics 4 for site-wide event tracking
- —Tailwind and shadcn/Radix for UI, with Framer Motion and Embla Carousel for the animated and carousel sections
- —react-hook-form and zod for form validation
Skills & Tools
More Projects