Building an investment simulator

Samples, free trials, fitting rooms, 30 days refunds… the world is filled with of opportunities to try before you buy.

When it comes to investment, no such things exist. You don’t get Monopoly banknotes to play with, before actually putting your own money into the machine. This was also true of Cashbee.

It’s not that simple

Then how do we give people a sense of how adapted (or not) a financial product is, in relation to their ambitions, needs… or fears?

We offer them numbers, high-sounding datapoints like Sharp ratios, SRRI (Synthetic Risk and Reward Indicator), Morningstar ratings… The list is long.

They’re all based on complicated math, but in essence, these numbers are meant to represent the risk level — and therefore growth potential — of any given investment. If you’re lucky, they’ll be simplified to an Expected return: “This investment should yield an average 8% annualized return over 10+ years” (followed by a thousand-words-long disclaimer, of course).

Now, if you’re good at math, you might get a rough idea of what an annualized 8% represents — that is, if you know how to take the compounding effect¹ into account. But this will only give you a number. Calculating a confidence interval (worst case scenario, best case scenario…), or adding a recurring investment (say, 500€ a month) during those ten years, will be much harder.

Bottom line: SRRIs and the likes are only helpful to a handful of “power-users”, and much too abstract for everyone else.

In fact, if you’re everyone else, these indicators often do more harm than good.

• You might take the 8% for granted, and not understand the risks associated with this kind of upside — nobody reads disclaimers, right?
• Or you might be skeptical, either because you think this still sounds too complex, or on the contrary because 8% a year seems, in fact, too simple to be true.

We needed something better. A calculator. A machine that you could throw numbers at, and that would return believable projections.

“How much?”

Simulators are far from new. The financial industry has relied on them for years to calculate the total cost of a mortgage, or that of a car insurance for example. In most cases, the question simulators answer is “how much is it going to cost”. In ours, it was the opposite.

Our goal was to help prospects realize how much our investments could earn them. But as explained above, it was not just about putting stars in people’s eyes. For a simulation to be convincing, it had to show both nice, and not nice scenarios. More on that later.

Let’s start at the beginning. What do we need to make a simulation?

Ingredients, and a recipe

A typical pattern

Most investments follow a similar pattern: there’s an initial investment, a recurring investment, and a duration. Initial is what you start with, Recurring is what you plan on investing regularly, and Duration is how long you plan on doing it. We needed a value for each.

Of course, withdrawals can happen during an investment’s lifetime, but given their imprevisible nature and the fact that it is not recommended to invest on the short term, we didn’t take them into account for the purposes of our calculator.

So: Intitial, Recurring and Duration. These are the three basic ingredients.

We still need another input: the Recipe. Cashbee distributes a dozen of products or “investment packages” (Private Equity, Or et Matières Premières, All weather, Santé, Immobilier…). These packages include up to three funds that we group together because they share a common characteristic. The funds in “All weather” are built to generate returns even under difficult market conditions (hence the name), the funds in “Santé” are all specialized in the Healthcare section… Etc.

For the simulation to work, the user has to select a package. The results will change (sometimes dramatically) depending on its risk level.

Ingredients and recipe

We have everything we need. It’s time to cook.

The dish

High-end investment simulators typically produce graphs like this.

Graph

The dotted line is the sum of your initial and recurring investments. It’s what you’ve put in the machine.

The colored lines represent scenarios ². Together they form three funnels: Worst to Bad (red), Bad to Good (blue), and Good to Best (green). The industry standard is to say that you have a ~70% chance of ending up in the central funnel, and ~12,5% chance of ending up in either the top or the bottom one.

Note that it can take several years for the lower levels of the funnels to yield returns. During the initial years, the performance of risky product can be well below the dotted line.

Interval

This gives us a large confidence interval of 95% between Worst and Best, and implies a 5% chance of ending up outside the extremes — either above or below.

On paper, that’s great. Very precise, very scientific. But in practice, these graphs can be hard to read for non-experienced users… and quite complex to implement.

Constraints, and decisions

The goal of this simulator was to be equally enjoyable on desktop and mobile. We didn’t want the result to shine on a computer, and be very degraded on a smartphone — like it’s too often the case.

Another big constraint was to keep this project’s budget as limited as possible: a couple of weeks, with almost no tech involved, just the few bits of javascript necessary to run the engine. The rest was supposed to be no-code (Cashbee’s website is built entirely by me on Webflow).

This led us to take a few shortcuts.

Sliders

Simple inputs: We preferred to use sliders because they’re device agnostic and require fewers clicks to operate than a text field or — worst — a dropdown. Sliders are less precise than a text field, but really, who makes a simulation for 4317€?

