Establishing scalable UI foundations
for an evolving EdTech Platform
ROLE
Product Designer
CLIENT
SchoolworksPro
YEAR
2024
Project Overview
SchoolworksPro is an education management platform used by school administrators, teachers, and finance teams to manage academic operations, scheduling, and compliance reporting. The Admin Dashboard is the control center for school and college staff—enabling them to assign roles, monitor activity, and generate reports across institutions.
Over time, rapid product growth led to a fragmented UI. Admin users voiced frustration about unclear navigation, inconsistent components, and poor readability—especially when working with complex tables or managing user data. In user feedback, we consistently heard:
"I can't tell which elements are clickable anymore — everything looks the same."
"I waste time scrolling through menus to find what I need."
Frequent updates and feature releases made the interface harder to maintain and scale, leading to internal inefficiencies and inconsistent design decisions. These pain points highlighted the need for a foundational reset.
To solve this, I led the creation of a custom design system tailored to SchoolworksPro's needs. Rather than adopting off-the-shelf systems like Material Design—which risked diluting the brand and overcomplicating development—we built a scalable, accessible, and brand-aligned system from scratch. This not only addressed immediate usability issues but also laid the groundwork for future dashboards across finance, teaching, and student use cases.
Problem
The existing Admin Dashboard was cluttered, inconsistent, and difficult to maintain. Users struggled with poor hierarchy, hard-to-read tables, and unclear interactions—all symptoms of an undefined design system. Frequent product updates compounded these issues, creating a fragmented user experience and design debt across the platform.
My Role & Team
As the Product Designer on a two-person design team, I led the strategy, creation, and implementation of the new design system for SchoolworksPro's Admin Dashboard. My responsibilities included:
- • Conducting a full UI audit to identify inconsistencies and usability issues
- • Defining the design system architecture: typography, color, components, interaction states
- • Designing and documenting scalable, reusable components in Figma
- • Collaborating with developers to ensure design feasibility and implementation consistency
- • Championing accessibility best practices (WCAG compliance, color contrast, keyboard nav)
- • Providing system guidance for future expansion into other product areas
Despite a lean team and tight timelines, I owned the end-to-end design system process—from discovery to delivery—while balancing brand alignment, UX goals, and scalability.
Design Audit & Key Findings
A comprehensive audit revealed several UX and UI issues that needed to be addressed before any systemization could begin:
Typography
Over 4 different fonts and 20+ scale variations broke visual hierarchy and readability.
Color
No standardized palette existed, resulting in inconsistent visual styling and inaccessible contrast.
Buttons, Tags, and Tabs
Visually indistinct—users couldn't tell what was interactive versus static.
Tables
Heading contrast was too high, reducing legibility and increasing eye strain for users analyzing data.
"Every screen looks slightly different — it feels like five different products stitched together."
"I had no idea that was a button — it looks like a tag."
Strategy: Build vs. Adopt
We explored adopting established design systems like Material Design. However, we quickly identified key trade-offs:
Visual Identity Risk
Using Material would risk making our product look like a generic Google app, which would erode trust with schools that rely on brand familiarity.
Development Overhead
Material's complexity would have introduced bloated components we didn't need—slowing implementation without delivering real user value.
Limited Flexibility
Our platform serves a wide range of institutions with evolving needs. We needed a system that could scale our way, not within someone else's rules.
Choosing to build a custom design system gave us full control—allowing us to define consistent patterns, align with our brand, and prioritize accessibility from day one. It also made it easier to maintain a unified experience across our upcoming dashboards for Finance, Teachers, and Students.
Design System Foundations
Color
I designed the color system to support brand integrity, usability, and accessibility:
- • Anchored the primary and secondary colors in SchoolworksPro's visual identity
- • Introduced functional UI colors (grey, red, green, orange, pink) already familiar to users
- • Created a 900–100 scale per color for design flexibility and theming needs
- • Ran accessibility audits using WCAG 2.1 to ensure compliant contrast ratios across combinations
Impact:
- • Eliminated guesswork in design decisions
- • Reduced rework and visual inconsistency
- • Helped developers implement consistent themes faster
Typography
I introduced Inter as the primary typeface for its high legibility and web-friendliness. I defined a responsive, scalable type system to support various use cases:
- • Display styles for section headers and marketing-style content
- • Heading levels H1–H6 for content structure and semantic clarity
- • Body sizes from XXXL to Tiny for dense data tables and general UI
- • Label and Button styles to enforce visual consistency in interactive elements
Each tier was built in three font weights—Regular, Medium, and Bold—to give designers and devs clear patterns for hierarchy and emphasis.
Impact:
- • Improved scan-ability and readability
- • Increased accessibility, especially in data-heavy sections
- • Standardized text styles across the platform for consistency and speed
Core Components
Buttons
- • Sizes: Small, medium, large
- • Icons: Support for left/right icon placement
- • States: Normal, hover, disabled
- • Types: Primary, secondary, tertiary—with color-coded logic
Impact:
- • Reduced decision fatigue by limiting button types
- • Improved interaction clarity with defined states
- • Simplified dev and QA by documenting button specs in Figma
"Now I always know what's clickable and what's just a label."
Forms
- • Multiple states: hover, focus, typing, error, success
- • Input field variations for icons, inline validation, and accessibility
- • Clear error messaging and consistent labeling
- • Intelligent search dropdown and user-friendly date picker
Impact:
- • Enhanced usability and reduced form errors
- • Improved developer efficiency with clearly defined states
- • Delivered a consistent experience across all forms
"We noticed fewer support tickets once the new form patterns went live."
Navigation
- • Sidebar Redesign: Condensed layout to reduce clutter
- • Collapsible Menus: Improved scan-ability and task focus
- • Header Tabs: Moved key sections to top-level tabs for easier access
Impact:
- • Increased efficiency in task completion
- • Reduced scroll fatigue for admin users
- • Enhanced discoverability of key features
"It's so much easier to find what I need now — I don't have to hunt through the sidebar anymore."
Other Components
Components like tables, modals, and sliders were also redesigned for consistency with the new system.
Impact:
- • Standardized UI patterns across modules
- • Improved readability in dense data layouts
- • Reduced design and dev overhead by aligning to core foundations
Outcomes & Impact
Design Debt Reduction
Reduced design debt based on audit comparisons
Product Areas
Scalable foundation extended to Finance, Teacher, and Student dashboards
Consolidated Variations
Reduced button and label variations through systematic approach
User Experience
- ✅ Improved UI consistency across the Admin Dashboard
- 🧠 Improved user clarity and readability in data-dense areas
- 🌈 Ensured accessibility with WCAG-compliant color palettes
- 🧭 Reduced user confusion based on qualitative feedback
Development & Process
- 🎯 Enabled faster development cycles with componentized system
- 🛠️ Reduced visual and functional duplication
- 🚀 Accelerated developer handoff with shared design language
- 🤝 Received positive feedback for system clarity and maintainability
Reflection & What's Next
If I could go back, I would have initiated earlier alignment with developers and QA on component naming conventions to reduce friction during implementation. I'd also dedicate more time to usability testing on early component prototypes to validate assumptions sooner.
The design system is now being actively extended to other SchoolworksPro dashboards, including Finance, Teacher, and Student experiences. Longer term, we're exploring a centralized design ops process to maintain and evolve this system across our growing product suite.