Designing a performance dashboard to help EdTech educators turn classroom data into actionable insights.
B2B2C ▫️ Data Visualization ▫️ Dashboard Design
PROJECT OVERVIEW
I led end-to-end product design for VIBGYOR, a B2B2C EdTech platform focused on improving learning outcomes through teacher-student connection. I designed chat-based interactions, gamified tools, and performance dashboards that empowered educators to monitor progress, drive engagement, and take data-backed actions to support every student’s growth.
COMPANY
VIBGYOR
ROLE
Lead UI/UX Product Designer
TIMEFRAME
13 months
TECH-STACK
Figma, Adobe CC, Hotjar, Notion, Looker Studio, VS Code, HTML, CSS, Jira, Slack, Qualtrics
THE CHALLENGE
Teachers had limited visibility into student performance, relying on manual tracking or fragmented tools. This made it hard to spot learning gaps, personalize instruction, or intervene in time, leading to inconsistent progress and low student motivation.
MY APPROACH
I designed a data-rich dashboard with visual cues and filters to help educators quickly identify trends and act. By combining real-time insights with engaging UI, I enabled smarter decisions, timely interventions, and stronger classroom outcomes.
STEP 1
DEFINE
UNDERSTANDING THE PROBLEM
EdTech tools often prioritized content delivery over learner outcomes. VIBGYOR set out to bridge that gap, designing for measurable progress, tailored interactions, and timely support. The goal was to create clarity in learning paths without overwhelming users with data noise.
STAKEHOLDER INTERVIEW INSIGHTS
Teachers: Wanted better engagement tools, performance tracking, and an easy way to schedule and conduct classes.
Students: Needed a more interactive learning experience with direct access to teachers.
Administrators: Required analytics dashboards to monitor overall platform usage, teacher performance, and student progress.
Parents: Desired progress reports and insights into their child’s performance.
.png)
STEP 2
DISCOVER
UNCOVERING USER NEEDS AND PAIN POINTS
To understand market trends and user expectations, extensive research was conducted by analyzing competitors like OpenAI’s ChatGPT, Anthropic’s Claude, and Google’s Gemini. The research revealed a gap in AI that encourages user reflection rather than simply providing answers.
MARKET RESEARCH
Analyzed the growing demand for online education and one-on-one tutoring platforms.
Identified gaps in platforms like Zoom, Google Classroom, and Coursera in terms of real-time student-teacher interactions.
COMPETITIVE ANALYSIS
Google Classroom: Strong integration with Google tools but lacked one-on-one engagement.
Udemy & Coursera: Focused on recorded courses rather than real-time student-teacher interaction.
Zoom & Microsoft Teams: Provided real-time communication but lacked education-specific features like performance tracking and reporting.
USER RESEARCH
Conducted surveys and interviews with 200+ students and 50+ teachers to understand their pain points.
Key insights:
-
Students preferred personalized guidance over large online classes.
-
Teachers needed an efficient way to track and manage student progress.
USER SURVEY
USER REVIEW INSIGHTS
Examined user reviews on platforms like Byju's, Khan Academy, and Vedantu. This helped us identify common pain points such as:
-
Technical Issues: Frequent bugs, slow loading times.
-
Content Quality: Outdated materials, lack of engaging content.
-
Accessibility: Limited features for differently-abled users.
These insights were pivotal in shaping our approach to Vibgyor's development, ensuring we addressed these gaps effectively.
USER PERSONA
.jpg)
.jpg)
USER JOURNEY MAP
.jpg)
TECHNICAL RESEARCH
I collaborated with the development team to complete technical research focused on selecting the right technologies and frameworks to support our platform's scalability, security, and user interface. Integrating features like real-time messaging and video calls required robust technical solutions to enhance user interaction and accessibility. This research phase ensured that our platform could deliver seamless user experiences across various devices and network conditions.
.jpg)
STEP 3
IDEATE
SOLVING THE PROBLEM
To bridge the gap in online education, we developed a personalized student-teacher engagement platform that integrates real-time interactions, performance tracking, and automated reporting. By combining one-on-one video classes, messages, gamefied learning modules, and intuitive analytics dashboards showcasing student performance metrics through data visualization, the solution empowers educators to make data-driven decisions while enhancing student learning outcomes.
SOLUTION IDEATION
-
A unified student-teacher engagement platform with:
-
One-on-One Messaging & Video Classes
-
Performance Dashboards for Teachers & Admins
-
Sharable Student Reports
-
Role-Based Access Control for Different Users
-
.png)
INFORMATION ARCHITECTURE
Designed the IA to ensure seamless navigation for students, teachers, and administrators.
Developed user flows for class scheduling, progress tracking, and reporting.
STEP 4
DESIGN
CREATING THE SOLUTION
The design phase focused on translating research insights into a seamless, intuitive user experience. To make student performance data actionable, we incorporated data visualization techniques such as interactive charts, color-coded indicators, and drill-down analytics. Custom dashboards were designed using React and D3.js, allowing real-time insights into student progress and engagement. Our data-driven design approach ensured that teachers and admins could efficiently monitor trends and make informed decisions.
DATA TO DESIGN
One of the most exciting challenges was transforming raw student performance data into visually engaging, digestible insights.
I used custom webhooks and API integrations to connect live data streams with 3D environments in Spline — creating dashboards that not only informed but inspired. Teachers could now monitor learning progress in a way that felt dynamic and actionable, not overwhelming.
DASHBOARD DESIGN
STEP 5
TEST
VALIDATING THE SOLUTION
We conducted multiple rounds of usability testing with students, teachers, and administrators to validate the platform’s effectiveness.
KEY IMPROVEMENTS
-
Streamlined onboarding process.
-
Enhanced dashboard clarity with data visualization for better performance insights.
-
Improved mobile responsiveness for students accessing from smartphones.
STEP 6
MONITOR
TRACKING IMPACT & ITERATING FOR GROWTH
Post-launch, we continuously monitored platform usage through analytics dashboards, heatmaps, and user feedback. Key performance metrics included student engagement rates, teacher satisfaction scores, and class participation levels.
KEY INSIGHTS
-
30% increase in student engagement and 40% improvement in teacher satisfaction.
-
Iterated on the dashboard layout using heatmaps and session recordings.
-
Reduced design handoff issues by 35% through collaboration with developers.
KEY LEARNINGS
Visual hierarchy drives clarity — color, layout, and grouping directly impacted how users interpreted data.
Collaborative iteration works — heatmaps and dev feedback loops refined usability.
Simplicity enhances confidence — reducing noise helped users act faster and more accurately.
THE IMPACT
Improved data interpretation accuracy by 50% through redesigned layout and visual cues.
Increased task success rate by 82% by simplifying flows and reducing decision fatigue.
Reduced design handoff friction by 35% with better developer alignment and clearer specs.
CONCLUSION
Designing VIBGYOR helped me transform complex classroom data into intuitive dashboards, deepening my skills in data visualization, user testing, and cross-functional collaboration.