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.

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 did not ask us to do this for them and were not involved in this project.

Build no-code games with Squirrel365

You probably don’t think of Squirrel365 as a tool to build no-code games, but you might be excited to know that it is in fact possible!

One of the joyful things about creating software is seeing the totally unexpected things that people do with it, and Squirrel365 is no exception. No-code games were not something we expected people to create with Squirrel when we released it, but that is exactly what some of our users have done. Check out these examples below, and remember – these are all powered by the logic of a spreadsheet!

Sliding Tile Puzzle

Created by Rob Scott, this addictive sliding tile puzzle game will take you back to your childhood days. It’s still just as fun, and just as challenging.

Play the Sliding tile puzzle game

Tetris

The Squirrel team set a challenge to the community members to see who could recreate Tetris using Squirrel365. Two people rose to the occasion! Both versions are pretty faithful to the original…

Play Tetris by Graham Ames

Play Tetris by Josh Tapley

Wordle

Josh Tapley also recreated this popular Wordle game. However, the Squirrel version allows the user to play over and over again, meaning the fun never ends! We think it should be called ‘Squirdle’!

Play Squirrel Wordle

Pokedex

This mobile version of a Pokedex was created by Josh Tapley. We’re loving the use of animated characters and the randomize button!

Play Pokedex

Sport of Kings

Rich Harvey was inspired by a classic for the Sinclair ZX Spectrum (if you are old enough to remember that). This horse racing game allows you to challenge your friends to pick a winner. Once the race is started only Squirrel knows who is going to win, watch events unfold and see who will get to the line first.

Play Sport of Kings

Want to make a no-code game in Squirrel?

Whack-a-Squirrel… tutorial

If you are keen to make a game in Squirrel but aren’t sure where to start… try out our step-by-step tutorial that guides you through creating a simple whack-a-squirrel game.

Try the whack-a-squirrel tutorial

Share your Squirrel Games!

We’d love to see what games you can create with Squirrel365. All you need is your spreadsheet skills and some imagination! Make sure you post them on the Squirrel Community…

Happy Squirrelin’

Education Geographics is an organisation that provides demographic analysis to help schools to plan, manage and market themselves.

The tool that Education Geographics used previously was nearing its end-of-life. They needed to find an alternative solution quickly to ensure stability of their service. At the same time their dashboard needed an upgrade in terms of design.

It was not acceptable for the end users to be dependent on their own capabilities to select the correct analysis options. Tools such as PowerBI and Tableau were quickly ruled out, due to the potential learning curve for their users. The Education Geographics team planned to build the solution themselves. A flexible, no-code software tool was essential to minimise overall cost and time.

On top of this, the dashboard was over 7 years old and looked very dated. Over time, the user experience had also become sub-optimal and user engagement had dropped as a result.

Squirrel365 is the perfect solution!

After researching various other tools and set-ups, it became clear that Squirrel365 and its flexible, no-code capabilities would be the perfect tool for the build of their new dashboard. They combined this with InfoBurst with its secure and sophisticated data connection layer.

They created a new flagship demographic app comprised of six main modules including powerful ESRI based mapping. Users can drill into detail sections within the modules, accessing a client-specific mini-census of some 800 demographic variables, and a collection of census-based time series charts going back ten years.

“Squirrel is no code, affordable, and triggered a total makeover of our niche dashboard product – our clients love it. With an above and beyond approach to support and innovation, the Squirrel365 team is more of a business partner than a service provider”.
Reg Kernke – CEO Education Geographics

Improving the design and UX

Education Geographics used the Squirrel Design Service and a comprehensive design review was undertaken early in the project. Several improvements to the navigation and overall user experience were recommended and implemented, as well as a revamp of the visual styling and layout.

“The most effective assistance was paying for 10 hours of Squirrel365 support and using all of it on a design review.”
Reg Kernke – CEO Education Geographics

Education Geographics have spent a few months re-creating its new & improved dashboard solution.

After implementing everything on time, within budget, and with no major issues, they have successfully removed any dependency on the previous dashboarding tool. The new dashboard is faster, more process efficient, and is getting much better engagement from its users.

Download the Education Geographics Case Study PDF

