Giving a DIY Space a Digital Home
Yard DIY is a free parkour and skate space beneath the A102 in Greenwich. I designed and built its first website to document the obstacles, publish events and give visitors the practical information they need.
Visit Yard DIYWhy Yard Needed a Website
Yard already had Instagram and a growing number of handmade obstacles, but there was no permanent record of what had been built. Events, visiting information and ways to help were scattered across posts.
The first version needed to catalogue the obstacles, explain the parkour and skate areas, list events, and show people how to visit or donate. Yard changes often, so every part of the site needed to be editable.
Instagram shows what happened today. The website keeps track of what Yard has built.
Making It Feel Like Yard
I created the visual direction, photography and copy. The site had to look like it belonged to the physical space. Polished sports branding would have felt out of place. Fake grunge would have been just as dishonest.
The creative direction began with Yard's irregular graffiti logo. Its concrete and ink colours became the base palette. Yard yellow and flashes of pink became the accents. Condensed type and hard borders carried the same energy into the page layouts. I used documentary photography throughout because the real obstacles, materials and people give Yard its identity.
Documenting a Space That Keeps Moving
Skaters and parkour athletes use the same space differently. The site gives each discipline its own obstacle catalogue, then brings them together through shared pages for builds, events, visiting and getting involved.
Each obstacle has a name, photograph, discipline and publication status. Visitors can see what is there before they arrive. When an obstacle changes or gets replaced, I can update its record in the CMS.
Building the CMS Around the Content
Keeping the site up to date without editing code was a requirement. I built a CMS for obstacles, builds, events, noticeboard posts, materials, page copy, images and navigation.
Each content type has its own fields and publishing controls. The current snapshot includes 123 editable settings, 36 documented obstacles and 38 uploaded image records.
Two Days to Build, Three Weeks to Finish
I used AI coding tools to build the React and TypeScript frontend with a PHP and MariaDB backend. The basic product took roughly two days. Photography, copy, obstacle cataloguing, CMS work and testing brought the total to about three weeks.
Entering the real content uncovered missing CMS controls, hard-coded copy and mismatches between the admin and public pages. I fixed those before treating the site as finished.
What shipped
- A living obstacle catalogue for both skating and parkour
- A bespoke CMS for permanent copy, imagery, events, builds, materials and navigation
- Event and noticeboard publishing for what is happening at Yard
- Instagram and Ko-fi links alongside permanent information on the site
- Consent-led analytics with a simple reporting view inside the admin
- A local-to-live publishing workflow that protects production content and uploads
What Changed
People have responded well to being able to browse the obstacles and find upcoming events in one place. The support link has produced little income so far. Instagram still drives most day-to-day engagement.
The roles of each channel are now clear. Instagram handles current activity and conversation. The website stores the information people need to find again: what is at Yard, when events happen, how to visit and how to help.
My Role
- Product and visual direction
- Information architecture and content modelling
- All photography and copy
- Design system and responsive experience
- CMS requirements and workflows
- AI-assisted implementation, QA and deployment
What the Work Showed
- Real photography and copy exposed CMS gaps before launch
- Obstacle records need publishing controls because the space changes regularly
- The website works best as a permanent reference alongside Instagram
- The two-day build still needed three weeks of content work and testing