Background

SCF is Australia's longest-established national supplier of specialised and purpose-built container solutions. They operate across a national depot network and provide services all over the country.

SCF provides multiple services related to container solutions, from container hire and sales to custom-designed and built containers, support with delivery and logistics, and maintenance services.

For 30 years SCF has worked hard to establish itself as a leader in the Australian Container Industry, growing the business from a small local company to Australia’s leading supplier of tailored shipping solutions. SCF wanted to celebrate and showcase their achievements over the years.

The challenge

The current SCF website was originally designed and built in 2019. Since then, much has changed in the way people use the website and it was time for the site to evolve. SCF wanted to build an area on their website to showcase their growth and achievements over the years and celebrate their 30th anniversary.

This new section on their website had to integrate with their main site, but they also wanted to make it different, interactive and fun to play with. Something very memorable for their users, out of the ordinary.

Approach

Build in Umbraco, the timeline had to be created in a way that they could add sections to it easily through the back office. The design had to work with the rest of the website and be editable and scalable.

We started by defining the content, the sections we wanted to divide the timeline in, and the key milestones that had to be highlighted. Once the structure of the content was defined, the design was kicked off, and we went through a few rounds of options until the design was approved. The design included the UX/UI of the page itself but also a few animations that were going to support the experience as the users scroll down through the sections.

Once the design was approved, we moved on to animation and development. All the animated elements were built and animated as individual SVGs, to allow for the microinteractions to be triggered based on user behaviour through the timeline. That meant a lot of manual keyframing and animation of SVG assets. Each of these was then combined and built into scenes, and additional animations were built to react to the users’ scroll.

The different scenes and blocks of content were built and integrated with the Umbraco Back Office, to allow editors to change any of the content, reorder and move around scenes but also to build and create new scenes as the business hits new milestones.

We worked closely with the team to make sure everything we were building was tested by them too, as we wanted them to love the design and experience their users were going to get, but also the experience they were going to have with the website. An outstanding editor experience was crucial to the delivery as Your teams supports SCF from a technical front but they have an internal marketing team for internal content changes and updates.

Results

The outcome was a timeline built as a single-page interactive experience that is easy to navigate and outlines the history of SCF throughout the years.

In building the page, we wanted to make it as easy as possible for editors to add new sections and edit the content - everything from the dates to the timeline descriptions, images and other assets can be loaded, and different scenes can be chosen and rearranged. The timeline has become an easy-to-use editing tool for managing the history items in a very user-friendly way without worrying about animations or complex builds.

We also optimised the page using custom javascript to reduce the need for third party frameworks further reducing the page load size with external components.

Tech stack

We built the history timeline as an add-on to the company’s already existing Umbraco website. The interactivity and experience were achieved by using JavaScript and SVG animated assets, integrated with the Umbraco Back Office using custom CSS and .NET development.

We chose to use SVG assets as they can be re-used and interactively animated - i.e., the svg can be animated on scroll or in response to a user interaction (even to the point of responding to mouse events like hover and click).  This gave us the advantage of not having to load assets in more than once, and not relying on traditional media items like movies for interactivity.