Content & Messages
Message
When to use: Welcome text, instructions, confirmations
What users see: A simple message, which can include variables or rich formatting
What users see: A simple message, which can include variables or rich formatting
Section
When to use: Organizing related content, breaking up longer flows
What users see: Grouped content with optional expandable sections
What users see: Grouped content with optional expandable sections
- Keep messages short and conversational
- Use sections to reduce cognitive load
- Add clear next steps so users know what to do
Documents & Media
PDF Display
When to use: Terms and conditions, statements, official documents
What users see: A PDF preview with options to download or print
What users see: A PDF preview with options to download or print
Image Display
When to use: Product photos, diagrams, instructions
What users see: An image with optional captions or zoom
What users see: An image with optional captions or zoom
- Use PDFs for legal or static content
- Use images sparingly to clarify, not overwhelm
- Always provide text alternatives for accessibility
Data Visualization
Charts
When to use: Portfolio performance, financial projections, usage trends
What users see: Interactive bar, line, or pie charts
What users see: Interactive bar, line, or pie charts
Comparison Tables
When to use: Compare products, coverage options, or rates
What users see: A clear side-by-side table for quick scanning
What users see: A clear side-by-side table for quick scanning
- Keep visuals simple — highlight the key takeaway
- Use charts for trends and comparisons, tables for details
- Test layouts on mobile to ensure readability
Best Practices
- Be concise: Keep text short and scannable
- Guide the user: Always include context or a next step
- Stay consistent: Use a clear visual style across your flow
- Think accessibility: Ensure color contrast and add alt