Story 6.3: Partner Directory - Wireframe

Story: Story 2.8 (Epic 2) - Partner Management Frontend

Last updated: December 20, 2025 Reading time: 18 minutes File size: 31.01 KB

Implementation Scope:

  • โœ… Story 2.7 (Epic 2): Partner Coordination Service Foundation (backend APIs)
    • Partner CRUD with meaningful IDs (companyName)
    • Contact Management (stores username)
    • Topic Voting & Suggestions
  • ๐Ÿ“ Story 2.8 (Epic 2): Partner Management Frontend (THIS WIREFRAME)
    • Organizer UI for partner directory/detail
    • Basic partner CRUD interface
    • Contact management UI
    • Read-only topic voting display
  • ๐Ÿ“ฆ Epic 8 (Deferred to Phase 2): Advanced Partner Portal Features
    • Engagement score calculation & analytics dashboard (Story 6.1)
    • Interactive topic voting interface (Story 6.4)
    • Full meeting coordination UI (Story 6.2)

IMPORTANT (ADR-003 Compliance):

  • All API endpoints use {companyName} (meaningful ID), NOT {partnerId} (UUID)
  • Contact endpoints use {username} (meaningful ID), NOT {contactId} or {userId} (UUID)
  • Example: GET /api/v1/partners/GoogleZH (NOT /api/v1/partners/{uuid})

