Overview
In November 2008, I collaborated with Julian Harris at EMC Conchango on a major e-commerce platform for Shop Direct. This project unified nine brands, including Littlewoods, Very, Marshall Ward, Kays Choice, and Great Universal, under a single ATG platform. Fast forward 15 years, and Julian and I are teaming up again—this time on Future Provenance.
Julian approached me with a detailed brief to develop their company website, and I was more than happy to take on the project. And so, the story begins…
Clear design direction
Future Provenance ran a comprehensive user experience design process to define site structure, navigation, and web page layouts. Using Figma, they presented a cohesive vision for both desktop and mobile designs.
As someone familiar with Figma from previous projects, I found it an excellent tool for collaboration. It enabled us to exchange ideas and feedback efficiently, ensuring a smooth workflow during both the design and development phases.
Technical choices were made
I led the development process, focusing on creating a fast, maintainable, responsive, and fully accessible website. I opted for Eleventy (11ty), a static site generator, with GitHub for version control and Netlify for the build pipeline. Contentful served as the headless CMS, offering a robust and flexible solution for managing content.
Challenges to overcome
Like any project, this one had its share of challenges, making it both engaging and rewarding. Here are a few notable ones:
Project images and carousel placement
The design team wanted the ability to add and reposition project images and carousels flexibly. Typically, I would allocate dedicated areas in the CMS for such elements, but this approach was too restrictive.
By refining the content model and enhancing the frontend, I created a system that allowed images and carousels to be placed dynamically within any project layout.
Instagram API feed
While connecting to an API is straightforward, fetching data for every user visit can introduce limitations and incur costs.
To address this, I combined ‘Eleventy Fetch’ and ‘Eleventy Image.’ Eleventy Fetch cached JSON data from the API for a set period, while Eleventy Image saved related images locally, converting them into next-generation formats like AVIF and WebP.
This approach eliminated the need for constant API requests, optimised image formats for performance, and significantly improved the user experience.
Cookie management and GDPR regulations
Implementing cookies with user consent was a priority. Drawing on my experience with the Ministry of Defence Service Manual, I applied the same principles to ensure cookies only initiated after user approval. The result was a seamless, user-friendly implementation.
Performance and speed considerations
Performance was a key focus throughout the project. Using a headless CMS approach, next-generation image formats, and automated tasks for minifying styles, scripts, and HTML, we achieved a fast and optimised website.
Inclusivity for all
Accessibility was another crucial priority.
High contrast mode
To support users with visual impairments, I ensured the website functioned well in high contrast mode. Enhancements were made to improve readability and clarity, resulting in a more inclusive experience.
Keyboard navigation
For users with motor impairments or those who rely on screen readers, keyboard navigation is essential. I carried out manual and automated tests to ensure full navigability, enabling all users to access content and interactive elements easily.
Content management using a headless CMS
Future Provenance required flexible content management across their website. Contentful proved an ideal solution, offering robust tools to manage content efficiently. Its ability to deliver next-generation image formats like AVIF further enhanced the site’s performance.
What’s next
Future Provenance plans to introduce multi-language support, starting with Arabic. Contentful’s built-in multi-language features provide a solid foundation for this, while the frontend will need updates to toggle languages and ensure usability. I’m excited to integrate this functionality in the coming months.
The results
I delivered a fully accessible website for Future Provenance, enabling their team to manage content effortlessly and with exceptional performance.