Skip to content

🎨 UI/UX Guidelines

WebView

The Earth Miles web app is designed to feel like a native part of your application. Treat it as such - not as an embedded third-party page, but as a seamless screen within your own product. Users should never feel like they have left your app.

Full-Screen WebView

Do not display a native app bar or navigation bar above the WebView. The web app provides its own UI, and an additional app bar creates visual clutter and reduces usable screen space. Render the WebView edge-to-edge so the web app occupies the full screen.

Back Navigation

Handle the back gesture/button so that it first navigates backwards through the web app's internal history. Only when the web app has no more history to go back to should the back action dismiss the WebView and return the user to the previous screen in your app.

Balance View

Users should always be aware of their Earth Miles balance. Surfacing this information prominently in your app keeps users engaged and motivated to earn and redeem rewards.

Recommendations:

Balance displayed on map view

  • Preferred: Display the user's points balance directly on your map view. This surfaces the balance in context, helping users make the connection between your service and the rewards they're earning. Look at the example on the right for inspiration.
  • If your app doesn't have a map view, place the balance on a prominent screen such as the home screen, a profile section, or directly on the button or entry point that opens the Earth Miles WebView.
  • Be sure to display the total points so users can instantly see their balance on their EM account.
  • Refresh the balance after the user returns from the WebView, so any points earned or spent during the session are reflected immediately.

The user's balance can be fetched via the Partner API. Fetch it when the user's session starts and again whenever they close the WebView.

Keep It Visible

A user who can see their balance is far more likely to open the web app and spend or earn points.
If you're unsure where best to place this, it's a great topic to align on during your kickoff meeting.