The release of the new Tetris movie on Apple TV got the Squirrel365 team thinking about Tetris and whether it is possible to create a no-code version. Squirrel365, if you’re not aware, is a no-code app development platform that basically uses spreadsheet formulas as the logic layer of your application. Tetris, the game, uses simple 4 block shapes to fill a gameboard.  There are a number of resources out there teaching you to build Tetris using programming languages such as this javascript youtube tutorial, others have gone for an easy visual coding environment such as Scratch a programming language popular with kids learning to code.  All these options rely on code for the visuals and the game mechanics.

Fun fact did you know the 4 block shapes use in Tetris are called tetrominoes

So how easy would it be to create Tetris with a no-code platform?

At the most fundamental level, the gameboard is very similar to the grid inside a spreadsheet.  A Google search (or a ChatGPT enquiry) will tell you it’s possible to create Tetris in Excel, but you must use VBA to create it.

VBA or Visual Basic for Applications is a programming language you can use to make Excel do clever things.  But if you must resort to programming to build Tetris, why use Excel, when it could just be coded?  However, with Squirrel, you can also do clever things without writing code!

The challenge: Can you make a Tetris game with Squirrel365?

So a couple of weeks ago, we set this challenge to our community members.

The rules of the challenge were simple… 

• No add-ons,
• No coding,
• Just native Squirrel functionality and spreadsheet logic.

This was no doubt a complicated challenge. Which might require a bit of lateral thinking and some chunky spreadsheet formulas. Our very own Graham (from the Squirrel365 development team) took the challenge on and created this no-code version of Tetris.

It uses 2 data movers and 1 timer, along with spreadsheet logic to make it work.  The UI was achieved with rectangles and buttons.  There’s still a few bugs to iron out, and scoring to add, but overall it’s looking and feeling pretty good!

This proved to be the inspiration needed to get the community going! Finally one of our community members Josh blew us away with his version of no-code Tetris shortly after! Test out Josh’s Tetris version here.

Want to share your version of Tetris with us?

It’s fair to say that this challenge caused a fair bit of head-scratching for even the sharpest Squirrel users! But it’s not impossible, and the results prove that with some imagination and some spreadsheet logic anything is possible in Squirrel365.

If you fancy adding your version of Tetris to the table, it’s not too late! See the full conversation on the Squirrel community here.

Mitch Lewis
Research Associate, Evaluator Group

Check out the full Evaluator Group case study.

–We’re sorry but this competition has now closed–

Join us at the Global Excel Summit

We are excited to be attending and presenting at the Global Excel Summit again this year. Squirrel will be amongst an array of Microsoft MVPs, Excel masterclasses and technical presentations. It’s an event not to miss, so if you fancy attending–read on!

Your chance to win a ticket!

We are giving away a ticket (worth £150) to one lucky winner! This is a Professional Ticket–Ideal for Professionals, aspiring Entrepreneurs and Freelancers looking to bolster their skillset with robust data analysis and powerful business intelligence tools that transform workflows. 

To be in with a chance of winning all you have to do is sign up for a Free Squirrel account (if you haven’t already) and build something from a spreadsheet. You can build anything you like! But the more impressive you make it the more chance you have of winning.

To submit your entry, simply share your published Squirrel project link on social media. Make sure you tag us so we will see it:

Linked in: @squirrel365
Facebook: @Squirrel365.io
Twitter: @squirrel_365
Instagram: @squirrel365.io 

The closing date is Friday 4th Feb. We’ll be choosing the best project and notifying the winner shortly after.

Good luck!

–We’re sorry but this competition has now closed–

Need a calculator?

Are you looking to build a calculator and embed it on your website? Or do you want to enhance a static powerpoint presentation with some realtime calculations and forecasts? If so, take a look at our new calculator templates and get a head-start. They are free to use and are ready-to-go, or you can customise them to suit your own needs.

You can find these new templates in Squirrel, from the Templates section (on the Start page).

Why use a calculator?

Value calculators help customers and prospects understand their ROI on products and services. More and more businesses are using them to collaborate with customers these days. They help to create more successful business cases and accelerate the sales cycle by demonstrating results to users in real time.

Conversion calculators are handy tools that enable users to make quick calculations between commonly used units. These kind of calculators are invaluable to users as they can help someone make a decision, or choose the right product.

Mortgage Calculator template