Default units

Default units: The Recurring investment should theoretically be defined by two values: an amount and a frequency (weekly, monthly…). We set the frequency to monthly by default because that’s what most people are used to. For the same reason, we considered that the default unit length of Duration was years, not months or whatever else.

Simple graph

No complex graph: We decided to replace the curves by a bar-chart because is was easier to read, easier to fit on small screens, and easier to implement. Funny thing is that, what was initially a cost-cutting optimization, turned out to be one of my favourite features of the simulator. It’s so straight to the point.

Default package

No custom composition of packages: In the app, you can select or unselect the funds that you invest in within a given pack. We decided not to enable this level of granularity, and only allow for an equally weighted fund allocation.

On to the screen

So now our machine is complete! It’s not as sophisticated as others can be, but it does the job of converting inputs into plausible projections. It’s time to dress the table!

Full system

We decided to align the design with the sequence we talked about before: ingredients first, recipe second, and result last. This not only felt natural for us internally, it was also very logical from a user’s perspective:

• People usually come with a number in mind. They (vaguely) know how much they want to invest, and for how long.
• What they don’t know, or might want to confirm, is which product they want to invest on. They need the simulator to materialize the potential gains of the product before choosing it.

Layout

This led to a sort of step-by-step layout. We took advantage of the large desktop format to put the inputs and output side by side, and went for a vertical layout on mobile.

Investment parameters

Parameters

The first bloc was straightforward to implement: just three sliders and text labels. The only tricky part was to decide on the spans and increments of each slider.

Take the Initial investment for example: some of our clients invest north of 300K€ with us. Others start at 1200€. If we decide to have a slider that goes from 1 to 300K, with an increment of 200€ per step, the slider will have 1499 steps. This can lead to situations where you can’t stop the slider on the exact value you’re looking for, because each step’s area is less than a pixel wide.

So we had to sacrifice a bit of granularity to win on usability. After consulting with our financial advisor and observing what users were typically investing on the app, we settled for the following parameters.

Product selection

The product selection bloc required a bit more work.

Product selector

First, in terms of UI. This whole simulator project was about helping users try, compare, and eventually pick one of our packages. These packs were the core of the simulation. So they all had to be accessible on the same level with the least friction possible: no dropdown, no sub-menu. Discovering, selecting and switching between products had to be seamless.

Risk profile

Second, in terms of features. One of our investment products, called Pilote Auto., allowed users to pick between four risk profiles, from Defensive to Dynamic. Given that this risk profile dramatically changed the potential returns of the investment, we couldn’t settle for one profile by default, we had to allow the user to choose. So we created a contextual, secondary layer of selection.

Mobile selector

Lastly, we had to tweak the layout on mobile to save space. We didn’t want people to scroll back and forth between the product selection and the results. Our goal was to have (almost) all of the simulation visible above the fold. This gave me the idea of making the product selection field scrollable… and it worked! Below is a screenshot taken on an iPhone 8, where every command is accessible without scrolling.

iPhone8

Results

Results

Given the simplification we had made on the graph. The challenge was to illustrate the transformation happening between the total investment and the potential results. There had to be a visual connection between them. My solution was to use a sort of bracket layout. Not the easiest thing to implement font-end wise, but worth the pain I think.

Mobile adaptation

Of course, horizontal designs are always hard to adapt on mobile screens, so I decided to change the layout direction to vertical and to use a sort of “indentation” to preserve the flow between inputs and outputs.

One last thing

That is all very nice, but where do we go from here? Specifically: how do we turn this into business?

Action

We needed another bloc at the end, with entry points for two possible next steps.

1. A direct app download link. In case the user was eager to move forward.
2. A button to book a free meeting with our financial advisor. In case the user wanted to talk to a human about the simulation. Cool sophistication here: we tweaked the code so that the simulator would prefill the Calendly form. This way, our expert would know about the content of the user’s simulation before talking to them.

A third possible flow could have been to redirect the user to the detailed spec sheet of the product selected (a sort of “learn more” if you wish), but given the fact that this was less directly turning traffic into leads, we decided to park this idea.

And, voilà! In two weeks of time, we had a functionning simulator.

A promising start

Fast forwards to two weeks after the release, this Simulator is the 3rd (organically) visited page on our website, with an average visit duration of 3:40 minutes. It has already generated dozens of sales meeting and just as many app downloads (all of which onboarded successfully!).

I’ll update this article with further developments as they happen. Users are already asking for new features like:

• Comparing two products simultaneously
• Saving the simulation for later

Exciting!