Description
Product-led growth (PLG) is a business methodology in which user acquisition, expansion, conversion, and retention are all driven primarily by the product itself.
This guide aims to create consistency in how we design experiences that assist and educate users within our products, supporting them to get the most out of our features, and to add new features if and when required.
These experiences are broken down into 3 types:
- Onboarding and activation. Introduce first-time users to our apps in a structured way
- Nurture and expansion. Guide active users towards deeper adoption after they’ve learned the basics
- Monetisation and upsell. Support power users whose requirements have grown beyond their current plan
Onboarding typically concludes when a user completes the essential setup steps and can navigate the product independently without guided prompts. After this point, guidance should transition to contextual, in-product support rather than a structured flow.
Types of PLG banner
Prominent
High visibility for critical or time-sensitive information
Moderate
Moderate visibility without being intrusive
Contextual
Use inside containers or in dense layouts. This borderless callout uses a divider line above or underneath to separate it from surrounding content, preserving hierarchy and emphasis without adding extra boxed elements.
Low disruption in-context hints or nudges
Graphics for embedded Banners
- Use graphic assets to support and highlight the message.
- Keep graphic assets simple and easy to recognize.
- Only use graphic assets when they add meaning.
- Always pair graphic assets with short labels for clarity.
- Avoid using graphic assets in modal windows.
Spot icon
Illustration
Glossy UI
Product-Led Growth in practice
The more critical and time-sensitive the information, the more interruptive and prominent the placement should be.
High prominence
- Use to communicate important, time-sensitive, or site-wide information.
- For example: alerts, announcements, updates.
At the top of a page
On a full page
Inside a modal dialog
In context
- Use to highlight key information, tips, or definitions based on the user's current context.
- To avoid breaking the user's focus, integrate banners into their flow.
Within a content card
In a sidebar panel
Inline with related content