Visual Wireframe

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ โ† Back to Dashboard    Partner Directory                   [+ Add Partner]      โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚                                                                                   โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€ FILTERS & SEARCH โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”‚
โ”‚  โ”‚                                                                           โ”‚   โ”‚
โ”‚  โ”‚  ๐Ÿ” [Search partners by name...]           [All Tiers โท] [All Status โท] โ”‚   โ”‚
โ”‚  โ”‚                                                                           โ”‚   โ”‚
โ”‚  โ”‚  Quick Filters:  [๐Ÿ† Strategic] [๐Ÿ’Ž Platinum] [๐Ÿฅ‡ Gold] [๐Ÿฅˆ Silver] [๐Ÿฅ‰ Bronze]  โ”‚   โ”‚
โ”‚  โ”‚                                                                           โ”‚   โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ”‚
โ”‚                                                                                   โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€ PARTNER OVERVIEW โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”   โ”‚
โ”‚  โ”‚                                                                            โ”‚   โ”‚
โ”‚  โ”‚  ๐Ÿ“Š Total Partners: 24        Active: 22        Engaged: 18 (82%)        โ”‚   โ”‚
โ”‚  โ”‚                                                                            โ”‚   โ”‚
โ”‚  โ”‚  Tier Distribution:  ๐Ÿ† Strategic (1)  ๐Ÿ’Ž Platinum (2)  ๐Ÿฅ‡ Gold (6)  ๐Ÿฅˆ Silver (9)  ๐Ÿฅ‰ Bronze (6)  โ”‚   โ”‚
โ”‚  โ”‚                                                                            โ”‚   โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜   โ”‚
โ”‚                                                                                   โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€ PARTNER LIST โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚  Sort by: [Engagement Score โท]  View: [Grid โ–ฆ]  [List โ˜ฐ]                  โ”‚  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚                                                                      โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”  ๐Ÿ† STRATEGIC                                              โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”‚[Logo]โ”‚  TechCorp AG (GoogleZH)          Engagement: โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆ 92%  โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                                                            โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿข Software & IT Services                                  โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ‘ค Contact: Maria Schmidt (m.schmidt@techcorp.ch)         โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ“Š Last Event: Spring 2025 (15 attendees)                 โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ—ณ๏ธ Topic Votes: 5 active  |  ๐Ÿ“… Next Meeting: May 20      โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚                                                                      โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           [View Details] [Send Email] [Schedule Meeting] [Analytics]โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”  ๐Ÿฅ‡ GOLD                                                   โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”‚[Logo]โ”‚  Swiss Financial Group          Engagement: โ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘ 78%  โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                                                            โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿข Banking & Finance                                       โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ‘ค Contact: Peter Weber (p.weber@swissfinance.ch)         โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ“Š Last Event: Spring 2025 (8 attendees)                  โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ—ณ๏ธ Topic Votes: 3 active  |  ๐Ÿ“… Next Meeting: June 15     โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚                                                                      โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           [View Details] [Send Email] [Schedule Meeting] [Analytics]โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”  ๐Ÿฅˆ SILVER                                                 โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”‚[Logo]โ”‚  Innovation Labs               Engagement: โ–ˆโ–ˆโ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘ 56%   โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                                                            โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿข Technology & Research                                   โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ‘ค Contact: Anna Mรผller (a.mueller@innovlabs.ch)          โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ“Š Last Event: Fall 2024 (4 attendees)                    โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ—ณ๏ธ Topic Votes: 1 active  |  ๐Ÿ“… Next Meeting: Pending     โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚                                                                      โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           [View Details] [Send Email] [Schedule Meeting] [Analytics]โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”  ๐Ÿฅ‰ BRONZE                                                 โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ”‚[Logo]โ”‚  StartupHub Bern               Engagement: โ–ˆโ–ˆโ–‘โ–‘โ–‘โ–‘โ–‘โ–‘ 34%   โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”˜                                                            โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿข Startup Incubator                   โš ๏ธ Low Engagement   โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ‘ค Contact: Thomas Klein (t.klein@startuphub.ch)          โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ“Š Last Event: Spring 2024 (2 attendees)                  โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           ๐Ÿ—ณ๏ธ Topic Votes: 0 active  |  ๐Ÿ“… Next Meeting: Not scheduledโ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚                                                                      โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚           [View Details] [Send Email] [Schedule Meeting] [โš ๏ธ Follow Up] โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚                           [Load More Partners (20 more) โ†“]                 โ”‚  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚
โ”‚                                                                                   โ”‚
โ”‚  โ”Œโ”€โ”€โ”€โ”€ BULK ACTIONS โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚  Selected: 0 partners                                                       โ”‚  โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ”‚  [ Select All ] [ Send Bulk Email ] [ Export Contact List ] [ Generate Report ]โ”‚
โ”‚  โ”‚                                                                             โ”‚  โ”‚
โ”‚  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ”‚
โ”‚                                                                                   โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Key Interactive Elements

  • [โ† Back to Dashboard] button: Return to Event Management Dashboard (story-1.16-event-management-dashboard.md)
  • [+ Add Partner] button: Opens partner creation workflow (promotes company to partner status)
  • Search input field: Real-time partner name search with autocomplete
  • [All Tiers โท] dropdown: Filter by partnership tier (Strategic, Platinum, Gold, Silver, Bronze, All)
  • [All Status โท] dropdown: Filter by engagement status (Active, Inactive, Low Engagement, All)
  • Quick filter badges: One-click tier filtering (๐Ÿ† Strategic, ๐Ÿ’Ž Platinum, ๐Ÿฅ‡ Gold, ๐Ÿฅˆ Silver, ๐Ÿฅ‰ Bronze)
  • [Engagement Score โท] dropdown: Sort options (Engagement, Name, Industry, Last Event, Tier)
  • View toggles [Grid โ–ฆ] [List โ˜ฐ]: Switch between grid and list view layouts
  • Partner cards: Click anywhere to view full partner details
  • [View Details] button: Navigate to Partner Detail Screen
  • [Send Email] button: Opens email composition with partner contact pre-filled
  • [Schedule Meeting] button: Opens meeting scheduler with partner availability
  • [Analytics] button: Navigate to Partner Analytics Dashboard (if FR4 restored post-MVP)
  • [โš ๏ธ Follow Up] button: Creates follow-up task for low-engagement partners
  • Checkbox selection: Multi-select partners for bulk actions
  • [ Select All ] button: Select all visible partners
  • [ Send Bulk Email ] button: Send email to selected partners
  • [ Export Contact List ] button: Download selected partners as CSV/Excel
  • [ Generate Report ] button: Create engagement report for selected partners

Functional Requirements Met

  • FR8: Partner strategic input coordination through topic voting visibility
  • FR4 (Backlog): Partner analytics dashboard access (analytics button shown but links to backlog)
  • Partner Management: Centralized partner directory with tier management
  • Communication: Direct email and meeting scheduling capabilities
  • Engagement Tracking: Visual engagement scores and activity indicators

