Design billing pages in a mobile broadband app

You should provide the user with the ability to view a billing summary, billing history, make payments, or recharge the plan.

view bill page

The Make a payment form should adhere to form guidelines that are described in Design purchase flows in a mobile broadband app. This page can be linked to from the Billing page for post-paid plans, and through the Recharge now button on the landing page for prepaid plans.

make payment form

Quick summary

Appropriate design for the billing page:

  • Follow the form guidelines, including left alignment, white space, proper grid alignment, and touch friendliness.

  • Use a simple layout to improve readability.

  • Use vertical scrolling for long forms because this makes it easier to tab and to use the online keyboard.

  • Make the making payments process a simple experience.

Inappropriate design for the billing page:

  • Don’t try to fill up white space.

  • Don’t use an iframe to host the flows. Instead, build flows directly into the app experience.

  • Don’t make the user wait long times without providing visual feedback.

  • Don’t link to external sites outside of the app.

Additional resources

Related topics

Designing the user experience of a mobile broadband app

Send comments about this topic to Microsoft