Dashboard Design
Fishbowl Dashboard
Overview
I designed a scalable system of analytics widgets to help businesses understand guest behavior, campaign performance, and retention trends. The goal was to create a modular, consistent, and visually clear framework that works across multiple widget sizes and dashboard layouts, empowering users to make data-driven decisions at a glance.
The project aimed to give marketing and operations teams better visibility into guest engagement metrics and campaign outcomes. Previously, insights were scattered and inconsistent, making it difficult for users to compare segments or track performance over time.
As the sole designer, I partnered directly with developers, the data engineering team, and business stakeholders. Throughout the process, I incorporated feedback from users, as well as strategic input from the CEO and board, ensuring the system met both operational and executive needs.
Key Features
• Consistency: Every widget follows the same structural logic, making them easy to scan and compare.
• Readability: Data is prioritized through clear hierarchy, typography, spacing, and color.
• Scalability: Widgets adapt seamlessly to different sizes (small, medium, large) without losing clarity.
• Modularity: Components like filters, tabs, and KPIs can be reused across multiple widget types.
This system ensures that new metrics or visualizations can be added without reinventing the design.
Widget Library
Overview
Color Logic & State Variations
The Transactions widget is shown here as an example of how color and states were used across the entire system. Green indicates positive change, red signals declines, blue shows no change, and yellow represents cases where no data has been selected.
Dropdown Design
The Redeemed & Rejected widget is shown here as an example of how dropdowns were used to make widgets more flexible without cluttering the interface. By default, it presents high-level metrics, and users can expand the dropdown to select different time frames. This design allows them to view performance over specific periods while keeping the widget compact and consistent with the overall dashboard system.
Expandable Widgets
The Most Valuable Guests widget demonstrates how widgets can expand to reveal deeper insights. In its default state, it highlights key guest metrics at a glance. When expanded, it displays additional information, including a graph that visualizes trends over time. This design balances quick readability with the ability to explore more detailed patterns, ensuring that users can access both high-level KPIs and in-depth analysis within the same component.
Designed for Different Goals
The widget system was built to support flexible dashboards that can be tailored to user needs. While a set of default dashboards is provided, users are free to design their own based on their goals and priorities. The four examples below illustrate how the same widget library can be assembled into highly specialized dashboards:
1. Main Dashboard – Our recommended configuration, optimized to provide a balanced view of overall performance and guest activity.
2. Marketing Dashboard – Focused on campaign effectiveness, featuring widgets like SMS and Email Analyzers alongside performance KPIs.
3. Offers Dashboard – Centered on redemption and rejection trends, helping teams monitor the success of promotional offers over time.
4. Guests Dashboard – Highlights guest-centric insights such as Recency, Frequency, and Most Valuable Guests, providing a clear picture of customer engagement.
These examples demonstrate how the system adapts to different business needs while maintaining a consistent and scalable design language. Users can start with defaults or fully customize their dashboards to track what matters most to them.
Interaction Design
Interactivity was a core part of the system. Users can:
• Filter data by timeframes, channels, or guest segments.
• Drill down into detailed views by clicking metrics (e.g., clicks, unsubscribes).
• Switch states between default KPIs and deeper visualizations.
• Expand widgets to reveal more specific data or charts, allowing high-level scanning without sacrificing depth when needed.
These patterns, combined with the consistent use of color-coded indicators, made the system more dynamic, turning static KPIs into actionable insights that can be read in seconds
Outcome/Impact
The result was a unified widget system that streamlined how data is presented and consumed. Teams could now:
• Compare different KPIs consistently across dashboards.
• Quickly identify trends, guest behaviors, and campaign performance thanks to color-coded signals and expandable charts.
• Personalize dashboards to highlight the metrics that matter most, while relying on predefined defaults as starting points.
• Save time during development and onboarding, since new widgets could be created from existing patterns.
This not only improved usability for end-users but also aligned designers, engineers, and stakeholders around a shared design system.
Reflection
This project reinforced the importance of modular design systems in complex products. I learned how to balance data density with clarity, ensuring that widgets were both information-rich and approachable. It also highlighted the value of close collaboration with engineering to make sure designs were practical to implement at scale.
For next steps, I will explore personalized dashboards, allowing users to define which KPIs matter most to them, as well as adaptive widgets that highlight anomalies or opportunities automatically.