Overwolf Front App, Layout and UX Guide
In your journey of creating a genuinely legendary app, you will need tools to assist you. Overwolf is here to provide support so your app can be truly legendary. Overwolf's Front App is designed to be used by the developers community as a demonstration of the basics of Overwolf app layouts and capabilities. Use it as a reference to learn the best practices of user experience and app flows.
Do not copy the code for functionality and logic from the Front App! Not all of the content presented in the Front App will necessarily fit your app! Make sure you have read the Basic sample app documentation.
Installing and running the Front App
To download and install the front app:
- Download the Front App.
- Unpack the
.opkfile using a file archiver tool (e.g., 7-zip). - In your Overwolf client, open Settings, then press About, then press Developer Options. See Setting up your dev environment if your Developer Options is not available.
- Press Load unpacked to load the Front App.
The Front App is configured to run automatically when you start a game. You can also run the Front App without a game by pressing Launch/Relaunch in the Packages window.
Front App elements
The Front App is designed to provide developers a clear and practical understanding of how Overwolf apps are intended to function and behave. Use the Front App as a reference for building Overwolf apps that meet the app product guidelines. Hover over the tool tips in the Front App to help you better understand the different design elements.
Basic app navigation
When designing your app think about how you want your user to view the information your app provides. Break out app functionality into tabs that are easily identifiable so that users can quickly get the information they need. For example, put data and screen captures into different tabs with different icons so that users are able to differentiate between the different functionality your app provides. Provide separate windows within the screen for different types of data making it easy for the user to find what they are looking for. Hover over the tooltips in the Sample - statistics and User's nickname pane for more information about how different panes can be used to present useful information.
App status health Check
It is important to keep users informed of the status of your app, especially if you are using Game events. Using an indicator similar to what you see in the Front App, you will be able to keep users up to date with any kind of changes in game events. It's recommended that you keep the indicator simple and easy to read using the event health level statuses.
Hover over the Status simulator in the Front App to see and change the status levels.
App settings
The app settings screen is an important part of your app. This is the screen that gives users configuration options for your app. You should provide simple, clear, and useful settings in categories that are simple and intuitive. This way users can quickly find what they are looking for.
Recommended settings for your app include:
- App control—let the user configure app actions based on specific triggers.
- General settings—let the user configure general behavior settings for the app.
- Hotkeys settings—let the user configure the Hotkeys settings for the app.
It is also recommended that the changes be saved upon exit from the screen to avoid having extra buttons on the screen.
Hover over the tooltips in the Settings screen for an explanation of the different types of settings that are recommended in Overwolf apps.
Monetization
Advertisements (ads) offer a way to monetize your app without compromising its user experience. While the Front App contains a single ad container, there are other ad layouts available. For more information, see Ad layouts. Hover over the tooltip in the Ad container for an explanation of how ads help you monetize your app.
Subscriptions
Overwolf Subscriptions by Tebex offer a direct and sustainable monetization strategy for your app, allowing users to pay a recurring fee for access to premium or exclusive features. Subscriptions also enable you to generate consistent revenue over time rather than relying only on ad-based income. Subscriptions can also be used for the removal of ads, advanced configuration tools, enhanced customizations, access to beta features, and other enhanced user experiences.
Press Premium in the left navigation pane of the Front App to see an example of how subscriptions can be offered directly in your app. For more information, see Overwolf subscriptions by Tebex. Hover over the tooltips in the Premium screen for an explanation of how subscriptions help you monetize your app.
In-Game behavior
When designing an Overwolf app, it is essential to prioritize the user experience. The goal is to provide valuable information and functionality without interfering with gameplay. See the In-game and overlay windows guide for best practices on in-game behavior. Here you can see two examples of in-game windows.
Primary screen
The in-game primary screen is typically used during gameplay for game related information. Information in this screen should be dynamic in order to keep users engaged. This screen is available in the Front App when you start a supported game. For more information on the primary screen and its components, hover over the tooltips in the various panes.
App loading screens
Use app loading screens, also called companion screens, when there may be extended loading times for your app. These screen act as transitions and provide additional value by displaying relevant data and monetization options. However, you should avoid using this screen if you app doesn't require time consuming activities. This screen is available in the Front App when you start a supported game. For more information on the primary screen and its components, hover over the tooltips in the various panes.
The Front App supports a number of games including:
- Minecraft.
- League of Legends.
- Valorant.
- Counter-Strike 2.
- Fortnite.
- Many others. Contact your DevRel to see if your game is supported in the Front App.
Feedback and Bug report
User feedback and bug reporting are essential to maintain a quality app. Providing a feedback button as well as a way to report bugs or other issues gives users a way communicate their experience with your app. You can also use bug reporting to automatically collect user logs so that you can diagnose issues and fix problems they may have. Hover over the tool tips for Got feedback? and the little bug for an explanation of how these elements can help improve your user's experience. For more information, see Understanding Overwolf logs.
Social functionality
Another way of engaging with your users is through an online community. Your users can provide valuable feedback through discussions, sharing of ideas and experiences, and other insightful information. One example of a social app is Overwolf's Discord integration. It is a popular feature that provides an easy way display actionable data in a Discord user's profile about what they're up to in your app. Hover over the Discord icon tooltip for more information on how social app integration can help your app.
