Progress Report: New registration page
-
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:
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!
-
We may not remain free?
-
That's what the current TOS says: https://faforever.com/tos
I just copied it. -
Great work! Hope it helps many people on their way to the greatest RTS.
Might be worth it to add a 'language symbol' if possible in the language drop down menu to make it easier to find it for people that don't speak the language. Something like:
(backup link if image doesn't load)
Or some API that detects langues eg: navigator.language in javascript.
-
New update:
After a talk with Terrorblade we decided to do a pre-requisite check as some potential users a very disappointed when they learn after registration that they actually can't play on FAF.
This is the maximum set of messages you can receive:
The registration was also cleaned up. Terms of service and data privacy are now hidden behind a button and will show as a scrollable in-page popup.
Now you get a nice popup confirmation after registration with the ability to resend the email.
Last but not least the API error messages are finally translated into proper messages (as you can see in the background)
During testing I also noticed that the "username reservation" logic is broken for years in the API (= if you rename, your previous name is reserved up to 6 month for you exclusively unless you rename again). That was fixed right away.
The client setup section already looksup the latest release on Github:
The other content is still mostly missing.The most crucial part to be done now is the Link to Steam. the user needs to login first and then be redirected to Steam. Also the explanation how to configure your profile to public plus the error handling if it fails is the most crucial part as this led to many many support requests in the past.
So stay tuned for the next update.
