ClassCardApp | B2B SaaS
Designed end-to-end experiences for a B2B SaaS platform (Classcard), working across both mobile and web applications. Focused on creating cohesive, user-centric interfaces that improved usability, streamlined workflows, and ensured consistency across platforms.
Client:
ClassCardApp
Category:
Mobile & Web UI design, Design Systems
My Role:
Designer
Classcard is an all-in-one class management platform for studios and academies — handling scheduling, attendance, payments, and student communication. As the sole designer, I worked directly with the CEO to shape the product across four surfaces: student app, staff app, web app, and design system.
Initial Steps
My first step was to gain a deep understanding of the app's structure, key features, and the diverse roles of users—ranging from teachers and administrators to students and parents. I identified key pain points and opportunities for streamlining workflows, making the app more intuitive and accessible for all user types.
Impact
The redesigned apps enhanced user engagement, improved navigation, and reduced the time needed to manage class schedules and drive sales. This led to increased satisfaction among both staff and students, contributing to better adoption and usage of ClassCard's platforms.
Student App
A branded progressive web app students could save straight to their homescreen — no app store, no friction. The goal was to give students one place for everything related to their classes, without it feeling like another admin tool they'd ignore.
The app covers class schedules with a calendar view, attendance tracking with averages, grades, resource libraries, and upcoming bookings — all surfaced on a single profile dashboard so nothing gets buried. The invoicing flow was a particular design challenge: students needed to understand their payment status at a glance (issued, paid, overdue) and act on it without confusion. The instalment view breaks down exactly what's due and when, with clear CTAs to pay in full or by instalment — reducing the back-and-forth between studios and parents chasing fees.
Staff App
Designed for coaches and studio staff who are on their feet all day — the staff app needed to be fast, glanceable, and work just as well between classes as it does at a desk.
From the calendar view, staff can accept or reject bookings in one tap. The attendance flow lets coaches mark the whole class at once or go student by student — with quick status tags for late, left early, or trial students. Important context like allergies (peanut allergy, flagged right at the top of a student's profile) surfaces where it's actually needed, not buried in settings.
The student profile brings together everything a coach needs in one place — contact details, attendance averages, grades, invoices, bookings, and notes — so they're never switching between tools mid-conversation with a parent. Enrolment and registration is handled inline too, with invoice linking and waitlist management built into the same flow.
Design System
With three surfaces to maintain — student app, staff app, and web — consistency wasn't optional. The design system was built to make sure a coach and a student looking at the same piece of information (an invoice, an attendance stat, a notification) were seeing it through the same visual language, even if the context was different.
The system covers invoice and billing components across multiple states (issued, paid, overdue, unavailable), attendance indicators, alert and notification patterns, status feedback (failed, successful, pending), leave request states, action confirmations, and chat UI. Colour was used systematically to communicate status — red for overdue or absent, green for paid or present, amber for warnings — so users could scan and act without reading every word.
Building this as a solo designer working across multiple flows meant the system wasn't just a nice-to-have. It was what kept the product from fragmenting as new features got added.