From Brand to Digital Experience for airline, mobility and hospitality

Involvement

  • Interaction Design
  • Development
  • Accessibility
  • CMS
  • PWA
Client
Future Provenance
Industry
Digital Agency
Year
2024
Visit website (opens in a new window)

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.

Collaboration with the design team using Figma for how the website looks on large screens
Collaboration with the design team using Figma for how the website looks on small screens

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.

Ability to add videos, images or carousels for each project using Contentful

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.

Code view of using Eleventy Fetch for Future Provenance Instagram API feed

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.

Future Provenance website before and after a user consents to using cookies

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.

High Contrast Mode accessibility testing on a Windows machine

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.

I highly recommend working with Trevor. He has done an outstanding development job on our company website. We wanted our website to meet the highest accessibility standards, and Trevor was the perfect person for this assignment

Catherine Gray
Creative Director and Co-Founder at Future Provenance