Sainsbury's Living Archive

Using a wealth of content from their archives, Sainsbury’s asked Beyond to create them a fully immersive digital experience to tell the story of their heritage and bolster their vision: To be the most trusted retailer, where people love to work and shop.

The Build

Sainsbury’s Living Archive Back End is built with Python, using Django as it’s CMS and hosted on Google App Engine, a PaaS solution that manages resilience and capacity automatically. The Front End uses a combination of Twig templating, SCSS and JS, separating the code from the Back End and allowing for a modular, scalable and maintainable codebase. Gulp was used as our task runner to ensure everything was bundled/built correctly and fully optimised. All animations, including the scrolling parallax effect were developed with a combination of JavaScript and CSS techniques, including 3D Transforms where possible, to ensure smoother transitions across our supported devices and browser matrix.

This was my next large scale project following Virgin and my first as Beyond’s newly appointed Head of Front End Development. Noteworthy features include:

• Parallax scrolling.
• Interactive calendar component.
• Show/Hide interactive photo slider.
• Custom dynamic JS grid that responds automatically to the screen size and repositions the tiles using a matrix. (Our very own, slicker Masonry plugin).
• Scrub ice to reveal the rest of the screen component.
• Zoomable/Scrollable asset viewer with minimap.
• Interactive Map component.
• Fully customisable block layout to allow for any arrangement of components within an article using the CMS.

My Role

• Lead Front End Developer,
• Contributed to client and creativity workshops.
• Provided estimates, scoping and technical oversight to the UX/UI Design process.
• Liaised with key stakeholders.
• Created prototypes to validate early technical hypotheses before the core development began.
• Responsible for the development of the archive, ensuring everything was developed on time, to budget and perfectly aligned with the UX/UI requirements and our own strict, internal coding standards.