PRO Data Dashboard
PRO Data Dashboard
A single page dashboard that cut analyst data requests by 50-75% and shifted how teams at Programiz make decisions
A single page dashboard that cut analyst data requests by 50-75% and shifted how teams at Programiz make decisions
PROJECT DETAILS
PROJECT DETAILS
ROLE
I was the lead designer and project manager for the project, owning end-to-end process from user research and ideation all the way through testing and deployment at Programiz headquarters.
PROJECT
Data visualization
Data visualization
DURATION
3 months (2023)
3 months (2023)
TEAM
Riya (me!) . Saurav . Shirish . Arjun . Udayan
TOOLS
Figma . Google Analytics
Figma . Google Analytics
OVERVIEW
OVERVIEW
What is PRO Data Dashboard?
What is PRO Data Dashboard?
The PRO Data Dashboard is an internal tool that gives Programiz teams a quick view of company's most important KPIs user growth, sales, support issues, and traffic sources.
The PRO Data Dashboard is an internal tool that gives Programiz teams a quick view of company's most important KPIs user growth, sales, support issues, and traffic sources.
It helped reduce analyst data requests by 50-75%, giving stakeholders and employees direct access to how the platform is performing day-to-day and making faster decisions.
It helped reduce analyst data requests by 50-75%, giving stakeholders and employees direct access to how the platform is performing day-to-day and making faster decisions.
Issue reported for:
Content
Dev
Others
08
15
22
29
01
May
250
200
150
100
50
0
Data Visualization
User Research
Iteration
Others (0.3%)
BACKGROUND & PROBLEM
BACKGROUND & PROBLEM
BACKGROUND
BACKGROUND
Why did Programiz need a Data Dashboard?
Why did Programiz need a Data Dashboard?
Programiz is an edtech platform that helps beginners learn programming through tutorials and tools. Programiz PRO is their paid product with structured, hands-on coding courses.
Programiz is an edtech platform that helps beginners learn programming through tutorials and tools. Programiz PRO is their paid product with structured, hands-on coding courses.
As Programiz PRO grew, access to performance data became a bottleneck across teams.
As Programiz PRO grew, access to performance data became a bottleneck across teams.
The company relied on a single data analyst to handle all data requests, which created several challenges.
The company relied on a single data analyst to handle all data requests, which created several challenges.
Data analyst received on average 4 requests per week from team.
Data analyst received on average 4 requests per week from team.
This led to problems like…
This led to problems like…
Data bottleneck
Data bottleneck
Data bottleneck
Data bottleneck
Reliance on one analyst, put load on the analyst as well as affected the workflow.
Reliance on one analyst, put load on the analyst as well as affected the workflow.
Reliance on one analyst, put load on the analyst as well as affected the workflow.
Reliance on one analyst, put load on the analyst as well as affected the workflow.
Slow decisions
Slow decisions
Slow decisions
Slow decisions
Limited access to timely data delayed important discussions.
Limited access to timely data delayed important discussions.
Limited access to timely data delayed important discussions.
Limited access to timely data delayed important discussions.
Misalignment
Misalignment
Misalignment
Misalignment
No shared visibility across teams as employees did not know enough data.
No shared visibility across teams as employees did not know enough data.
No shared visibility across teams as employees did not know enough data.
No shared visibility across teams as employees did not know enough data.
HMW
How might we give teams direct access to performance data without relying on a single analyst?
How might we give teams direct access to performance data without relying on a single analyst?
RESEARCH & SYNTHESIS
RESEARCH & SYNTHESIS
RESEARCH
RESEARCH
User Interviews to Identify Data Needs
User Interviews to Identify Data Needs
The main answers I was trying to find were:
What kind of data the users need and why they needed it?
Where was data coming from?
Is it possible to get the data users needed?
The main answers I was trying to find were:
What kind of data the users need and why they needed it?
Where was data coming from?
Is it possible to get the data users needed?
Data Analyst
Data Analyst
Needs one place to store and present data clearly to reduce ad-hoc requests and make it easier to communicate findings to stakeholders.
Needs one place to store and present data clearly to reduce ad-hoc requests and make it easier to communicate findings to stakeholders.
Stakeholder
Stakeholder
Needs a single view of key metrics to quickly assess if the product is on track without depending on the analyst every time.
Needs a single view of key metrics to quickly assess if the product is on track without depending on the analyst every time.
Product Designer
Product Designer
Needs quick access to performance data to identify where to focus research without waiting on the analyst.
Needs quick access to performance data to identify where to focus research without waiting on the analyst.
Strategist
Strategist
Needs real-time visibility into KPIs and traffic to spot growth levers and make faster strategic decisions.
Needs real-time visibility into KPIs and traffic to spot growth levers and make faster strategic decisions.
Sales
Sales
Needs a clear breakdown of revenue and conversion rates to identify where deals drop off and adjust strategy.
Needs a clear breakdown of revenue and conversion rates to identify where deals drop off and adjust strategy.
Support
Support
Needs visibility into issue volume and categories to prioritize fixes and catch problems before they impact retention.
Needs visibility into issue volume and categories to prioritize fixes and catch problems before they impact retention.
How many users are coming into the platform?
How many users are coming into the platform?
Can I have data to verify onboarding working?
Can I have data to verify onboarding working?
How much PRO annual subscription were sold?
How much PRO annual subscription were sold?
How much PRO annual subscription were sold?
What issues were reported the most?
What issues were reported the most?
What issues were reported the most?
Which is being bought more? monthly or yearly?
Which is being bought more? monthly or yearly?
Which is being bought more? monthly or yearly?
How many people are converting from trial to paying?
How many people are converting from trial to paying?
Where are maximum users coming from?
Where are maximum users coming from?
Where are maximum users coming from?
Data from what time is important?
Data from what time is important?
How much PRO subscription were sold?
How much PRO subscription were sold?
After gathering all the data needs they were then categorized into 4 main KPIs
After gathering all the data needs they were then categorized into 4 main KPIs
1
1
User Acquisition
How many users were actually signing up to PRO?
2
2
Sales
How many and what type of PRO subscriptions were being sold and recurring?
3
3
Traffic
Where are the users coming from?
4
4
Support
What was being reported the most?
1
User Acquisition
How many users were actually signing up to PRO?
2
Sales
How many and what type of PRO subscriptions were being sold and recurring?
3
Traffic
Where are the users coming from?
4
Support
What was being reported the most?
IDEATION
IDEATION
Since this was an internal company product it was predetermined from the stakeholders that it was going to be a Dashboard
Since this was an internal company product it was predetermined from the stakeholders that it was going to be a Dashboard
✅
Dashboard
Dashboard
Birds eye view of Programiz PRO’s performance in the market.
Birds eye view of Programiz PRO’s performance in the market.
Other possible solutions
Other possible solutions
Newsletter
Newsletter
Weekly newsletter sent to employees about the PRO performance.
Microsoft Teams Integration
Microsoft Teams Integration
Daily data update on the company’s communication channel.
Standup Presentation
Standup Presentation
Weekly or bi weekly update during all hands or standups.
DESIGN & ITERATION
DESIGN & ITERATION
PHASE 1/2
PHASE 1/2
Low fi wireframe aimed to visualize the data for each of the KPIs
Low fi wireframe aimed to visualize the data for each of the KPIs
The design followed two main idea:
The design followed two main idea:
Each KPI would be shown through their individual chart which can be expanded to have a bigger view. This was so it was easier to get information at a glance.
Scrolling further in the page to reveal data specific to the teams of Programiz like marketing, content etc so everyone could be benefited by the dashboard.
One major chart for each KPI
Search feature
Date filters
Expandable to view the graph in a larger view
Scrolled to reveal more data based on the department
One major chart for each KPI
Search feature
Date filters
Expandable to view the graph in a larger view
Scrolled to reveal more data based on the department
One major chart for each KPI
Search feature
Date filters
Expandable to view the graph in a larger view
Scrolled to reveal more data based on the department
One major chart for each KPI
Search feature
Date filters
Expandable to view the graph in a larger view
Scrolled to reveal more data based on the department
Some feedbacks later, it was revealed that
Some feedbacks later, it was revealed that
Last 30 days
Double date can be confusing, and too much for an MVP
Limited Context 📊
With only one chart for data, it got harder to understand why the values were appearing
A stakeholder seeing "15 units sold" with no breakdown can't act on that without context like direct vs. recurring, monthly vs. yearly, and trend comparisons.
Additional Requirement 📺
The dashboard would be used as a screensaver for the company display
This meant it had to be single page so decided on discarding this page completely
Last 30 days
Double date can be confusing, and too much for an MVP
Limited Context 📊
With only one chart for data, it got harder to understand why the values were appearing
A stakeholder seeing "15 units sold" with no breakdown can't act on that without context like direct vs. recurring, monthly vs. yearly, and trend comparisons.
Additional Requirement 📺
The dashboard would be used as a screensaver for the company display
This meant it had to be single page so decided on discarding this page completely
PHASE 2/2
PHASE 2/2
High fi wireframes with feedback implementation and visual language
High fi wireframes with feedback implementation and visual language
As it was a Programiz product it made sense to use the company's design system which is modern and approachable with fun accent colors on the charts.
As it was a Programiz product it made sense to use the company's design system which is modern and approachable with fun accent colors on the charts.
The new wireframes had 2 major changes based on the feedback we received in Phase 1:
The new wireframes had 2 major changes based on the feedback we received in Phase 1:
More context to KPI charts so users could understand where the data was coming from and compare it to other metrics.
As this was now going to be used as a screensaver in the company's display instead of scroll view it was turned into a single-screen layout.
Adding context to KPIs
Adding context to KPIs
New users
Users Acquired
47
10% more than last month
Did not Sign up
Signed up
Last 1 month
59
267
Users Acquired
May
April
25
20
15
10
5
0
W1
May 1
W2
W3
W4
Visits to sign up rate
30%
10% vs last month
Users visits
1500
10% vs last 30 days
Users registered
200
10% vs last 30 days
Lifetime User Count
15007866
Clear statistical data always visible, which can work for screensaver.
Rate calculation on dashboard so users do not have to manually calculate.
Comparison between user acquisition over time, which lets user determine if the product is performing well or not.
No comparative metric for determining if the data is good or bad
Data only accessible on hover which cannot work on a screensaver display
Sales
Clear information about how total sales is calculated for first time viewer
Sales broken down by type of subscription
Clear stats showing Trial to payment
Insufficient information on what type of subscription was being sold.
Traffic Source
Customer Support
Unresolved issues
100
10% vs last month
Highest issues
Content
Content
Development
Payment
Others
Unressolved 75%
Ressolved 25%
More context and scalable design when there are too many sources
Clearly informs what team is getting the most report.
Lack of context and not scalable if there are too many sources
Lack of context and data only accessible on hover which cannot work on a screensaver display
New users
Users Acquired
47
10% more than last month
Did not Sign up
Signed up
Last 1 month
59
267
Users Acquired
May
April
25
20
15
10
5
0
W1
May 1
W2
W3
W4
Visits to sign up rate
30%
10% vs last month
Users visits
1500
10% vs last 30 days
Users registered
200
10% vs last 30 days
Lifetime User Count
15007866
Clear statistical data always visible, which can work for screensaver.
Rate calculation on dashboard so users do not have to manually calculate.
Comparison between user acquisition over time, which lets user determine if the product is performing well or not.
No comparative metric for determining if the data is good or bad
Data only accessible on hover which cannot work on a screensaver display
Sales
Clear information about how total sales is calculated for first time viewer
Sales broken down by type of subscription
Clear stats showing Trial to payment
Insufficient information on what type of subscription was being sold.
Traffic Source
Customer Support
Unresolved issues
100
10% vs last month
Highest issues
Content
Content
Development
Payment
Others
Unressolved 75%
Ressolved 25%
More context and scalable design when there are too many sources
Clearly informs what team is getting the most report.
Lack of context and not scalable if there are too many sources
Lack of context and data only accessible on hover which cannot work on a screensaver display
Other additions
Other additions
Single date filter
Single date filter
Will be fixed to last 30 days on screensaver, but if viewed in website it can be changed by user
Will be fixed to last 30 days on screensaver, but if viewed in website it can be changed by user
Status bar
Status bar
Easy way to check if Programiz PRO is running or down
Easy way to check if Programiz PRO is running or down
FINAL DESIGN
FINAL DESIGN
IMPACT
IMPACT
Cut analyst data requests by 50-75%
Cut analyst data requests by 50-75%
Teams now access data independently, looping in the analyst only when deeper investigation is needed.
Teams now access data independently, looping in the analyst only when deeper investigation is needed.
Issue reported for:
Content
Dev
Others
08
15
22
29
01
May
250
200
150
100
50
0
Data Visualization
User Research
Iteration
Others (0.3%)
Before
Before
Before
After
After
After
requests per week
1-2
requests per week
1-2
requests per week
1-2
requests per week
4
requests per week
4
requests per week
4
Issue reported for:
Content
Dev
Others
08
15
22
29
01
May
250
200
150
100
50
0
Shifted the workflow
Shifted the workflow
Decision makers now check the dashboard first and only loop in the analyst when deeper data is needed.
Decision makers now check the dashboard first and only loop in the analyst when deeper data is needed.
Before
Ask analyst → Wait → Get data → Decide
Before
Ask analyst → Wait → Get data → Decide
After
Check dashboard → Decide → Ask analyst if needed
After
Check dashboard → Decide → Ask analyst if needed
Data Visualization
User Research
Iteration
Others (0.3%)