Technical Notes

  • Real-time Search: Debounced search with 300ms delay using Lodash debounce
  • Lazy Loading: Virtual scrolling for 100+ partners using react-window library
  • Tier Badges: Material-UI Chip components with tier-specific colors (๐Ÿ† Strategic, ๐Ÿ’Ž Platinum, ๐Ÿฅ‡ Gold, ๐Ÿฅˆ Silver, ๐Ÿฅ‰ Bronze)
  • Engagement Calculation: โš ๏ธ Deferred to Epic 8 (Story 6.1) - Currently showing placeholder/mock data. Full calculation: topic votes (30%), event attendance (40%), meeting participation (20%), content interaction (10%)
  • Responsive Grid: Material-UI Grid with breakpoints (xs=1, sm=2, md=2, lg=3 columns)
  • Export Functionality: CSV generation using Papa Parse library
  • Email Integration: Opens system mailto: link or integrates with email service
  • Meeting Scheduling: Integration with calendar API for availability checking
  • Data Refresh: Auto-refresh every 5 minutes for engagement scores

API Requirements

Initial Page Load APIs

Note: This wireframe uses the Partners API from Story 2.7 (Partner Coordination Service Foundation).

IMPORTANT (ADR-003): All endpoints use companyName (meaningful ID), NOT UUID identifiers.

  1. GET /api/v1/partners?filter={โ€œstatusโ€:โ€œactiveโ€}&sort=-partnershipLevel&page=1&limit=50

    • ADR-003: No partnerId in response - partners identified by companyName
    • Query params: filter (JSON filter), sort (partnershipLevel, companyName), page, limit
    • Returns: Array of partner entities (companyName, partnershipLevel, startDate, endDate, isActive)
    • Used for: Display partner list
    • Note: Engagement scores deferred to Epic 8 (Story 6.1) - show placeholder data in Story 2.8
  2. GET /api/v1/partners (count aggregation via application logic)

    • Story 2.8 Implementation: Frontend calculates summary from partner list response
    • Returns: Standard partner list, frontend counts active, calculates tier distribution
    • Used for: Display partner overview section and tier distribution
    • Note: Backend aggregation endpoint could be added later for performance optimization
  3. GET /api/v1/partners/{companyName}?include=contacts โœ… ADR-003 Compliant

    • ADR-003: Uses companyName path parameter (e.g., /api/v1/partners/GoogleZH)
    • Query params: include=contacts (embeds contact information via HTTP enrichment)
    • Returns: Partner entity with embedded contacts enriched from User Service
    • Used for: Display contact information on partner cards
    • Story 2.7: Backend calls GET /api/v1/users/{username} to enrich contact data

