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.
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 effect1 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.
We needed something better. A calculator. A machine that you could throw numbers at, and that would return believable projections.
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?
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.
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 2. 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.
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.
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:
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.
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.
Input | Min | Max | Step | Nb of steps |
---|---|---|---|---|
Initial | 1000 | 200000 | 1000 | 199 |
Recurring (monthly) | 0 | 1500 | 50 | 30 |
Duration (years) | 1 | 30 | 1 | 29 |
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
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.
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.
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.
Final result
And, voilà! In two weeks of time, we had a functionning simulator.
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:
Exciting!
Compounding effect means that each year’s performance adds to the base upon which the future performance is calculated. If you make 20% the first year on a 1000€ investment, you have 1200€ at the end. If you make another 20% the second year, you’ll have 1200 × 1.2 = 1440. And so on. This compounding effect has an exponential impact on your returns over the long term.↩︎
I’m not qualified to expand on the math formulas behind each scenario, but I can tell you they’re based on: