Education
A fragmented school admin system rebuilt around one question: what does this teacher, parent, or admin need to do right now?
SchoolHub began as an internal tool for a mid-size private school network managing roughly 2,000 students across three campuses. Admin staff were juggling spreadsheets, a legacy student information system with a interface that hadn't changed in over a decade, and WhatsApp groups for parent communication.
The problem: Three user groups — teachers, parents, and admins — relied on overlapping but disconnected tools to do basic things like mark attendance, share grades, and send fee reminders. Nothing talked to anything else, and admin staff were re-entering the same data two or three times a week.
Business goals: Consolidate attendance, gradebook, fee tracking, and parent communication into one system; cut admin data-entry time; give parents a self-serve way to check on their child without calling the office.
I ran contextual interviews with four teachers, three admin staff, and six parents across two campuses, shadowed a morning attendance routine start to finish, and audited the legacy system's workflow for every task it currently handled.
Needs attendance and grade entry to take under five minutes a day, between classes.
Checks his phone on work breaks; wants a fast way to see attendance and fee status.
Manages enrollment and fees for 700+ students; needs one source of truth.
I reviewed Google Classroom (strong for coursework, weak on admin and fees), a regional student information system (data-rich but a steep learning curve for parents), and PowerSchool (a solid data model that overwhelms a first-time parent user). The gap: nothing served all three user types with an interface each could learn in a single sitting.
User flow: I mapped three core flows — a teacher's daily attendance and grade entry, a parent's daily check-in, and an admin's fee reconciliation — and held each to three taps or clicks from login to task completion.
Information architecture: Navigation is role-based: the same app shows a different home screen depending on whether you log in as a teacher, a parent, or an admin, instead of one dense dashboard with permissions bolted on top.
Wireframes: Low-fidelity flows were tested with three teachers and two parents before any visual design started. The biggest change from that round: attendance-marking moved from a multi-step form into a single tap-to-toggle roster.
A calm, high-contrast interface prioritizing legibility on older browsers and the lower-end Android devices common among parents in this community. Dense tables gave way to card-based summaries with drill-down detail where more depth was actually needed.
Design system: A lightweight component library — roster list, status pill, fee-status badge, notice card — reused across all three role views. Later features built on this system took roughly half the design time of the earlier ones.
Typography: Space Grotesk for headings, chosen for its clarity on small, older screens; Inter for body copy and data-heavy tables.
Key components: Roster row with tap-to-toggle status, fee badge, notice/announcement card, and dedicated empty states for "no notices today" and "no fees due."
Prototype: A clickable Figma prototype covering all three core flows, tested with five users — two teachers, two parents, one admin — across two rounds.
Accessibility: Contrast checked to WCAG AA in both light and dark themes; status is never conveyed by color alone, always paired with an icon and label; tap targets sized for one-handed phone use, matching how parents actually used the app.
Challenges: Serving three very different literacy levels with technology in a single system, without building three separate apps. Attendance data also needed to sync in near real time so parents saw it before the school day ended, which meant rethinking a batch-based legacy sync process.
Solutions: Role-based home screens sharing one underlying component system resolved the "three apps, one codebase" tension. On sync, working with the engineering lead to move from a nightly batch job to event-based updates made the biggest difference — paired with a visible "last updated" timestamp on the parent view to make that reliability legible, not just real.
Freed admin staff time for higher-value work, reduced parent frustration and the goodwill cost of unanswered messages, and gave school leadership their first real-time view of attendance and collections across campuses.
Delivered a Figma file with named, auto-layout components, a documented spacing and type scale, and every component state — default, hover, disabled, error, empty. Ran a 45-minute walkthrough with the two-person dev team and stayed available on Slack through the first sprint.
Lessons learned: Much of the real work on this project was organizational, not visual — getting three stakeholder groups to agree on one system took more negotiation than any wireframe did. I also learned to test on the actual low-end devices parents used; a few interactions that felt smooth on my laptop were sluggish on older Android phones.
Next improvements: A homework and assignment module, offline-first support for attendance marking on campuses with unreliable wifi, and a native app wrapper for parents who preferred not to use mobile web.
This project taught me that "who is this screen for" is a design decision, not a permissions setting. The moment I stopped building one dashboard for everyone and started building three focused experiences on one system, the whole product got simpler — for users, and for me.