Dashboards — Team Hub & Personal Dashboard

ecoPortal is an incident management platform, but incidents don't exist in isolation — they generate tasks, actions, and assignments that need to be tracked and acted on. As the platform matured, two distinct needs emerged that no existing screen addressed.

Team leads and managers needed a consolidated view of their team's workload: how many tasks were open, which actions were overdue, how long tasks were taking on average, and what had been recently created or assigned. This information existed across different parts of the platform but required navigating several screens to piece together.

Individual contributors needed a personal home — a workspace where they could see their own tasks and actions at a glance, quickly add new items, check their active page, and navigate to the main task and action managers without hunting through the platform.

"How do we design two dashboards that feel like one coherent product — sharing a visual language and token system — while serving fundamentally different mental models?"

The challenge was scope and parallelism: two dashboards, different user goals, same design system, same sprint cadence.

The project was briefed as a single initiative covering both surfaces simultaneously. The product team had mapped the user research: managers were doing their status checks in spreadsheets and morning standups because the platform didn't surface team-level data in one place; individual contributors were starting their day by opening four or five tabs to understand what needed their attention.

Key inputs from the briefing:

• Team Hub scope: real-time task and action counts, trend charts, duration metrics, overdue flags, recently created items, assigned pages — all filterable by team member (People Filter)
• Personal Dashboard scope: personal task and action counts, quick-add flows for tasks and actions, active page tracking, shortcuts to task and action managers, comments view
• Shared constraint: both dashboards needed to work across multiple responsive breakpoints (1920, 1200, 800, and a compact breakpoint)
• Shared design foundation: both surfaces needed to inherit ecoPortal's token system (Tokens Auto Desktop, Primitives Auto ecoPortal Default) and feel like sibling screens, not separate products

Design questions defined in the briefing:

• What's the minimum viable widget set for each dashboard, and what gets deferred?
• How does the Team Hub's People Filter interact with each widget — do all widgets filter, or only some?
• For the Personal Dashboard: what's the relationship between the Opt In/Opt Out settings and the dashboard itself?
• How do we design empty states and loading states that are widget-specific, not page-level?

With both dashboards in scope simultaneously, the exploration phase focused on two things: information architecture (what goes where and in what order) and widget-level design patterns (how each data block communicates its content).

References explored included enterprise dashboards in tools like Jira, Asana, and Linear — specifically how they handle mixed content types (counts, charts, lists, and tables) in a single view without creating visual overload.

Key hypotheses from the exploration:

• The Team Hub needs a clear reading order: summary numbers first (what's the current state?), then charts and tables (what's the trend and detail?). Widgets that answer "how many?" should be scannable in under 3 seconds.
• The Personal Dashboard's primary action is not reading — it's doing. The Add New flows for tasks and actions needed to be accessible in one click from anywhere on the screen.
• Skeleton loaders and empty states are not an afterthought — for dashboards, the loading and empty experiences are often what users see first, especially on first login. They need to feel intentional and informative, not just placeholders.
• People Filter (Team Hub) needed to be a floating, persistent component — not a page-level filter that required scrolling back to the top.

Separate flow maps were created for each dashboard before any visual work began, establishing the hierarchy of widgets, the interaction model for filters, and the states each widget needed to support.

Lo-fi testing for dashboard projects focuses on layout comprehension, widget discoverability, and task completion speed. I tested with two user groups: team leads (for Team Hub) and individual contributors (for Personal Dashboard).

Team Hub testing:

• Whether users could identify their "most critical" widget within 10 seconds of looking at the screen
• Whether the People Filter was understood as a global filter affecting all widgets
• Whether chart widgets (Tasks Chart, Actions Chart) were read correctly without tooltips
• Whether the hover states on the Avg Task Duration widget and Overdue Actions Table provided enough context

Personal Dashboard testing:

