We created a scrolling interactive data visualisation for Highland to help new customers understand the fleet electrification process.

Highland is on a mission to make electric bus fleets accessible and affordable for all. As part of the launch of the new Highland brand we were asked by our partners, brand studio Figure, to create a scrolling interactive data visualisation to help new customers understand the savings they could make by using Highland to electrify their school bus fleet.

The final product captures a range of data, from the size of the potential customer's fleet, how many buses they want to electrify, how many years of service they run their buses for and how many deployments they would like. That data is then visualised and used to add personalisation within the animated journey through Highland’s product offering and process. The data then becomes part of a dynamically generated PDF for the user to take away once they have provided their details.

Designing something of this complexity involves a lot of stakeholders and thus we built in a flexible manner allowing Figure and Highland to iterate without worrying about changing their minds on key parts of the journey. We worked with Figure to develop a proof of concept, plan a budget, prototype, iterate, polish and then launch the fleet builder.

This process, in particular the prototyping stage, is a vital part of designing and building something new and unknown. The early builds using early initial sketches from the illustrator help in defining the form of the deliverable artwork for animation in the browser. We gradually increased the fidelity of these with every submission from the illustrator allowing the project to move forward without a final, perfect version of the art.

This was the penultimate piece in a 2 year process of launching the new Highland brand. Along that journey, as well as the fleet builder, Supermarket was responsible for the build and launch of the website and various new features using a JAMStack tech stack.