Design Your Hub Homepage

7. Design Your Hub Homepage#

Your Hub’s homepage is the first thing users see. A well-designed homepage helps users quickly understand what the Hub offers and find what they need. This chapter covers homepage structure, layout components, and design best practices.

7.1. Homepage Goals#

A successful Hub homepage should:

Goal

How to Achieve

Communicate purpose

Clear headline and summary at the top

Surface key content

Featured items and quick links

Enable discovery

Search bar and category navigation

Build trust

Contact info, update dates, ownership

Tip

Launch “minimal but usable” first. You can refine the design based on user feedback. Don’t wait for perfection.

7.2. Recommended Page Structure#

A standard WB Hub homepage follows this layout:

┌─────────────────────────────────────────┐
│  Header / Navigation                     │
├─────────────────────────────────────────┤
│  Hero Section                            │
│  - Hub name and purpose statement       │
│  - Search bar                           │
├─────────────────────────────────────────┤
│  Featured Content (3-6 items)           │
├─────────────────────────────────────────┤
│  Theme Categories / Quick Links         │
├─────────────────────────────────────────┤
│  About / How to Use                     │
├─────────────────────────────────────────┤
│  Contact / Footer                       │
└─────────────────────────────────────────┘

7.3. Build Your Homepage#

7.3.1. Step 1: Access the Layout Editor#

  1. Open your Hub site in edit mode

  2. Click Edit to enter the layout editor

  3. The page is organized into rows — each row contains one or more cards

7.3.2. Step 2: Add a Hero Section#

The hero section introduces your Hub and provides search.

  1. Add a Row at the top of the page

  2. Add a Text Card with:

    • Hub name as heading (H1)

    • Purpose statement (1-2 sentences from your planning)

  3. Add a Search Card below the text:

    • Configure to search your catalog

    • Use placeholder text like “Search for maps, data, and dashboards…”

Example hero text:

Nigeria Geospatial Data Hub

Curated geospatial data and products supporting CMU operations,
project planning, and partner collaboration.

7.3.3. Step 3: Add Featured Content#

Highlight 3-6 high-value items that represent your Hub’s purpose.

  1. Add a new Row

  2. Add a Gallery Card configured to show specific items:

    • Select items manually, or

    • Filter by tag (e.g., featured)

  3. Configure display:

    Setting

    Recommendation

    Items shown

    3-6

    Layout

    Grid (3 per row)

    Show thumbnails

    Yes

    Show item type

    Yes

What to feature:

Good Candidates

Why

Country overview dashboard

High-value, frequently accessed

Admin boundaries layer

Foundational, commonly needed

Key sector map (health, education)

Demonstrates Hub’s scope

Recent operational product

Shows Hub is active and maintained

Tip

Tag featured items with featured in AGOL. This makes it easy to update what appears without editing the Hub layout.

7.3.4. Step 4: Add Theme Categories#

Help users browse by topic.

  1. Add a new Row

  2. Add Category Cards or Button Cards linking to filtered views:

    Category

    Links To

    Foundational Data

    Catalog filtered by foundational_data tag

    Health & Education

    Catalog filtered by sector tags

    Project Operations

    Catalog filtered by operational content

    Dashboards & Apps

    Catalog filtered by item type

  3. Alternative: Add a Summary Statistic Card showing:

    • Total items in catalog

    • Number of datasets, maps, apps

7.3.5. Step 5: Add “How to Use” Section#

Help new users get started.

  1. Add a new Row

  2. Add a Text Card with:

    How to Use This Hub

    • Search: Use the search bar to find datasets, maps, and apps

    • Browse: Explore by theme using the category links above

    • Download: Click any item to view details and download options

    • Access: Some content requires organization login — sign in with your WB credentials

7.3.6. Step 6: Add Contact Information#

Build trust and provide support channels.

  1. Add a Footer Row

  2. Include:

    Element

    Content

    Hub Steward

    Name and email

    Data questions

    Contact for content issues

    Last updated

    Date of last catalog review

    Feedback

    How to report issues or request data

Example footer text:

Contact: [Hub Steward Name] (email@worldbank.org)
Data questions: [team-email]@worldbank.org
Last updated: February 2026

Found an issue? Have a data request? Email us.

7.4. Layout Components Reference#

Card Type

Use For

Text

Headlines, descriptions, instructions

Search

Catalog search bar

Gallery

Display multiple items (featured, recent)

Category

Link to filtered catalog views

Button

Call-to-action links

Map

Embedded web map

Chart

Summary statistics

Image

Logos, banners, visuals

7.5. Design Best Practices#

7.5.1. Keep It Simple#

Do

Don’t

4-6 sections maximum

Endless scrolling

Clear headings

Jargon-heavy text

Consistent styling

Mixed fonts and colors

White space

Crowded layouts

7.5.2. Prioritize Mobile#

Some users access Hubs from tablets or phones. Test your layout on different screen sizes.

Mobile Consideration

Action

Gallery cards stack vertically

Use 3 items per row max

Long text wraps awkwardly

Keep descriptions short

Search is critical

Place search prominently

7.5.3. Use World Bank Branding#

Your Hub should be recognizable as a WB resource.

Element

Guidance

Colors

Use WB Corporate Blue (#004972) for headers

Logo

Include WB logo in header or footer

Fonts

Open Sans (default in Hub) works well

7.6. Preview and Test#

Before publishing:

  1. Preview your site by clicking View

  2. Check on different devices:

    • Desktop browser (full width)

    • Tablet view (resize browser)

    • Mobile view (use browser dev tools)

  3. Test with a colleague:

    • Can they find the search?

    • Can they understand the Hub’s purpose?

    • Can they navigate to content?

  4. Verify all links work:

    • Category links go to correct filters

    • Featured items display properly

    • Contact emails are correct

7.7. Troubleshooting#

Issue

Solution

Cards not displaying

Check that content is shared to catalog group

Search returns no results

Verify catalog connection in settings

Layout looks broken

Clear browser cache; check row/card settings

Images not loading

Ensure images are shared publicly or to organization

7.8. Outcome#

After completing these steps, you have:

  • Hero section with Hub name, purpose, and search

  • Featured content gallery (3-6 items)

  • Theme category navigation

  • “How to use” instructions

  • Contact information and footer

  • Layout tested on different screen sizes

7.9. Next Steps#

With your homepage designed, proceed to Add Content to Your Hub to learn how to publish and manage catalog items.

Contents