From Brand to Digital Experience for airline, mobility and hospitality

Overview

In November 2008, we collaborated with Julian Harris at EMC Conchango to develop a comprehensive e-commerce platform for Shop Direct, unifying nine brands on a single ATG platform. Notable sites included Littlewoods, Very, Marshall Ward, Kays Choice, and Great Universal, among others. Fast forward fifteen years, and we’re excited to work together again on Future Provenance.

Julian approached us to provide a quote for developing their company website, outlining a detailed list of specifications and requirements. We were eager to take on this project, marking the beginning of an exciting new chapter.

Clear design direction

Future Provenance ran a user experience design process to cover site structure, navigation, and web page design. They used Figma to outline their vision for the entire website’s design, ensuring a cohesive look for both desktop and mobile devices. Having previously utilised Figma for other design projects, we found it to be an excellent tool for collaboration, allowing us to exchange design ideas and feedback effectively. This setup facilitated a smooth workflow during the design and development phases of the project.

Technical choices were made

We led the development process to determine the best approaches for creating a responsive website that is fast, maintainable, and fully accessible. We chose to utilise Eleventy (11ty), a static site generator, along with GitHub for code storage and version control. For the build pipeline, we integrated Netlify, while Contentful served as the headless content management system, providing a robust and efficient solution for the project.

Challenges to overcome

As with any project, certain requirements can present challenges that make the process both interesting and demanding. Some of these challenges included:

Project images and carousel placement

The design team expressed a need for the ability to add project images and carousels, along with the flexibility to position them as desired. Typically, we would designate a specific area in the CMS for adding a project carousel followed by a series of images.

By enhancing the content model and refining the frontend, we overcame this limitation, enabling images and carousels to be moved to any desired location for each project. This solution provided the team with greater creative freedom and control over the layout.

Instagram API feed

Connecting to an API is a straightforward process. After establishing connectivity between Instagram and Facebook, we successfully pulled data using Instagram’s Basic Display API to showcase Instagram posts on the frontend in a controllable format.

However, a challenge arose in that each time a user visited the site, we needed to connect to the API to serve content. This can lead to limitations and increased costs. To address this issue, we implemented a combination of Eleventy Fetch and Eleventy Image.

With Eleventy Fetch, we cached a JSON file from the API for a specified duration, reducing the frequency of API calls. Using Eleventy Image, we saved the related images to a folder in our file system, converting them into next-generation formats like AVIF and WebP for optimal delivery.

This setup allowed us to eliminate the need for API connections with each request, convert images into various formats for compatible browsers, enhance performance, and effectively manage our Instagram API connectivity.

Cookie management and GDPR regulations

After setting up a Google Analytics and Tag Manager account, we faced the challenge of ensuring that cookies were not initiated until users provided their consent. Drawing from our previous experience implementing similar measures for the Ministry of Defence Service Manual, we had a solid understanding of how to apply this to the Future Provenance website. Fortunately, we successfully implemented this approach, creating a smooth and user-friendly experience for site visitors.

Performance and speed considerations

One of the key selling points for our approach was the emphasis on performance and speed achieved through the use of a headless CMS and next-generation formats for serving images. Additionally, the implementation of automated tasks to minify styles, scripts, and HTML played a significant role in ensuring optimal performance for users interacting with the website. This focus on efficiency and speed enhances the overall user experience.

Inclusivity for all

Optimising for accessibility is essential in creating a more inclusive and user-friendly service. One key aspect we focused on was High Contrast Mode, which is crucial for users with visual impairments. By enhancing the service for high contrast settings, we improved readability and clarity, resulting in a better experience. While the website generally performed well in High Contrast Mode, implementing a few targeted improvements significantly enhanced usability for individuals with visual impairments.

Another critical component of accessibility is enabling navigation solely via keyboard. Some users have motor impairments that make using a mouse difficult, and screen reader users often depend on keyboard navigation to access all interactive elements and content on a website. Additionally, some power users prefer keyboard navigation for its efficiency and speed.

Recognising that keyboard navigation is a fundamental requirement for web accessibility, we conducted both manual and automated tests to ensure that all users, regardless of their abilities, could access the site effectively. This thorough testing process also ensured that users could easily identify which elements were in focus, promoting a seamless and inclusive browsing experience.

Content management using a headless CMS

Future Provenance established a clear set of user needs for managing content across all areas of the website, and we carefully configured this flexibility to meet those requirements. After conducting research and drawing from our prior experience with Contentful, we determined it was an ideal solution for managing every aspect of their website.

Contentful’s capabilities include the on-the-fly serving of a variety of next-generation image formats, including the new AVIF format, which significantly reduces file sizes for browsers that support it. This not only enhances performance but also contributes to a better overall user experience.

What’s next

One of the next features Future Provenance aims to implement in the upcoming phase is multi-language support, specifically for Arabic. Contentful facilitates multi-language sites and allows for easy toggling between languages, making it an excellent starting point for adding this feature.

However, additional work will be needed on the frontend to enable seamless language switching, along with other considerations. We are excited to integrate this functionality in the coming months, enhancing accessibility and reach for a wider audience.

The results

We developed a fully accessible website for Future Provenance, empowering them to manage all their website content with speed and efficiency. This solution not only meets accessibility standards but also enhances their overall operational capabilities.