Building a sustainable travel calculator

by | Jul 1, 2024

One of the great things about Squirrel is that it enables users to build a prototype in super quick time.

So, when we were challenged to create a carbon footprint calculator that helps customers understand sustainable travel choices and consequences – building it with Squirrel was a no brainer. We decided to base this ‘conceptual’ calculator on Eurostar*, and build it to align with both their brand and existing data available on their website.

It was envisaged that the calculator could integrate into the Eurostar website, specifically on their sustainability page, rather than being a stand alone app. We also assumed that the calculator widget could hook into data from a logged in user and show previous trip data. And as this was just a prototype these assumptions enabled us to move forward.

Sustainable travel calculator - wireframes to designs

From idea to app in less than a day!

Our designer set to work figuring out what would be useful in a calculator like this. What would a customer want to get from it? And how could they interpret the results and make sense of it? After doing some research and looking at other sustainable travel calculators, we produced some rough wireframes. These outline the desired content, layout and functionality required in the finished calculator app. Wireframes are great for finessing an idea without worrying about the styling. We used Figma to produce these.

Next we started building the calculator app in Squirrel, based on the wireframes – and getting the functionality and calculations all working. Building this prototype was very quick in Squirrel. It probably took 2-3 hours to get all the components in and calculations wired up. That’s the beauty of Squirrel’s drag and drop components – a lot of the work is done for you.

While this was happening, our designer was producing some high fidelity mock-ups using some of Eurostar’s brand assets, including colours, logo and imagery. It’s so important that calculator apps like this are visually engaging, friendly and relatable. And of course we wanted it to seamlessly integrate into the website design.

Finally, we applied the brand styling to the calculator app in Squirrel. Again, this was pretty straightforward to do. The Squirrel components have vast options for styling and customisation. And we were able to achieve the desired look to near pixel perfect precision!

Check out our working calculator below:

Showing travellers the impact of their choices

The finished calculator app demonstrates to customers the impact of their travel choices. They simply enter their start and end destination and the calculator will show them the difference between travelling by Eurostar compared to flying. It calculates the CO₂ generated and saved, and what this equates to. We wanted to show a conversion that people would understand, so we show the number of smart phones that could be charged with that journey’s CO₂ saving. The number feels quite high – which is what we wanted – as this will further highlight and educate Eurostar customers of making the right choice. The calculations for the equivalent power was taken from epa.gov.

Simplifying complex calculations

Eurostar’s existing website has all the CO₂ travel data listed for journeys – but a customer would have to calculate and figure out the real impact themselves by cross referencing other sites.

Our example shows how a simple calculator integrated into an existing site can help to add understanding to an otherwise complex calculation, enabling real-life comparisons that the user can relate to.

This calculator app took us roughly 7 hrs to put together. And even though it’s just a prototype it demonstrates how manageable it is to be able build an idea quickly to test it out.

If you’ve not tried using Squirrel365 for building out a quick idea – give it a go! Your first project is free.

Eurostar website and calculator mockup

 *Eurostar did not ask us to do this for them and were not involved in this project.

The PWA Hokey Pokey

The PWA Hokey Pokey

Read about he future trajectory of PWAs for Squirrel365 and the rollercoaster ride with Apple and the EU Digital Markets Act.