• Whether users could locate and trigger the Add New flow for tasks and actions without instruction
• Whether the Active Page widget was understood (what it shows and why it's there)
• Whether the Shortcuts to AM and TM were immediately recognizable as navigation shortcuts

Main findings across both:

• Team Hub: the Summary Table widget needed tab navigation (Summary / Actions / other views) — without it, users expected to see all data at once and were overwhelmed. Tabs were the fix.
• Team Hub: the Avg Task Duration widget's hover state was the most frequently interacted element in the test — users wanted more detail on hover than the initial design showed.
• Team Hub: Loading time too long was a state that testers noticed and appreciated — they expected dashboards to just spin indefinitely, so an explicit "this is taking too long" message with a retry action felt considerate.
• Personal Dashboard: Add New for Tasks needed a visible stepper — users didn't know how many steps the creation flow had, which caused hesitation.
• Personal Dashboard: the Opt In / Opt Out feature was confusing when placed inside the dashboard itself — users wanted it in settings, not on the home screen.

With testing complete on both dashboards, I revised before moving to hi-fi.

Team Hub changes

Summary Table tabbed — Added tab navigation to the Summary widget (Summary / Actions), allowing the widget to surface multiple data views without expanding vertically.

Avg Task Duration hover expanded — The widget's hover state was enriched with more contextual data. The Hovers group in the final design shows the range of hover treatments applied across the widget.

Manager Dashboard Variations added — Testing revealed that managers with different team sizes needed different default widget arrangements. A set of Manager Dashboard Variations was added to cover these configurations.

People Filter confirmed as floating — The filter stays anchored at the top of the viewport as the user scrolls the dashboard. Two states documented: Floating toolbar (default) and People filter (active/expanded).

Loading States scoped per widget — Each widget received its own loading state, not a page-level spinner: Open Tasks, Actions, Overdue Actions, Assigned Pages, Recently Created, Avg Task Duration.

Personal Dashboard changes

Stepper added to Add New flows — Tasks and Actions creation flows both received a stepper component. This was the most impactful change from testing — it reduced hesitation and made multi-step creation feel predictable.

Opt In / Opt Out repositioned — Moved to a dedicated section of the dashboard (not inline with widget content), clearly separated from the personal workspace. Also documented as an Org Settings concern.

Shortcuts to AM and TM formalized — Designed as explicit shortcut cards with clear affordance, not just links. Users in testing treated them as navigation anchors.

With both sets of revised flows validated, I moved to hi-fi — building the full widget set, all states, and all responsive breakpoints for both dashboards within ecoPortal's Design System.

Team Hub

Main screens — Three primary states: Default (full dashboard, data loaded), Filtered (People Filter active, widgets showing filtered data), and a Release Version 1 (the launch-ready state documented for engineering reference). Manager Dashboard Variations cover different widget arrangements.

Widgets:

• Floating Bar — People filter component, persistent at top of viewport. Floating toolbar (collapsed) and People filter (expanded) states.
• Summary Table — Tabbed widget showing task and action summaries. Tab states: Summary, Actions.
• Avg Task Duration — Metric widget with hover detail state.
• Overdue Actions Table — Inline list of overdue actions with status indicators.
• Team Tasks and Actions — Combined widget housing the Tasks Chart and Actions Chart in a single container.
• Tasks Chart — Bar/area chart of open tasks over time.
• Actions Chart — Bar/area chart of actions over time.
• Recently Created — List widget of most recently created items.
• Assigned Pages — List of pages currently assigned to team members.

States per widget: loaded, loading, skeleton loader, skeleton breakpoint, empty state (widget-specific), loading time too long.

Breakpoints: 1920, 1200, 800, and a compact breakpoint — all widgets reflow appropriately at each size.

Team Hub empty state — Two variants: for when the hub has no data at all (first use) and for filtered results returning nothing.

Personal Dashboard

Main screens — Two variants: Personal Dashboard (default, data loaded) with a donut chart showing personal task completion status and a compact list view below.

Widgets and flows:

• Add New — Tasks — Multi-step task creation flow with stepper component. Multiple variants covering different input states and steps.
• Add New — Actions — Parallel flow for action creation, with donut chart progress indicator visible.
• Shortcuts to AM and TM — Navigation shortcut cards to Action Manager and Task Manager.
• Comments — Comment stream widget with stepper component for thread navigation.
• Active Page — Currently active page tracker, shown as a compact dark-themed panel.

Empty states: Actions (no actions yet), Comments (no comments), Active Pages (no active page).

Opt In / Opt Out — Feature toggle section for the Personal Dashboard itself, plus Org Settings integration for organization-level configuration.

Breakpoints — Multiple responsive sizes, all showing the donut chart and key widgets adapting to available width.

Both dashboards were handed off and QA'd in parallel with the implementation sprints. I owned the Design QA for both surfaces.

Handoff included complete Figma annotation for every widget (spacing, tokens, states, interactions), responsive behavior specs for all breakpoints, and a state map per widget documenting all possible states and transitions. Three dedicated handoff sessions were held: one for Team Hub widgets, one for Personal Dashboard, and one specifically for shared states (loading, skeleton, empty) across both surfaces.

Main QA findings:

• Team Hub: People Filter floating behavior not implemented — it scrolled with the page instead of staying fixed
• Team Hub: Overdue Actions Table row hover state missing
• Team Hub: Summary Table tab switching not animating per spec
• Personal Dashboard: Stepper component not advancing correctly on step 2 of the Add New Tasks flow
• Personal Dashboard: Donut chart segment colors not matching token values in the loaded state
• Shared: Skeleton loader animation timing inconsistent between Team Hub and Personal Dashboard widgets

All issues were resolved before each dashboard's respective go-live date.

Both dashboards shipped as the primary home screen for their respective user types. Team Hub became the default landing page for users with team lead or manager roles; Personal Dashboard became the default for individual contributors.

What worked:

• Designing both dashboards simultaneously forced a shared visual language early — there was no risk of them diverging because every decision was made with both surfaces in view at the same time.
• Widget-specific loading, skeleton, and empty states significantly improved the perceived quality of the product — dashboards that degrade gracefully feel more trustworthy than those that just spin.
• The People Filter as a floating component was the most appreciated Team Hub feature post-launch — users could filter without losing their scroll position in the dashboard.

What would be different:

• Sequential testing would have been better than parallel. Running Team Hub and Personal Dashboard user tests at the same time meant findings sometimes bled into each other, making it harder to attribute specific insights to the right surface.
• The Opt In / Opt Out feature needed clearer product definition before entering design. It caused multiple revision rounds that could have been avoided.
• Mobile was explicitly out of scope, but several post-launch requests came in immediately. A responsive-down strategy from the start would have saved a separate design cycle.

Next steps: notification integration in the Team Hub (alert when a widget crosses a threshold); a customizable widget order for the Personal Dashboard; and a unified notification center bridging both surfaces.