User Action APIs

  1. GET /api/v1/partners?filter={โ€œcompanyNameโ€:{โ€œ$containsโ€:โ€œTechโ€}}&limit=20 โœ… ADR-003

    • ADR-003: Search by companyName (meaningful ID), NOT partnerId
    • Triggered by: User types in search box
    • Query params: filter (JSON with text search operators), limit
    • Returns: Filtered partner list matching search term
    • Used for: Real-time search results, autocomplete suggestions
  2. GET /api/v1/partners?filter={โ€œpartnershipLevelโ€:โ€œGOLDโ€,โ€œisActiveโ€:true}&page=1 โœ… ADR-003

    • Triggered by: User selects tier/status filters
    • Query params: filter (JSON with multiple criteria)
    • Returns: Filtered partner list
    • Used for: Filter partners by tier (partnershipLevel: BRONZE, SILVER, GOLD, PLATINUM, STRATEGIC) and active status
    • Note: engagementLevel filter deferred to Epic 8 (requires engagement calculation)
  3. POST /api/v1/partners โœ… ADR-003 Compliant

    • ADR-003: Request uses companyName (meaningful ID), NOT companyId (UUID)
    • Triggered by: User clicks [+ Add Partner] and selects company
    • Payload: { companyName: "GoogleZH", partnershipLevel: "BRONZE", startDate: "2025-01-01", endDate: "2026-12-31" }
    • Returns: Created partner entity with isActive=true
    • Used for: Create new partnership
    • Story 2.7: Backend validates company exists via GET /api/v1/companies/{companyName}
  4. PATCH /api/v1/partners/{companyName} โœ… ADR-003 Compliant

    • ADR-003: Path uses companyName (e.g., /api/v1/partners/GoogleZH)
    • Triggered by: Organizer changes partner tier
    • Payload: { partnershipLevel: "GOLD", startDate: "2025-05-01", endDate: "2026-12-31" }
    • Returns: Updated partner with new partnershipLevel
    • Used for: Change partner tier level
    • Note: Tier change reason tracking could be added in Epic 8 for audit trail
  5. POST /api/v1/partners/export โš ๏ธ Deferred to Story 2.8+

    • Triggered by: User clicks [Send Bulk Email] or [Export Contact List]
    • Payload: { action: "email|export", companyNames: ["GoogleZH", "MicrosoftBE"], format: "csv|xlsx", fields: [] }
    • Returns: Email task ID or export download URL
    • Used for: Bulk email or export partner data
    • Story 2.8 Note: Bulk email integration deferred to Epic 8, export to CSV as simple frontend implementation
  6. POST /api/v1/partners/{companyName}/meetings โœ… ADR-003 + Deferred

    • ADR-003: Path uses companyName (e.g., /api/v1/partners/GoogleZH/meetings)
    • Triggered by: User clicks [Schedule Meeting] on partner card
    • Payload: { type: "strategic_planning", proposedDates: [], agenda }
    • Returns: Created meeting ID
    • Used for: Schedule meeting with specific partner
    • Story 2.7: Basic meeting entity exists, full scheduling UI deferred to Epic 8 (Story 6.2)
  7. GET /api/v1/partners/{companyName}/analytics โš ๏ธ Deferred to Epic 8 (Story 6.1)

    • ADR-003: Path uses companyName
    • Triggered by: User clicks [Analytics] button
    • Status: NOT IMPLEMENTED in Story 2.7/2.8 - Analytics dashboard deferred to Epic 8
    • Story 2.8: Show โ€œComing soonโ€ placeholder or disable button
    • Epic 8 (Story 6.1): Full analytics implementation with engagement calculations

Primary Navigation Actions

  1. โ† Back button โ†’ Navigate to Event Management Dashboard (story-1.16-event-management-dashboard.md)

    • Target: Organizer main dashboard
    • Context: Return to event management
  2. [+ Add Partner] button โ†’ Opens Add Partner Workflow

    • Target: Modal or dedicated page for partner creation
    • Context: Company selection โ†’ tier assignment โ†’ contact setup
  3. [View Details] button โ†’ Navigate to Partner Detail Screen (MISSING - see sitemap)

    • Target: Full partner profile page
    • Context: companyName, current engagement data
  4. [Analytics] button โ†’ Navigate to Partner Analytics Dashboard (Backlog - FR4)

    • Target: Partner-specific analytics (if FR4 restored post-MVP)
    • Context: companyName, dateRange for metrics

Secondary Navigation (Data Interactions)

  1. Partner card click โ†’ Navigate to Partner Detail Screen (MISSING - see sitemap)

    • Target: Full partner information page
    • Context: companyName, full contact and engagement history
  2. [Schedule Meeting] button โ†’ Opens Meeting Scheduler

  3. Industry link โ†’ Filter partners by industry

    • Target: Same page, filtered by industry
    • Context: industryFilter applied to partner list
  4. Engagement score โ†’ Opens Engagement Details Modal

    • Target: Modal overlay showing engagement breakdown
    • Context: companyName, engagement metrics detail

Event-Driven Navigation

  1. [Send Email] button โ†’ Opens email client or email modal

    • Action: Compose email with partner contact pre-filled
    • Target: System email client (mailto:) or in-app email composer
    • Context: partnerContactEmail, emailTemplate
  2. [Send Bulk Email] button โ†’ Opens Bulk Email Composer

    • Target: Modal with email template selection
    • Context: selectedCompanyNames[], email recipients list
  3. [Export Contact List] button โ†’ Downloads file

    • Action: Generate and download CSV/Excel file
    • Target: File download
    • Context: selectedCompanyNames[], export format
  4. [Generate Report] button โ†’ Opens Report Generator

    • Target: Modal for report configuration
    • Context: selectedCompanyNames[], reportType selection

