First time user experience
Overview
The Overwolf SDK enables you to create app windows both in-game and out of it, so you can craft an ongoing experience that provides value, increases retention and improves user experience. Your user's journey begins not when he starts playing, but right after he installs and first opens your app - this first encounter with your product should behave differently and introduce your app to the user in an engaging way.
What makes for a great FTUE?
FTUE or First Time User Experience is defined as what happens during the first activation or meeting of the user with your app. This special flow may last just a few seconds like in many mobile apps or landing pages, or can take hours or even days until completed like with more complex technical and business products. In our case, we usually refer to FTUE as the first launch and first session of a user with your app. Note that these two can be separated in time and context.
Example:
In this example we’ll show you the Legendary Builds app, an app providing build recommendations for League of Legends players. There are two ways the users' first engagement with the app can go:
- Out of game (on desktop) – The user opens the app by clicking in the Overwolf dock or the desktop icon after it was installed.
Legendary Builds
- In-game – The app launches automatically when a LoL match starts.
Legendary Builds
Legendary Builds
The app's UX and design should cover all possibilities for first encounters – in game, on desktop, and any other contact points that need to be prepared for first time users. Each scenario can and should be designed to provide the best first impression and communicate with users in the way you want them to.
Home Screen
App creators should invest time and effort in designing the app’s home or main screen. The Home screen is what the user will see almost every time he opens the app, especially on desktop (after completing the FTUE).
Example for a home screen in the LoLwiz app:
Lolwiz
Desktop Usage
When starting to use the app while not in-game, in desktop mode, the user has more time and patience to investigate your app, so you should cover everything they might need or want to know before the game starts:
- App status – Is it working? Any known issues? Down for maintenance? User should know.
- User stats, profile or recent match recap.
- Last match results or match history.
- “Beta” version label if required.
- Any functional requirements of the app to properly operate, such as mandatory registration or settings that must be manually chosen.
- A tutorial onboarding users to your app and teaching the basics.
- Links to relevant information such as video tutorial, FAQs or documentation.
- Link to your app's settings screen.
- Show the app's current version number, this can be inside a settings tab.
- Log-in interface if required.
Please keep in mind that each app is different and should figure out the best way to provide user value on desktop.
Examples:
Some apps can offer value even while the game is not running yet. Legendary Builds is an example for an app that lets players check pro player builds before launching the game. Since they can prepare in advance and enter the game ready to fight, there's value here even while in desktop mode.
Legendary Builds
Another example is Killer Voices, an app that allows the user to select different voice and announcer packs for different games. This app has features that are MEANT for desktop usage rather than in-game, since selecting your favorite voice pack should happen before ever starting the game.
Killer Voices
Tutorial
Users can use instructions and an easy onboarding experience, and a good tutorial can go a long way towards that goal. A good tutorial will teach all app basics and showcase how to get value, while requiring as little of the user's time and attention as possible. A great tutorial will not even be noticed, embedded in the flow of usage seamlessly.
Tips to keep in mind while crafting your app's tutorial:
- Never interfere with the game itself. When the game starts – respect it!
- Focus on pointing out the main source of value as fast as you can, leave the rest for later.
- Texts, images and arrows are OK, but not more than that. If you want to do better, try to let the user PERFORM the actions instead of telling or showing them.
- Keep your tutorial as short as possible.
- Most apps do at least one thing really well. If you can’t point it out and explain it in a single sentence, you either lack focus or your tutorial needs more work and thought.