From Brand to Digital Experience for airline, mobility and hospitality

Back in November 2008 I worked alongside Julian Harris at EMC Conchango working with Shop Direct on a large e-Commerce platform for nine brands served by one unified ATG platform. Typical sites included Littlewoods, Very, Marshal Ward, Kays Choice, Great Universal to name a few. Fifteen years later, we’re working together again on Future Provenance.

Julian asked me to quote for developing their company website with a detailed list of specifications and requirements and I was more than happy to take this project on.

This is where the story begins…

Future Provenance had designed a series of screens for how they wanted the entire website to look on both desktop and mobile devices in Figma. Having used Figma for other design projects it’s a great tool for collaboration and bouncing design ideas off of each other. So this setup worked really well during the design and development phase of the project.

Future Provenance is more of a branding agency and as such I was given development control with choosing the best approaches for a responsive website that was fast, maintainable and fully accessible. I opted for using Eleventy (11ty), a static site generator with a combination of Github for code storage and version control, Netlify for the build pipeline and Contentful as the headless content management system.

In my personal opinion, this is a great combination for a modern website delivery, which keeps costs low, easy to maintain and quick to update without the headache of working with old CMS solutions, technologies and processes.

Like every project, some project requirements can cause challenges which keeps things interesting and challenging at the same time. A few of those challenges were:

The design team wanted the ability to add project images and project carousels and then have flexibility in positioning them how they like. Normally I would have an area dedicated in the CMS for adding a project carousel and then a series of images thereafter. With an improved content model and work on the frontend, I was able to get around this limitation and make it flexible enough to move images or carousels to any location for each project.

Connecting to an API is a fairly straight forward process. Once I’d setup connectivity between Instagram and Facebook I was able to pull data via ‘Instagram’s Basic Display’ and show Instagram posts on the frontend in a format I could control from the API feed.

One of the problems with this is that each time a user visits the site we need to connect to the API and serve content to the frontend. Connecting to an API can have limitations and also be costly. To work around this issue I was able to use a combination of ‘Eleventy Fetch’ and ‘Eleventy Image’.

With ‘Eleventy Fetch’ I was able to cache a JSON file from an API for a set duration. With ‘Eleventy Image’ I was able to save the related images into a folder in our file system, format the images into next generation image formats like AVIF, WebC etc and serve those from cache.

With this setup, we no longer need to connect to the API at each request, we also convert our images into various formats for browsers that support them, we also get an added performance boost, and a great way in handling our Instagram API connectivity.

After creating a Google Analytics and Tag Manager account, the hard part was making sure cookies were not being initiated until a user consents to using them. Having already applied them to the Ministry of Defence Service Manual, I had a good idea on how to apply them to the Future Provenance website. Fortunately for me I was able to use and implement this successfully with a nice user-experience.

One of the selling points for me was emphasis on performance and speed when using a headless CMS approach and next generation formats for serving images. Also the application of minifying styles, scripts and HTML using automated tasks also play a big part of ensuring we obtain the best possible performance for users experiencing the website.

Optimising for accessibility is crucial in making any service more inclusive and user friendly, one of those tests included High Contrast Mode. Users with visual impairments rely on high contrast settings to access and navigate content more comfortably, by optimising the service this enhances the readability and clarity of the service. In general the website looked good in High Contrast Mode, but a few improvements made for a really nice user experience for people with visual impairments.

Another important part of accessibility is being able to navigate the website solely with a keyboard. Some users have motor impairments that prevent them from using a mouse. Screen reader users often rely on keyboard navigation to access all interactive elements and content on a website.

There are even some power users that prefer using the keyboard for its efficiency and speed. Not only is this a fundamental requirement for web accessibility it also provides equal access to all users. Manual and automated tests were carried out to ensure all users regardless of their abilities were able to access everything effectively and know exactly what elements are in focus throughout this process.

Future Provenance had a clear set of user needs when managing content for every part of the website, and this flexibility was carefully configured and made available to them. After a little research and experience already using Contentful, I felt it was a perfect fit for managing every aspect of their website. Contentful also has the ability to serve a collection of next generation image formats on the fly, one of which includes the new AVIF format for a massive improvement in file size reduction for browsers that leverage it.

One of the next features Future Provenance want in the next phase is multi-language support, specifically ‘Arabic’. Contentful supports multi-language sites and toggling between multiple languages for ease in adding alternative content, which is a great start into adding this feature. Obviously work is required in the frontend to switch between languages in addition to other considerations, so I’m really looking forward to integrating this functionality in the coming months.

Let’s see how the Future Provenance website unfolds in the coming months.

I crafted a fully accessible website for Future Provenance, enabling them to effortlessly manage all their website content with speed and efficiency.

My involvement includes:

• Web Development (HTML, SASS, JavaScript)
• Content Management System (Contentful)
• Netlify and Github Build Pipeline
• Google Analytics and Cookie Management
• Instagram API connectivity
• Netlify Forms Integration
• Accessibility Standards