Error States & Redirects

  1. No partners found โ†’ Show empty state

    • Condition: No partners in system or filters too restrictive
    • Action: Display empty state with [Add Partner] CTA
    • Context: Clear filters option, create first partner prompt
  2. Search no results โ†’ Show no results message

    • Condition: Search query returns no matches
    • Action: Display โ€œNo partners found matching โ€˜{query}โ€™โ€ with suggestions
    • Context: Clear search, adjust filters, browse all partners
  3. API failure โ†’ Show error banner

    • Condition: API request fails or times out
    • Action: Display error with [Retry] button
    • Context: Error message, last successful data cached
  4. Unauthorized access โ†’ Redirect to login

    • Condition: User not authenticated or insufficient permissions
    • Target: Login screen with return URL
    • Context: Redirect back to partner directory after authentication

Responsive Design Considerations

Mobile Layout Changes

Stacked Layout (320px - 768px):

  • Search and filters: Stacked vertically with collapsible filter panel
  • Partner Overview: Single-row stats with horizontal scroll
  • Quick filters: Horizontal scrollable chips
  • Partner cards: Full-width stacked layout (one per row)
    • Logo and tier badge at top
    • Contact info and engagement score stacked
    • Action buttons: Dropdown menu (โ‹ฎ) for space efficiency
  • Bulk actions: Bottom sheet modal
  • Sort/view controls: Combined in single dropdown

Tablet Layout (768px - 1024px):

  • Two-column partner grid
  • Side-by-side search and filters
  • Partner overview: Full row with all stats visible
  • Action buttons: Visible with compact labels

Mobile-Specific Interactions

  • Swipe gestures: Swipe partner card left to reveal quick actions (Email, Meeting)
  • Pull-to-refresh: Refresh partner list and engagement scores
  • Bottom sheet: Filters, bulk actions, partner details in bottom sheets
  • Touch targets: 44px minimum for all interactive elements
  • Sticky header: Search bar sticky on scroll
  • Infinite scroll: Load more partners on scroll (replaces pagination on mobile)
  • Floating action button (FAB): [+ Add Partner] as FAB in bottom-right
  • Tap to expand: Tap partner card to expand details inline before navigating

Accessibility Notes

  • Keyboard Navigation: Full tab navigation with logical focus order
  • ARIA Labels:
    • aria-label="Filter partners by tier" on tier dropdown
    • aria-label="Search partners by name" on search input
    • aria-label="Partner engagement score: 92%" on engagement bars
    • role="listitem" on partner cards with aria-labelledby pointing to partner name
  • Screen Reader Announcements:
    • Live region (aria-live="polite") for search results count
    • Status updates when filters applied
    • Engagement warnings announced for screen readers
  • Color Contrast: WCAG 2.1 AA compliance
    • Tier badges: Sufficient contrast ratios (Premium: gold on dark, Gold: yellow on dark, etc.)
    • Engagement bars: Color + percentage text for accessibility
  • Focus Indicators: 2px solid outline on all focused elements
  • Alt Text: All partner logos have descriptive alt text (alt="TechCorp AG logo")
  • Semantic HTML:
    • <main> for partner list section
    • <nav> for filters and sorting controls
    • <article> for each partner card
  • Skip Links: โ€œSkip to partner listโ€ link at top

State Management

Local Component State

  • searchQuery: Current search input value
  • selectedFilters: Object containing tier and status filters { tier: โ€˜allโ€™, status: โ€˜allโ€™ }
  • viewMode: Current view mode (โ€˜gridโ€™ or โ€˜listโ€™)
  • sortBy: Current sort field (โ€˜engagementโ€™, โ€˜nameโ€™, โ€˜industryโ€™, โ€˜lastEventโ€™, โ€˜tierโ€™)
  • sortOrder: Sort direction (โ€˜ascโ€™ or โ€˜descโ€™)
  • selectedPartners: Array of selected partner companyNames for bulk actions
  • page: Current pagination page (offset for API)

Global State (Zustand Store)

  • partnerList: Array of partner objects from API
  • partnerStatistics: Aggregate partner statistics
  • engagementMetrics: Map of companyName to engagement data
  • filterOptions: Available filter options (tiers, industries, statuses)

Server State (React Query)

  • usePartners(filters, sortBy, page): Partner list with 2-minute cache, refetch on window focus
  • usePartnerStatistics(): Statistics with 5-minute cache
  • usePartnerEngagement(companyName): Individual engagement metrics with 1-minute cache
  • usePartnerContacts(companyName): Contact information with 10-minute cache

