Many of you won't remember it, but the amount of posts in this forum and the feedback we collected showed us: the onboarding process along with the registration page is a horror for new users (especially non-english native speakers).
Together with our fellow community member Terrorblade, who is a working expert on customer journeys, we worked out weaknesses in the current process and ways to fix them.
Here are few things we are doing horribly wrong:
- The website promotes the client download. But that is not the start of the journey. If you download and install the client as first step, you then figure out that you need to go back to the website to register and steam link first. In worst case you go Website landing page -> Client -> Website registration -> Client -> Website steam linking -> Client
- The website is only available in english
- The information is unstructured and not really offering much help where you need it
- Errors in the process don't give the user any usefull help (e.g. technical api errors are printed in plain text)
- Field validation is not always available (e.g. is the username already taken? You only find out after you click the registration button)
- Hidden steps (you can only Steam link after you logged in!)
Due to the Steam link process and the required client download the FAF onboarding process is much more complicated than the that of other websites. We even modelled a perfect workflow, but that's beyond the scope of the current work. Nevertheless for the brave peopel here I'd like to share it with you, without further explanation:
![0_1605396838423_FAF User Journey.png](Uploading 100%)
In the last weeks I had the opportunity in my job to learn frontend development with Angular (and yet more trainings are to come). In order to train my newly gathered skills, I gave it a try. Unfortunately what I still don't have are skills for designing shit with CSS and colors.
All screenshots are representing work in progress:
Failed registration: As long as you didn't fix all issues and selected all checkboxes you can't click the button. The user lookup is done with a 1 second delay
You can dynamically switch the language. Currently I'm only populating english and german. The biggest need however would be russian.
Once you successfully registered we now (and only then) tell you, that you need to click on the email link:
Nevertheless, users are capable of switching between the steps to see whats ahead and what to wait for:
But using the activation url it looks simpler:
So after a successfull activation we can move on:
The Steam linking page needs some more info why this is required I guess:
The steam login itself is not interesting here, so I skip it. After a successfull login we get this:
And the FAF CLient Setup page is yet missing content completely. Not sure if we want to add screenshot per language, that sounds a bit too much work...
So far I have only shown the "happy path". The most important pain point for users is when the Steam linking doesn't work. We need to be able to distinguish between "You don't own the game" and "Your profile seems to be not public", but this needs some API changes as well.
I hope this change will reduce the amount of people we loose on the way to FAF. But it's still a long way and it might need much more time invested. So far I spent around 20 hours to reach this state (yet I'm facing many beginner problems as this is my first bigger Angular project, so it's a lot of basic learning time included).
Maybe I'll do some more Twitch streams and now the 5 people who saw my last (and first) stream know what they actually saw
Please share ideas and feedback guys!