Page design and layout

Quick links

The layout of each page on intelliflo.com should reflect our commitment to clarity, usability, and professionalism. These guidelines help ensure a consistent experience across all page types, whether users are browsing for information, exploring solutions capabilities, or reading about customer success stories.

A well-structured page allows users to navigate effortlessly, digest content quickly, and take meaningful action. The following guidance outlines key principles for content hierarchy, spacing and padding, and page-specific layout rules.

Content hierarchy

Effective content hierarchy helps users quickly understand the purpose of a page and locate the information most relevant to them. All pages should follow a structured format that supports scanning, accessibility, and search engine optimisation.

  • Primary heading (H1)

Each page must include a single, clear H1 that summarises the page’s core purpose. This should appear prominently near the top of the page, typically within the hero area.

  • Supporting headings (H2–H4)

Use H2 for main sections, H3 for subsections, and H4 for smaller breakouts (e.g. within a bulleted list or nested content). Avoid skipping heading levels, as this can create confusion for users and screen readers.

  • Introductory text

Include 1–2 concise lines below the H1 to provide users with a clear overview of what the page covers. This is especially useful for SEO and helps set expectations for the content that follows.

  • Call to action (CTA)

Pages should include a clear CTA aligned with user intent, whether it’s booking a demo, downloading a brochure, or exploring a related product. Prioritise one primary CTA per screen. Secondary CTAs may support discovery but should not compete for attention.

CTA example
  • Visual hierarchy

Apply consistent font sizes, weights, and colours to reflect content importance. Use bold type and accent colours to highlight key points, while ensuring sufficient contrast for accessibility.

Layout rules by page type

Below are layout rules and content patterns for common page types on intelliflo.com. These help ensure users have a coherent and intuitive experience as they move between different areas of the site.

Landing pages

Landing pages are designed to convert interest into action. They often support campaigns, product introductions, or gated content.

Hero section

  • Start with a bold, benefit-driven H1
  • Include a short explanatory line and a prominent CTA
  •  Consider adding a product image or illustration to reinforce the message

Content blocks

  • Use modular blocks to present product benefits or features, ideally 3–5 sections
  • Alternate background colours or subtle dividers for visual separation
  • Keep copy concise and direct, with a focus on user outcomes

Social proof

  • Feature client logos, testimonials, or recognisable metrics to build credibility
  • Use trusted voices from the financial adviser community where possible

CTAs

  • Include at least one CTA above the fold
  • Repeat the CTA mid-page and again at the end for reinforcement
  • Ensure each CTA leads to a clear, action-oriented destination (e.g. demo form, sign-up page)

 

Example:

Insights articles 

Blog articles provide in-depth insights, updates, and perspectives relevant to our audience.

Header area

  • Include the blog title (H1), and if possible, author name, and publish date
  • Add an optional category tag for filtering and SEO
  • A featured image may be used to enhance visual appeal

Main content

  • Keep content left-aligned, with a readable line length
  • Use subheadings (H2–H3) to break up content
  • Pull quotes, images, and bullet points help improve scannability
  • Link to related posts where appropriate

Footer

  • Add share buttons (LinkedIn, X, email) and a light CTA to explore more content

Customer testimonials and case studies

These pages showcase real outcomes for firms using intelliflo, helping build trust and demonstrate value.

Intro and summary

  • Start with a short summary of the client and the challenge solved
  • Include the client logo and key outcomes in a scannable format

Two-column layout

  • Use a balanced layout with text on one side and visuals (e.g. client photo or quote) on the other
  • Highlight a standout quote using large type or pull-out styling

Metrics and results

  • If available, present quantifiable outcomes using icons or infographics
  • Keep the focus on impact: efficiency gains, client satisfaction, time saved, etc.