Do you recognise this feeling? You see an app is available for an update and once you’ve updated it you spend the next 20 minutes playing spot the difference.
Sometimes these changes are obvious, such as a new design or colour scheme, while others are hidden improvements under the bonnet, like more robust logging or simplified DB queries.
In this article, I'm going to talk about all of the changes involved in redesigning and rebuilding the onboarding experience for new clients.
People say you shouldn't judge a book by its cover. While that might be true for people and books, when it comes to apps the first impression is often the last one.
We want to give our clients a great (the best) experience from the moment they open the Freetrade app. This time, that meant giving the new client onboarding screens an overhaul.
There were a few reasons why:
The first part of the user journey remains the same: sign up and add your personal details.
What happens afterwards? Well, that’s where we made a few changes.
You might recognise the image in the middle, this was our first account selection screen. On this screen you could choose between a:
After selecting an account, you were presented with a creation screen (the third image) and that would take you through to your newly created account.
While this setup had served us well so far, we weren’t highlighting all of the accounts we had to offer clients. For one, we were missing the popular Freetrade Plus account, which offers clients more trading flexibility and a wider selection of investments.
We have shuffled things around a bit.
After you choose your nationality, you’ll be shown the creation screen (same as above). At this point, all your data will be saved before you choose your account as we have all the information we need to create a basic client account.
The important innovation here is that at this point if you were to exit the app, you wouldn’t need to go through the whole onboarding process again. Once your basic account is created, you’ll head straight to the new membership selection screen.
Here you can choose between a standard membership and a Plus membership. On the next screen, you have the option to choose extras - we call it the “additional accounts” screen.
For now, this includes an ISA, but importantly the door is open for more product choices in the future. The extras are completely optional and you can skip or upgrade later if you prefer.
Should you choose a paid product, we will then also ask you for your card details. Finally, the account summary screen summarises all that the client has selected.
For us, working on the new onboarding journey has been quite a, well, journey. So for anyone interested or perhaps embarking on their own onboarding journey, here are my six key takeaways:
As with any new system, giving clients the ability to sign up is likely to be the first feature implemented.
Freetrade first launched on iOS, which meant we had to work with the oldest code in our codebase. The original onboarding journey had been implemented using Storyboards, this was particularly tricky to work with, so migrating to new, code-driven components was a must.
Freetrade hires in a language-agnostic way, which I think is a great approach. But it presents a mighty challenge on arrival.
For backend engineers (like myself), there may be a steep learning curve when learning mobile development for the first time, especially as we use RxSwift and RxKotlin heavily.
The good news is that Freetrade has some truly talented people among its ranks and they are able to guide and coach as you climb the mobile development mountain.
As we neared the Mount iOS summit, we could apply what we’d learnt to Mount Android. Going platform by platform worked really well.
How do we know when things aren't working the way they should be? Well, we are always listening and metrics are just another source of feedback.
By monitoring different client journeys and keeping an eye out for journeys and tasks not going the way we’d expect, we’re able to detect when things aren’t working as well as they should be.
In the case of onboarding, by measuring the time it takes for users to onboard we are able to detect what’s working and whether we have introduced a blocker relatively quickly.
Data caching on the device is something else to be mindful of, often it would prevent us seeing the changes we’d made. It’s a good idea to reinstall the app between test runs to have a clean state, that way you will always be testing it as a new client would experience.
Feature flags have been a bit of a nemesis.
We avoid having long-lived branches by iteratively adding new features behind a feature flag. But the more flags there are in the codebase, the more difficult it becomes to test all the scenarios, track the flags values and work out which flags need to be turned on, and in what order.
You can read more about feature flags and our approach here.
When redesigning anything a client might see and in particular the first few screens, UX/UI plays a big part in the mission.
Dark mode has been around for a while on both iOS and Android but it’s still easy to overlook testing any changes in dark mode. That’s especially true if you have never used dark mode yourself. I’m now a dark mode advocate. Every day’s a school day, right?
So there we have it, six tips for when you are redesigning your client onboarding process.
Hopefully I’ve done a good job at showcasing the journey and ultimately the beneficial changes we have made for clients.
We're always on the lookout for engineers to help build our platform and mobile apps.
If you want to help build a world where everyone is investing, come join the fun at freetrade.io/careers.