This mortgage calculator is used to estimate monthly and total payments for the mortgage loan. It includes various loan amounts, terms and interest rates. It’s really easy to use and it solves a lot of issues by providing the relevant information instantly. The mortgage calculator is a simple yet extremely powerful tool that helps to build trust between customer and lender – a trait that has always played an important role in the financial sector. 

Salary calculator template

This calculator provides an easy way to calculate the equivalent hourly and monthly wages based on your annual salary. It considers total hours worked per week, potential bonuses, and factors in vacation time into its calculations. You can always easily edit the calculator to suit your specific needs, such as including different taxation factors, and any other additional variables.

Website conversion revenue calculator template

This calculator shows the predicted impact of converting website visitors into actual sales. Adjust the rates and the average sales cost to see the additional revenue possible. 

Have you struggled with project design?

If you find it difficult to make your dashboard, calculator, or visual application look good, then you aren’t alone. Most people aren’t blessed with a natural eye for design and often fail to spot common design mistakes or know how to fix them.

So, we’ve compiled five simple design steps you can take to create better projects. Applying these five best practices will help your project look nicer, be easier to understand for your end-user, and they’ll be more likely to absorb your message and take any relevant action. We hope you find them useful:

1. Declutter your content

The first and most critical step towards improving your design is to declutter your content. Clutter causes information overload and means the user has to think and work harder to find what they need.

Content clutter could be:

• Information users don’t need (such as irrelevant data)
• Meaningless labels or titles
• Duplicated or repeated information
• Data viz or charts that confuse rather than explain.

The aim is to reduce the content as much as you can without losing the key insights. This means reviewing all of the information you are currently presenting and identifying content that isn’t directly beneficial to your target audience. If you aren’t sure what your users need, ask them! Find out what is most important and get your users to rank the rest of the information by priority order.

By reducing and refining your content, it enables you to create a more focussed design that will serve the needs of your users better.

Here’s an example of decluttering:

The cluttered dashboard (left) is harder to understand than the uncluttered dashboard (right)

2. Create a visual hierarchy

Visual Hierarchy is about ensuring that the most important information stands out and the less important information doesn’t distract. Having this hierarchy is very important: it helps guide users through your content and delivers the information to them in a logical way. Get this wrong and your user’s eye will be drawn to the wrong thing first.

When starting your design it helps to know what information is most important to your users, what is secondary information, and so on. Identifying these priorities will help you apply the appropriate visual treatment to the content and give it the right level of emphasis.

Ways to create a visual hierarchy with your content:

• Position
• Scale
• Proximity
• Colour
• Contrast

Position

This is the logical place to start when thinking about hierarchy. It’s no surprise to hear that the most important things generally go near the top. But there’s a bit more science to this that we should consider:

The typical Z reading pattern

In the western world, we read from left to right and zigzag down a page. This applies to the way we ‘read’ on-screen as well. This Z pattern creates four key areas or quadrants where eyes will typically stop and scan the information for longer. Knowing this can help us position our content appropriately. Typically, the top left corner of your design is the best location for your most important content – perhaps the perfect place for the most requested KPI. But the other ‘pause’ points are also good, prominent places for important information.

Ways to create visual hierarchy

Scale

When one item is presented larger than other items our eyes are instantly drawn to it. Scale can be used effectively to emphasise certain content and make it appear more important than other information, and vice versa if you make something smaller.

Proximity

Items that are placed close together are typically seen as related or grouped, and space between objects helps to define them as unrelated. The way you use space can help users understand the relationship and hierarchy between objects without the need for using borders or boxes to define these groupings.

Colour

Applying a bright colour to an element will make it stand out against other neutrally coloured objects.

Contrast

By making an item look visibly different (in shape, colour, or even making text bold) will help it to stand out. Anything that disrupts a regular pattern will create a contrast and therefore create a hierarchy.

Combining any of these will increase the visual hierarchy even further, but you need to be careful not to overdo it. Otherwise, everything will be shouting for attention and the user will be left feeling overwhelmed.

Here’s an example of weak versus strong visual hierarchy:

A weak visual hierarchy (left) compared to a strong hierarchy (left) which uses scale, position and colour to give emphasis to the important content

3. Use colour with purpose

There are two ways of applying colour to your design — you can use colour decoratively, or you can use colour with purpose.

Decorative colour (left) compared to Purposeful colour (right)

For dashboard and data visualisation projects, colour with purpose is definitely the right way to go.

Unlike decorative colour (which is just adding colour for the sake of it to make the design look more appealing), using colour with purpose helps to support the information being displayed and gives more meaning to the data. For example, you could use different colour data series’ in a chart, display a RAG status, or simply highlight navigation.

Generally, it’s better to reserve your colours for the data viz, charts and navigation items and keep the rest of the design fairly neutral. If your design is full of colour, whilst it may look fun and exciting, users will have to decipher your use of colour and see through all of the visual noise to get to what they really need – the information.

Decorative colour should be kept to a minimum and must not overpower the meaningful colour on your dashboard.

Remember, when using colour (even in a meaningful way), some of your users may have a colour impairment. So be mindful of relying on certain colours: e.g. a red and green status is often indistinguishable to a colour-impaired person. But you can ensure absolute clarity in this instance by using arrows alongside. Combining the shape and direction of the trend arrow with the relevant colour means everyone can understand the meaning even if they can’t determine the colour.

Here is an example of red and green used on a KPI tile:

Red and green can be indistinguishable to a colour impaired user (right), but visual clues such as arrows can help give meaning.

4. Line stuff up and add ‘white space’

This one is quite simple. You should line things up and add in some white space – if you don’t your design will look messy and unprofessional. This could put the overall quality of your project in question. Lining stuff up is actually really easy to do.

In Squirrel we have tools available to help you:

• The layout grid can help you position things visually.
• The alignment buttons allow you to line multiple elements up with one click.
• The distribution buttons allow you to space out three or more elements evenly.

Here’s an example of alignment:

Poor alignment and spacing (left) compared to good alignment (right).

‘White space’ (or negative/unused space) is something that often gets compromised in designs – particularly dashboards, usually due to the large amount of information being presented on one screen. But with a good declutter of content (as explained above), giving your content some space to breathe will help your design look better, and be easier to use.

• Consider grouping items using space so no need for borders or boxes behind your content (think proximity).
• Be generous with margins – you wouldn’t feel comfortable reading a book where the words went right to the edge.
• Don’t be tempted to fill space needlessly – think: does the end-user really need this?
• Consider hit areas for mobile ensuring there’s sufficient ‘press’ area for fingers.

Don’t be afraid of white space. It’s as essential to a design as the content itself.

Here’s an example of a spacious dashboard:

White space generally makes content more digestible and comfortable to read.

5. Use a simple & legible font

Good typography can be the difference between a good design and a great design. But choosing and using a font effectively can be daunting to many people.

If your client has a brand font, use it. It will reinforce their brand identity and means one less thing for you to think about. Firstly, check its legibility; particularly at small sizes as it may have been selected a long time ago for print based projects. If it’s not very legible then you should consider selecting a different font for the project.

Generally, Sans-serif fonts are considered more legible on screen – as they work particularly well at small sizes. Their simple and open letterforms are suited to on screen designs displaying numbers. Decorative or creative fonts should be avoided; their elaborate design can become distracting and are often hard to read.

Bear in mind which tool you’re using to create your project. Some tools have limited font options and some tools allow you to upload your own font to use. Have a look at Google Fonts (link) – this is a fantastic resource of well designed, free fonts that you can use in your projects. It’s also categorised, with descriptions of the fonts making it easier to select the kind of font that might suit your project.

Most fonts have multiple weights available ranging from Light all the way up to Extra Bold. It’s worth playing around with the different weights at different sizes until you find the optimal combination. Don’t overdo your use of different font weights – try to stick to two different weights e.g. Regular and Bold. Pick weights that contrast each other nicely so that you can use them to create emphasis where needed in your design.

Creating a clear and consistent typographic hierarchy is a useful thing to do at the beginning of a project. This involves deciding what font size and weight you want for each ‘text’ type, such as the Main title, Subtitle, Body text, Axis label, Micro copy etc. Avoid having text styles that are almost the same size, e.g. 15 and 16px as even the difference is negligible it can make the design feel untidy.

Here’s an example of a simple typographic hierarchy:

A typographic hierarchy

Once you have this, you can ensure the text on every screen in your project remains consistent and looks more professional.

We hope these five steps help you with the design of your next project. And if you want to learn how you can write good copy for your project, we share some more best practices in our blog Improving the user experience with copy.