Scholastic District Impact
Transforming the Admin Dashboard from a passive reporting tool into an active diagnostic engine to optimize ROI and accelerate intervention.
Role: Staff Product Designer Context: Enterprise EdTech (B2B SaaS)
Core Focus: Product Strategy, Data Ethics, AI Prototyping
Timeline: 4 Weeks (Discovery to High-Fidelity Prototype)
Team: 1 Staff Designer (Me), 2 Product Manager, 2 Engineers (Consulted)
KEY OUTCOMES
Strategic Pivot: Moved the product from "Passive Reporting" to "Diagnostic Intervention."
Equity Focus: Established Title I compliance through segmented student group filtering.
Business Value: Validated the "Home Access" revenue model via usage visualization.
THE CHALLENGE
District Administrators are busy people. They control million-dollar budgets and are responsible for thousands of students, but their old dashboard was failing them: it was a "data dump"—rows of numbers that didn't tell a story.
They couldn't answer the two most important questions: "Is the software working?" and "Which schools need my help right now?"
My goal was to turn this dashboard from a passive report card into a helpful diagnostic tool.
Mapping The Model
Hypothesis & Research
We gathered stakeholders to map out the 'Data Narrative' to determine exactly what an Admin needs to know to do their job.
The Research Reality Check: We took our initial concepts and put them in front of District Administrators. The feedback revealed a critical misalignment in our assumptions.
Our Hypothesis (The Inventory Model): "Admins need a comprehensive directory of every school, sorted A-Z, to track inventory."
User Feedback (The Triage Model): "I don't have time to scroll through 50 schools. I need to know who is winning so I can praise them, and who is drowning so I can save them."
The Strategy: This insight drove the architecture of the entire dashboard. We realized we needed two distinct layers: a "Pulse Check" for the district and a targeted "Triage Tool" for specific schools.
ARCHITECTING THE EXECUTIVE SUMMARY
Hierarchy & Value Chain
First, we addressed the "Pulse Check." I structured the top of the dashboard not as a random collection of metrics, but as a linear Value Chain that tells the story of the investment from Input to Output:
License Utilization (Financial Input): "Are we getting what we paid for?" This is the fiscal baseline.
Active Schools (Operational Success): "Is the software actually deployed?" This measures implementation health.
Weekly Minutes (Behavioral Engagement): "Are students using it?" This validates adoption fidelity.
Reading Proficiency (Educational Impact): "Is it working?" This is the ultimate return on investment.
The Filter Strategy: Defining Context To support this narrative, I limited the global controls to four essential "Context Keys":
Product (Scope): Which tool are we analyzing?
Timeframe (Fiscal): Aligning data to the Academic Year (Aug-June) rather than the calendar year.
School Level (Segment): Separating Elementary (Foundational) from High School (Intervention).
Student Group (Equity): Ensuring no demographic is hidden in the average.
THE DIAGNOSTIC LAYER
Solving the "Inventory vs. Triage" Problem
With the high-level health established, I returned to the core insight from our research: Admins don't want an A-Z list; they want to know who needs help.
I designed the "School Performance" leaderboard to replace the old directory. Instead of a search bar, I built it around a specific toggle: Top Performing vs. Needs Attention.
The Logic: This respects the administrator's dual mental model. They can instantly toggle between Celebration (Validating success) and Intervention (Triaging struggling schools) without sifting through pages of data.
CLOSING THE LOOP: EMBEDDED ACTION
Operational Efficiency & Adoption
Data is useless without action. A common frustration with legacy dashboards is the "Dead End Insight"—seeing a problem (e.g., "Low Teacher Activation") but having to navigate away to a separate "User Management" tool to fix it.
I designed the "Teacher Activation" card to close this loop directly on the dashboard.
The Alert: The card uses semantic formatting (Warning banner) to flag the specific bottleneck: "17 teachers pending registration."
The Embedded Action: Instead of just reporting the number, I placed a "Resend Invites" button directly within the widget context.
The Win: This transforms a passive metric into an active workflow. It reduces a multi-step administrative task into a single click, empowering Admins to drive product adoption immediately without losing context.
MEETING STUDENTS WHERE THEY ARE
Business Strategy & Mission Alignment
The district pays extra for "Anytime Access" licenses, so we needed to prove that learning was actually happening outside of school hours.
I designed the "Daily Usage" chart with a Weekday vs. Weekend toggle to visualize this story.
The Data Story: Weekday usage shows a sharp spike during school hours (Compliance). Weekend usage shows a gentle curve throughout the day, which signals Voluntary Engagement.
The Outcome: This chart proved that our mobile strategy is working. It showed administrators that students are choosing to engage with the app on their own time, validating the investment in home access.
DESIGNING FOR TRUST
Data Ethics & Integrity
In EdTech, data represents a child's education. A common trap is "Vanity Metrics"—making numbers look better than they are to keep the customer happy. I established a core principle of Honesty over Vanity.
The "Zero-Baseline" Rule: We ensured all bar charts start at zero. Truncating the Y-axis to exaggerate small gains is a dark pattern we refused to use.
Semantic Colors: Early iterations relied on arbitrary brand colors (Purple, Orange) which looked appealing but lacked "cognitive signal." I shifted to a Semantic System where color equals meaning:
Blue: Volume/Neutral (Minutes read).
Amber: Action Required (Needs Attention).
Green: Success State (On Track).
Result: The dashboard communicates priority instantly, without requiring the user to read every label.
THE PROCESS: DESIGNING WITH CODE + AI
Technical Craft
I skipped the traditional weeks of static mockups. Instead, I utilized an AI-assisted development workflow to prototype directly in React and Tailwind CSS.
This approach allowed me to move from "drawing pictures" to "engineering logic" in real-time.
Static Tools Lie, Code Tells the Truth: By working in the browser, I caught layout bugs on mobile—like charts collapsing to zero height—that static tools hid.
Designing for the Chromebook Reality: School districts run on Chromebooks, which are often hybrid touch devices. I refactored the charts to prioritize direct axis labeling and touch-friendly interactions, ensuring data wasn't locked behind a "hover" state that many users can't access.
The "Zero-Friction" Handoff: I partnered with Engineering early to validate component feasibility, then handed off production-ready logic, cutting engineering setup time in half.
THE CONCLUSION
By listening to users, respecting the data, and designing for the reality of Chromebook-first classrooms, we transformed a "Reporting Tool" into a "Strategic Asset." The final design didn't just show administrators what was happening; it gave them the diagnostic clarity to understand why.
FUTURE VISON: THE AI-ENABLED ADMINISTRATOR
From Diagnostic to Prescriptive
If I were to take this product to the next level, I would move beyond visualizing data to synthesizing it.
Generative Insights: I would introduce a Natural Language Query feature (e.g., "Show me which schools are trending down since October"), transforming the dashboard from a passive screen into an active analyst.
Strategic Benchmarking: To align User Success with Business Growth, I would introduce Peer Benchmarking. By showing Admins how their district compares to similar cohorts (e.g., "Your math scores are 12% below peer districts"), we can contextually recommend specific Scholastic products to close the gap—turning "Sales" into "Consultative Problem Solving."