Close
Mini App Life Cycle UI/UX guidelines FAQs Contact Us

UI/UX guidelines

Get started

Design Mini Apps that feel native to MoMo

All Mini Apps should deliver a consistent, trusted, and easy-to-use customer experience within the MoMo ecosystem. These are the core UI/UX guideline areas we’ve identified to help you create a Mini App that matches the MoMo look-and-feel.

Design principles

Keep it simple

Your Mini App journeys should be clear to understand and quick to complete. Avoid unnecessary screens, duplicate steps, and complex language.

Optimise for performance

Design for fast loading and low data usage. Avoid heavy assets, unnecessary animations, and large page elements that may slow down the customer experience.

Make it accessible

Use clear labels, readable text, sufficient colour contrast, and touch-friendly components. The PWA integration guidance references minimum touch targets, contrast, reduced payloads, compressed assets, lazy loading, and support for older or low-end devices.

Design for local relevance

Use language, flows, and payment journeys that are appropriate for the target market. Where needed, adapt content to the local country, service category, and customer behaviour.

UI standards

Navigation

  • Keep navigation clear and predictable.
  • Use short labels for menu items.
  • Provide a visible back or close action where required.
  • Avoid deep navigation paths that make it difficult for customers to return to the beginning.

Layout

  • Prioritise the main action on each screen.
  • Use clean layouts with clear content hierarchy.
  • Group related information together.
  • Ensure responsive behaviour across mobile and web views.

Typography

  • Use readable font sizes.
  • Keep headings short and descriptive.

Colours and branding

  • Align with MoMo and MTN brand standards.
  • Avoid using colours in a way that may confuse the customer.
  • Use colour consistently for primary actions, alerts, warnings, and success states.
MoMo Blue
#004F71
Sunshine Yellow
#FFCC05
MoMo Dark Blue
#003654
MoMo Light Blue
#4D849C
MoMo Extra Light Blue
#CCDCE3
MoMo Gradient
#003654 - #004F71
MoMo Dark Gradient
#004F71 - #003654

Buttons

  • Maximum of three words per button.
  • You can change the colour of the tertiary button to red only when communicating deletion or cancellation.
  • Grey buttons are inactive states when a button is not press-able.
  • Width = 100% body (minus the 20px padding on each end).
  • Height = 40px.
  • Text = 14, medium.
PrimarySecondaryTertiary
PrimarySecondaryTertiary

Placement

  • Fixed to the bottom.
  • 100% of the viewport (width) with 20px margins on left and right.
  • Stack the buttons when more are displayed, the primary button on top.
  • Only place the tertiary button with the primary in instances wherein the secondary action is not desired.

UX patterns

Onboarding and consent

When customer consent or permissions are required, explain why the information is needed and what the customer is agreeing to.

Payments and confirmation

Payment journeys should clearly show:

  • Merchant or service name.
  • The amount.
  • Fees, where applicable.
  • Customer confirmation step.
  • Success or failure outcome.
  • Receipt or reference number.

Error states

Error messages should be clear, helpful, and actionable. The portal requirements explicitly call for detailed error codes, descriptive messages, and actionable steps rather than generic errors.

Example:
Instead of: “Transaction failed.”
Use: “Payment couldn’t be completed because the wallet has insufficient funds. Please add funds and try again.”

Empty states

Where there is no data to show, explain what the customer can do next.

Example:
“You haven’t made any bookings yet. Start by selecting a hotel.”

Loading and offline states

Show progress while content loads and provide a friendly message when the customer has poor connectivity or the service is temporarily unavailable.

Design resources

Recommended downloadable assets

  • Mini App design checklist
  • UI component library
  • Figma design kit
  • Payment journey templates
  • Error state examples
  • Submission readiness checklist

The requirements document references design kits, reusable components, templates per category, and shared libraries as part of the Mini App Documentation Hub.

Suggested CTA buttons

  • Download UI/UX checklist
  • View design templates
  • Submit UX for review
Get started