Apps FTUE Best Practices
We all know the basics of tutorial and on-boarding phases - baby steps, clear messages, let user try instead of showing, and so on. But due to recent changes on the platform itself, we wanted to point out the differences you should pay attention to.
That’s why, I am happy to present you with a short guide containing all we have recently learned about how to welcome users into your apps and our platform - First Time User Experience (FTUE).
Updates Recap
This chapter will help you catch up with the recent changes (Q2–3, 2017) we’ve made to the Overwolf platform and services we offer.
Acquisition
Assuming you’re the owner of an app (congrats!), users can get your app in few different ways - direct download from the store, a predefined bundle or even your own landing page.
We have learned from our data that downloading Overwolf with an app increases the retention rate, but downloading it without understanding why you get Overwolf with it decreases it.
The steps we take to make sure that users stay with us for the long run are:
- Your own landing page, if you have one, should have a “Get it on Overwolf” button instead of the “Download” you probably have.
- The button will lead the user to your app’s page on Overwolf.com so they are exposed to Overwolf.
- The Overwolf site has changed its landing page to the store itself and encourage user to pick and download one app.
- The option to download an “empty” Overwolf version (with no apps) still exists, but is left as the last option in the hierarchy.
Installation
The Overwolf installer distinguishes between apps and bundles and deliver the right messages with a whole new looks.
The Installer can show the following flows:
- “Selected” apps - bundle of Overwolf with an app the user has selected to download: Leads user to use the app ASAP.
- General apps, No apps or custom cases - bundle of Overwolf that does not provide the user with maximum value: Leads the user to find additional value on our store after installation.
If your main acquisition channel is the store, your users will get the “Selected” flow so your app is the focus of the process.
On-boarding
We created a new on-boarding (FTUE) experience and we keep improving it. Especially in the messages we convey to the user.
More information will be revealed in the near future because we are working on more improvements on that front. And now…
A Great FTUE
So… what is a FTUE anyway? What makes it great?
FTUE is defined as “the first encounter of a user with the product”.
The encounter may last just a few seconds (as happens in mobile apps or landing pages), or can take hours or even days until completed (as in getting to know complicated systems).
In our case, we usually refer to the FTUE as the first launch and first session of a user with your app. Those can be separated in time and context.
- Landing page, app’s page in our store (tile, screenshots) and more, can also counted as your FTUE, if done right.
Example - the Legendary Builds app (builds for champions in LoL) will be launched after installation on desktop and provide value starting right away.
The app’s UX designer should address all possibilities for first encounters - in game, on desktop, the transition and more. Each scenario can and should be designed to provide the first impression you want. Your revenue depends on it (Revenue? what?).
Home Screen
We recommend apps to invest time and efforts in designing the app’s “home” screen.
The Home screen is what the user will probably see every time he opens the app, especially on desktop or after first launch.
When it comes to in-game experience, it is clear that the functionality in display should be game related (tracking, stats etc.), but what would be considered as a good value on Desktop?
Possible Desktop Values
On desktop mode, the user is more patient and has more time to investigate your app, so you should give him what he wants and needs before he enters a game with it, such as:
- Show app’s status — working, known issues, down for maintenance etc.
- User stats, status, record or data as a recap
- Last match results or history of activity
- “Beta” version label
- Allow preparation of the app, if it is required for proper operation (such as mandatory registration) or highly important settings needed to be adjusted
- Tutorial
- Links to popular information such as video tutorial, FAQs, documentation.
- Link to Settings screen
- Show version number (can also be inside Settings)
- Registration/login, if required.
Please keep in mind that each app is different and should consider carefully the desktop value.
Values Priority
Best Value
The best value is the game/user related content, of course.
If game data must be available for providing content, or other prerequisites must be completed first (e.g. registration), guide the user how to fulfill those first.
On top, your app may not be as clear as you think it is. Remember to include some form of a tutorial (image, video, link to video, coach marks etc.).
Mandatory Value
Even if you have no content to show on desktop, and may even decided not to develop a “home” screen, your first screen should always reflect the status of the app and known issues.
Without it, you lose the user’s trust at the first time he enters a game and you failed him not because the app didn’t work, but because you didn’t tell him that in advance.
If registration is required, make sure you pass the user through it before he enters a game and expects to use the app.
Examples
Some apps can, and should, offer value when opened on desktop while the game is not played yet.
This app allows a LoL player to check popular builds before launching the game. This allows preparations in advance therefore increase the value of the app, and provides desktop value altogether.
Lolwiz’s home screen reflects the app’s status in a clear, clean way and does not take risk with unrelated content in addition to more “how to” information.
This app lets you know it is a Beta version, so it coordinates expectations with the player before the usage. It also reminds you that without accepting the EULA agreement of TeamSpeak itself, nothing would work.
This app allows the player to select in advance which sound effects he wants to hear upon occurrence of in-game events.
In fact, this kind of setting is NOT something a player should do in game, but rather on Desktop.
CTA — Call To Action
Any screen should contain a clear call to action. This is your chance, and duty, to push the user toward the real value you provide him with.
A CTA can be any of the following, or others:
- Enter a game to see the stats
- Sign up
- Login
- Click the following link
- Follow the steps to… and more.
A CTA can also be a simple text instruction, rather than a button to click on.
Examples for CTAs would be:
Tutorial
A good tutorial will help you understand the main functionalities of the app and how to use it, in the least amount of time and efforts.
A great tutorial would be transparent to the user, and embedded in the flow of usage.
Pointers for a great tutorial for an Overwolf app:
- Never interfere with the game itself. When game starts - respect it!
- Focus on how to get the main value at first, and leave the rest for later.
- Texts and arrows are just “ok”… not more than that. Strive to let the user PERFORM the actions instead of telling him or showing him.
- Keep it as short as possible. Most apps do (or should do) one good thing. If you can’t explain it in a sentence, you either offer too much without focus or just have to redesign the tutorial.
More Examples:
State in a clear way in which games you support, especially if you have a “global” app that is dedicated to many/all games such as TeamSpeak, browser etc.
You should convey this message before the download…
Overwolf is an open apps platform for PC games. we support almost 800 games with our overlay technology and you can easily create your own in-game apps by using our SDK for completely free. Please check our Developers website for more information!
For more tips and strategies on how to improve your app, follow our blog! Feel free to contact us at any time with any question for more guidance and tips through the comments or by following us on Twitter, or join us on Slack.