Let me take you through the end-to-end process of designing Metricoach, a dashboard SaaS tool that enables online coaches to make data-driven decisions
Published in · 10 min read · 1 day ago
Metricoach is a Dashboard SaaS Tool that allows online coaches to track KPIs, gain insights, and optimize strategies for efficiency and profitability. The features and resources help coaches easily navigate the platform and access specific data sets. Metricoach seamlessly integrates with popular tools such as Google Analytics and Facebook Ads, providing a unified system to identify patterns and trends and adjust strategies in real time.
Metricoach is built by Insane, one of India’s top Ed-Tech Marketing Agencies, to simplify marketing data for online coaches and make it more accessible for data-driven decisions.
Understanding the Problem Space
The online coaching journey typically involves three main stages: course creation, marketing, and selling. Analytics plays a crucial role in guiding coaches’ decisions and ensuring success. Coaches analyze data on client engagement to refine their courses and adjust their marketing strategies for maximum ROI. Ongoing use of analytics enables coaches to maintain relevancy and grow their businesses.
Coaches team up with marketing agencies to oversee their online courses. These agencies manage marketing campaigns, optimize coaching funnels, and provide an overview of analytics and strategies through periodic calls and shared spreadsheets, allowing coaches to leverage marketing expertise.
But, there’s a major issue!
First, let me share a screenshot of how these spreadsheets look -
See the crosstabs below; there are 20 more like this! Periodic calls almost never give the full picture.
Online coaches with limited analytics knowledge face significant challenges when working with marketing teams. The apparent complexity of these analytics hinders informed decision-making and results in suboptimal outcomes.
Coaches and educators in digital ventures face the huge challenge of not just managing large volumes of data but also utilizing advanced analytics techniques to extract business value from it.
This is a critical issue that we encountered at Insane, where we saw the detrimental impact of this knowledge gap on our results.
We spoke with 20+ coaches and their digital teams to better understand the issue, and identified several significant points —
- The lack of a filtering system makes it difficult for coaches to navigate data sets and access specific data segments.
- There are many structural jumps required to gain a simple insight. For instance, to understand why a drop-off happened in the funnel, coaches may need to navigate through multiple data sections, analyze metric changes, and examine behavioral data.
- Difficulty in tracking multiple AD dashboards and channel touchpoints.
- Coaches struggle to identify relevant metrics for a campaign or client.
- Without agency support, navigating spreadsheets can be challenging, and deriving meaningful business insights from raw data can be difficult.
- Due to the limited time available to analyze data, coaches often make hasty decisions or settle for suboptimal outcomes.
- Other major technical obstacles include the absence of user-friendly UTM tracking and comprehensive metrics, coupled with inadequate data breakdowns.
These inputs helped us understand the need better.
Build a simple-to-use yet powerful data dashboard with comprehensive analytics for real-time visibility into KPIs and customer behavior, enabling data-driven decisions and effortless cross-channel reporting.
Our goal with Metricoach was to enhance three key business indicators—
- Reduce Turnaround Time: Enable filter-based real-time KPI visibility for faster issue identification and resolution through streamlined data tracking, bottleneck identification, and data-driven decision-making.
- Boost Retention Rate & ROI: Breakdown data to understand the scope of improvement in campaigns and funnels; increasing user retention, and resulting in increased revenue and ROI.
- Decrease Knowledge Gap: Provide a comprehensive and user-friendly analytics platform to gain valuable insights into customer behavior, preferences, and pain points. By leveraging this information, coaches can better align their product development and marketing strategies with customer needs, reducing the knowledge gap between teams and improving overall performance.
Aight, let’s get started with the solution! 🚀
Our top priority was to build a user-friendly analytics dashboard for clear visibility into marketing campaign KPIs and sales funnel performance.
Why so dark? No, we’re not Batman. Data suggests that dark mode significantly improves visual hierarchy for better data interpretation.
Our design principle was simple: we aimed for a clutter-free dashboard with big data blocks, easily discoverable breakdowns, and a simple yet powerful filter system. Although the final dashboard was relatively easy to put together, the components went through numerous iterations.
Now, let’s break down major components by functionality.
Optimizing query building
1. Introducing a Filtering System
To enable coaches to efficiently access targeted data sets and metrics.
i. Parent Filter Bar
This was the main filter system that controls everything. The design had to be intuitive so that coaches didn’t have to ‘learn how to’ use the system.
The challenge, however, was to determine the exact filter categories for the system.
Based on insights gathered from our research regarding the most commonly used metric pathways, we decided to divide the filters into two broad categories —
By providing coaches with a focused set of attributes, we enabled quick and easy analysis of marketing campaigns and sales funnel performance, while still providing the necessary level of granularity for more in-depth data exploration if needed.
ii. Eliminating ‘Zero Data’ Results Page
We aimed to enhance the onboarding experience and enhance informed decision-making by eliminating the zero data results page by populating the analytics results, ensuring new users can gain immediate insights.
To achieve this we had to attribute proper default values to the filter bar. We had two options here —
- Filters are set to ‘None’: Setting default filters to 'none' increases user workload and may result in longer learning curves, leading to a higher chance of encountering a 'zero data' results page.
- Filters are set to ‘All’: When default filters are set to ‘all’, users have a pre-populated results page, saving them time and reducing cognitive load. This also allows users to customize their data analysis experience based on their specific needs.
The second option proved optimal. By selecting a pre-set default filter of ‘all’, we achieved the following benefits:
- Improved FTUE, giving coaches a starting point to begin their analysis.
- Eliminated the need for extra steps in viewing metrics.
- Simplified the process of building a query through filters.
2. Improving Metric Navigation
To provide a more focused view of the data, we needed to narrow down the available metrics. The idea was to design an intuitive feature that enables coaches to easily locate relevant metrics.
So, we decided to take a Crosstab Design approach —
Here’s the feature in action —
Cool, we’re all set with the discovery functionalities! Now, let’s dive right into the next section.
Building Metrics Cards
In the context of data visibility, the metrics cards are of utmost importance as they house all the relevant information that users seek.
i. Anatomy of Metric Cards
We wanted the metric card to be a snapshot of information. It should include all the necessary information without being too overwhelming.
After the query has been built through filters, the results page shows two types of cards —
- Score Cards: Contains base KPI Metrics. Such as CTR, CPA, Total revenue, etc.
- Chart Cards: These are visualization cards. Used for comparison & behavioral data.
To address the challenge of deriving meaningful business insights from raw data, we aimed to enhance the functionality of metric cards by providing additional insight capabilities. The goal was to deliver results that offer insights & information granularity at multiple levels.
Let’s explore the design decisions behind different iterations —
The second iteration was chosen as the final solution as it effectively grouped relevant information together, eliminating the need for multiple structural jumps to gain simple insights.
ii. Making Chart Cards interactive
To prevent overwhelming coaches with too much data, we used tooltips and hover states. When coaches interact with specific elements in the chart card, they can discover additional information through gentle reveals.
Let’s see it in action.
The mentioned functionalities address the challenges of quickly discovering and interpreting metrics. The base results page effectively gathers relevant data. However, what if coaches require a more detailed breakdown?
Let’s delve into how we tackled this issue by focusing on insight granularity.
Solving through Insight Granularity
In the metric card section, we have already discussed our approach to tackling the challenge of deriving meaningful business insights from raw data.
Now, let’s dive deeper into the next step of our solution.
i. Business Insight Page
Our goal was to design a two-level insights system. The Business Insight Page serves as level 2. Clicking on the kebab menu in metric cards opens a separate page for the corresponding metric.
To keep things simple, we divided this page into 3 clear sections —
- Expanded Metric Card
- Analysis Summary
- Impact breakdown
The Business Insight Page expands on the Metric Card, helping coaches gain deeper insights. It provides a structured approach, offering detailed analysis and actionable recommendations for improved performance.
ii. Scenarios Comparison Functionality
To drive performance and optimize marketing and funnel strategies, we recognized the need for a feature that enables coaches to analyze key metrics, track performance trends over time, and benchmark against predefined baselines.
We needed to design a comparison feature to achieve this.
- Iteration 1: The initial plan was to incorporate a card-level filter option, but it encountered usability issues. Let’s explore why —
Iteration 1, intended for metric comparison, unfortunately, exhibits significant usability issues with mismatched Parent-Component filter mirror and broken results page logic.
- Iteration 2: We realized the comparison feature should be a separate page. In this version, similar to the business insights page, clicking on the kebab menu in metric cards opens the compare scenarios feature.
Let’s see it in action to gain a better understanding—
Building the New Report Flow
To address the challenge of tracking multiple AD dashboards and channel touchpoints, we developed a streamlined process for connecting various data tools. Coaches can effortlessly connect tools like Google Sheets through the “Connect Data” module in the New Report section.
The New Report feature is strategically placed at the top of the sidebar to ensure easy visibility. While our product is user-friendly, our initial usability tests revealed a demand for custom setup options. This presented a unique opportunity for our sales team to cross-sell the company’s marketing services.
In the final version, we included a secondary CTA next to “Connect Data” to allow coaches to request a demo setup, catering to those who desired additional guidance and assistance.
Here’s the final flow —
We just released the beta version, so we’re still gathering data. However, the initial feedback from coaches has been highly positive. Here are some key highlights:
- Enhanced Task Efficiency: The new platform gained significant preference over periodic calls, which now focused on advanced strategies instead of basic metric explanations.
- Accelerated Issue Resolution: With faster access to relevant data and streamlined tracking capabilities, coaches were able to quickly identify and address issues or bottlenecks in their marketing campaigns and sales funnels.
- Better Customer Retention: Coaches who utilized the platform experienced an average increase in customer retention compared to their previous methods.
Learnings & Challanges
This was my biggest project yet! Designing a dashboard platform for enterprises is always challenging. It has been a constant struggle to strive for simplicity. There were numerous takeaways from this project; here are a few:
- Gaining a deep understanding of building data-driven solutions.
- This was a massive project! I had to design a highly detailed design system and create tokens for it. Learned a ton! (another case study… perhaps?)
- Learning from Apple’s Human Interface Guidelines and Atlassian Design System, I discovered that dark mode is not just a cool feature; it has profound implications for design decisions.
- Balancing long-term visions with practicality, I learned to strategically scale down ideas to MVP, facilitating stakeholder management and expediting approval processes for efficient project execution.
- Learning to design for data better! Data visualization may appear easy, but it’s a challenging skill to master. This process has been tremendously helpful in my learning journey.
Putting together this case study was an absolute blast! If you have any more questions, feel free to hit me up on LinkedIn. Cheers!