Skip to main content

Phase 2 - Develop Your App

Now that you have your app submission approved, you are ready to start developing your app! You should have received an email from your DevRel letting you know that account is whitelisted! It will also include links that will help you to develop your app and outline the next phases of your app development journey.

But before you jump into the development of your app, take some time to review the guides and best practices. These guides are designed to help you with your app's user interface (UI) design, ad placement (for monetization), and other important principles that will take your app from good to great!

The steps in this phase are designed to help you optimize the time you spend developing your app. At the end of this phase, you will be ready to submit your app to the DevRel QA team.

Step 1 - Deep dive into the framework​

Before you develop your app, review the differences between the frameworks in the Framework comparison table.

Points to consider when choosing a framework:

  • Overwolf Native:
    • Tighter integration.
    • Faster development time for common use cases.
    • Overwolf branding.
  • Overwolf Electron:
    • Based on Electron.JS.
    • Flexibility of Operating system support.
    • Standalone installation options
    • Self branding.

Then use the documentation to review the available APIs in your chosen framework. Overwolf’s documentation is separated by the framework, so review the APIs in the Overwolf Native client section, and in the Overwolf Electron section to better understand how to work with its components to build engaging in-game apps. In addition explore Game Events, and Overlay APIs to learn how to interact with game data and overlay features.

Overwolf provides you with sample apps for each of the framework to give you a head start in your development efforts.

Step 2 - Setup your environment​

After your app idea has been approved and your account is whitelisted, you gain access to Overwolf’s development tools. Now you can develop your app in your favorite development environment with all your favorite development tools. Overwolf recommends that you use an IDE such as VSCode, however any text editor will do. IDEs have useful features like code completion, in IDE API documentation, integrated version control, debugging tools, and more. These tools will enhance your development experience and expedite development of your app.

Step 3 - App product guidelines​

A good starting point for understanding Overwolf’s UX/UI best practices is the Front App. This is an example built to demonstrate key patterns and behaviors in a real context.

Explore the Front App to interact with examples of:

  • App layout and navigation.
  • In-game behavior and transitions.
  • Settings, subscriptions, and monetization flows.
  • Social functionality and feedback mechanisms.
note

Use this app as a reference, not a template. Don’t copy code or functionality directly, as not everything will apply to your use case. Instead, focus on the UX thinking behind the flows and adapt relevant ideas to fit your app’s needs.

Additional UX Considerations​

  • Hotkeys are a key in-game interaction method in Overwolf apps. Make sure to assign intuitive defaults, let users rebind keys via the app’s settings, and provide clear, non-intrusive visual feedback to guide users during gameplay.
  • Second Screen Support is a valuable UX and business opportunity. With 30% of users having multiple monitors, this allows for seamless multitasking, persistent engagement, and increased monetization potential throughout a session.
  • Responsive Layouts help your app to adapt smoothly to different screen sizes and resolutions. Prioritize clarity and usability within compact layouts, especially since Overwolf apps aren't always displayed in full-screen. Ensure key information remains accessible and well-organized at all sizes.
  • Ad Integration is best when planned for early in the design process. Unlike web layouts with flexible grids, ads in Overwolf apps directly affect layout and flow. Integrate them thoughtfully across screens to maintain a balanced user experience while supporting monetization goals.

Next steps​

So, have you read through all the steps above? Have you familiarized yourself with your chosen framework? Have you set up your development environment to help you develop your app? Have you optimized your app using the best practices in the guides referenced above?

Excellent!! Now you are ready to move onto the next phase of your journey!

This is where you will pre-test and submit the first version of your app for review and QA by the DevRel team!. Overwolf will test your app and verify that it meets the guidelines and standards above, and is ready for launch.