Real-Time Updates

  • WebSocket Connection: /ws/partners/engagement (if implemented)
    • Real-time engagement score updates when partners vote or attend events
    • Updates partner card engagement bars without refresh
    • Fallback to polling every 2 minutes if WebSocket unavailable

Form Validation Rules

No forms on this screen - filtering and search are non-validated inputs


Edge Cases & Error Handling

  • Empty State (No Partners):

    • Show โ€œNo partners yetโ€ message
    • Display [+ Add Partner] CTA prominently
    • Provide guidance on partner onboarding process
  • Loading State:

    • Display skeleton cards for partner list (4-6 skeleton items)
    • Show loading spinner in partner overview section
    • Disable filters and search while loading
  • Error State (API Failure):

    • Show error banner: โ€œUnable to load partners. Please try again.โ€
    • Provide [Retry] button to refetch data
    • Cache last successful data if available (show with โ€œshowing cached dataโ€ indicator)
  • Search No Results:

    • Display โ€œNo partners found matching โ€˜{query}โ€™โ€
    • Suggest: โ€œTry adjusting your search or clearing filtersโ€
    • Show [Clear Search] and [Clear Filters] buttons
  • Filter No Results:

    • Display โ€œNo partners match the selected filtersโ€
    • Show active filters with [x] to remove individual filters
    • Provide [Clear All Filters] button
  • Low Engagement Warning:

    • Highlight partners with <40% engagement in orange/red
    • Show โš ๏ธ warning icon on card
    • Provide [โš ๏ธ Follow Up] action button
    • Auto-suggest follow-up email templates
  • Meeting Scheduling Conflict:

    • Show availability conflict message
    • Suggest alternative dates based on partner availability
    • Allow manual date/time entry
  • Bulk Action Limits:

    • Limit bulk email to max 50 partners at once
    • Show warning if limit exceeded: โ€œPlease select 50 or fewer partnersโ€
    • Provide option to split into multiple batches
  • Export Failure:

    • Show error: โ€œUnable to generate export. Please try again.โ€
    • Offer alternative: โ€œCopy email addresses to clipboardโ€
    • Log error for debugging
  • Tier Update Unauthorized:

    • Show permission error: โ€œOnly senior organizers can change partner tiersโ€
    • Provide option to request tier change approval
  • Stale Data:

    • Show โ€œLast updated: 5 minutes agoโ€ timestamp
    • Provide [Refresh] button for manual update
    • Auto-refresh engagement scores every 5 minutes

Change Log

Date Version Description Author
2025-10-04 1.0 Initial wireframe creation for Partner Directory Screen ux-expert

Review Notes

Stakeholder Feedback

To be added during review

Design Iterations

To be documented as design evolves

Open Questions

  1. Partner Tier Levels: Confirm tier naming convention (Premium/Gold/Silver/Bronze vs. Platinum/Gold/Silver)?

    • Recommendation: Use โญ Premium, ๐Ÿฅ‡ Gold, ๐Ÿฅˆ Silver, ๐Ÿฅ‰ Bronze for visual clarity
    • Decision needed from business team
  2. Engagement Score Calculation: Confirm weighting algorithm for engagement score?

    • Proposed: Topic votes (30%), Event attendance (40%), Meeting participation (20%), Content interaction (10%)
    • Algorithm specification needed from analytics team
  3. Bulk Email Limits: Whatโ€™s the maximum number of partners for bulk email?

    • Technical constraint: AWS SES sending limits
    • Business rule: Recommended max 50 per batch to avoid spam filters
    • Decision needed from compliance team
  4. Partner Detail Screen: Should we create a dedicated partner detail screen or use a modal?

    • Option A: Full-page partner profile (better for complex information)
    • Option B: Slide-over panel or modal (faster interaction)
    • UX testing needed to determine preference
  5. Analytics Integration: When FR4 (Partner Analytics) is restored, how deeply should directory integrate?

    • Should engagement scores link directly to analytics dashboard?
    • Should cards show preview charts or just link to full analytics?
    • Product roadmap dependency
  6. Meeting Scheduling: Integrate with external calendar systems (Outlook, Google) or internal only?

    • External integration complexity vs. user convenience
    • Technical feasibility assessment needed