# 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.

## 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.
```

## Recommended Page Structure

A standard WB Hub homepage follows this layout:

```text
┌─────────────────────────────────────────┐
│  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                       │
└─────────────────────────────────────────┘
```

## Build Your Homepage

### 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**

### 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:**

```text
Nigeria Geospatial Data Hub

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

### 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.
```

### 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

### 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

### 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:**

```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.
```

## 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 |

## Design Best Practices

### 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 |

### 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 |

### 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 |

## 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

## 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 |

## 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

## Next Steps

With your homepage designed, proceed to {doc}`add-content` to learn how to publish and manage catalog items.