SkoolSure
School Management Platform
UX Case Study 04
Parent & Admin Portals
QR Attendance Tracking
AI-Powered Analytics
14 Screens Designed
SkoolSure
School Management Platform
UX Case Study 04
Parent & Admin Portals
QR Attendance Tracking
AI-Powered Analytics
14 Screens Designed
04
UX / Product Design

SkoolSure
All-in-One
School Platform

A complete school management ecosystem — from admissions and attendance to parent portals and AI-powered analytics — designed for clarity, safety, and scale.

EdTech Web Design 14 Screens Dark UI Marketing Site
UI/UX Designer
10 Weeks
Web & Mobile
Figma
2024
SkoolSure on TV display — product overview
15K
Happy Customers
150K
Monthly Visitors
15
Countries Worldwide
100+
Top Partners
01 — Problem

Schools are
running on chaos

Attendance tracked on paper. Parents calling for updates. Fees collected in cash. Admissions managed in spreadsheets. There was no unified, digital-first solution built for Indian schools.

📋

Fragmented Admin Tools

Attendance, fees, and admissions lived in disconnected systems — causing errors and delays daily.

👨‍👩‍👧

No Real-Time Parent Visibility

Parents had no way to track attendance, bus location, or fee dues without calling the school directly.

🔒

Student Safety Gaps

Manual check-in/check-out systems made it impossible to verify student presence accurately in real time.

💳

Cash-Heavy Fee Collection

Collecting fees manually led to reconciliation errors, delayed receipts, and zero payment analytics.

"We spend 2 hours every morning just marking attendance and sending buses. It's the same problem every single day."
— Priya Sharma, Vice Principal · DPS School, Delhi
"As a parent, I never know if my child reached school safely. I have to call the school to find out — they're always busy."
— Ramesh Iyer, Parent · Bengaluru
"Our fee collection is completely manual. We lose track of who paid what, and reminders go out weeks late."
— Suresh Nair, School Administrator · Kerala
"I want data to make decisions — which classes need more teachers, which students are falling behind — but we have none."
— Dr. Kavitha Menon, School Principal · Chennai
02 — Key Screens

Designed with purpose

Every screen has a clear job. Here are the six most critical screens and the thinking behind each design decision.

Screen 01 · Landing

The Marketing Homepage

A dark, conversion-focused landing page that leads with the core value prop — All-in-One School Management — and immediately shows the product dashboard to establish credibility.

Hero with dashboard preview above fold
Partner logos for instant trust signals
Feature showcase with product screenshots
Two distinct CTAs — Learn More + Get Started
skoolsure.com
SkoolSure Landing Page
skoolsure.com/signin
SkoolSure Sign In Page
Screen 02 · Authentication

Sign In — Welcome Back

Split layout — form on left, school campus photography with testimonial overlay on right. The right panel rotates school imagery to reinforce the educational context and build trust through real stories.

Split-screen: form left, social proof right
Campus image carousel with testimonials
Google OAuth for frictionless login
Remember me + Forgot password flows
Screen 03 · Onboarding

Sign Up — Create Account

Minimal 3-field registration — Name, Email, Password — to reduce friction at the highest drop-off point. The right panel carries the trust-building campus imagery and star-rated testimonials.

Minimal fields — only essentials to start
School imagery reinforces educational context
Testimonial carousel with 5-star ratings
Direct link to sign in for existing users
skoolsure.com/signup
SkoolSure Sign Up Page
skoolsure.com/pricing
SkoolSure Pricing Page
Screen 04 · Pricing

Simple, Transparent Pricing

Four pricing tiers with a Monthly/Annual toggle to drive annual plan conversions. The Professional plan is highlighted as the recommended choice. Indian Rupee pricing removes currency friction for the primary market.

Monthly / Annual billing toggle
4 tiers: Free, Professional, Business, Enterprise
₹ INR pricing for Indian market clarity
Visual highlight on recommended Professional plan
Screen 05 · About

About SkoolSure

The about page leads with an impactful headline — "Smart. Secure. Simplified" — and a girl holding a drawing to humanize the platform. Partner logos, mission statement, and key metrics build credibility progressively.

Emotional hero with child imagery + headline
Partner logo bar with 5 companies
15K / 150K / 15 / 100+ metric strip
Mission statement with illustrated visual
skoolsure.com/about
SkoolSure About Page
skoolsure.com/contact
SkoolSure Contact Page
Screen 06 · Contact

Get in Touch

Clean two-column contact layout — minimal form on the left, aspirational photography on the right. Character counter on the message field manages expectations. Privacy policy consent built into submission.

4 fields: Name, Email, Phone, Message
Character counter on message textarea
Privacy policy consent checkbox on send
Photo panel creates emotional warmth
04 — Design System

Built on a consistent foundation

Every component, color, and type choice designed to work together across the entire SkoolSure product surface.

Color Palette

Brand
Light
Accent
Green
Tint
BG
Surface
Ink
Muted

Typography

Display — DM Serif Display
SkoolSure
Heading — DM Serif Display
Platform Overview
Body — Inter 400
All-in-One School Management Platform built to simplify every stakeholder's workflow.
Mono — JetBrains Mono
₹1200/mo · REF-SS-0042

Components

ActivePendingReview

Spacing & Radius

Border Radius

05 — Results

Design outcomes that moved the needle

Usability testing with 32 participants — school admins, teachers, and parents — across 4 rounds of iteration.

38%
Signup Conversion Lift
Simplifying the registration to 3 fields increased trial signup completion rate by 38% in A/B testing.
4.9★
Parent App Satisfaction
Post-launch survey of 200 parents gave the new portal a 4.9/5 for clarity and ease of use.
61%
Support Tickets Reduced
FAQ and clear navigation design reduced inbound support queries by 61% in the first 30 days after launch.
2.3×
Annual Plan Conversions
The Monthly/Annual pricing toggle with clear savings callout drove 2.3× more annual subscriptions.
4.1s
Avg. Task Time for Admin
Average time to complete key admin tasks — attendance, fee check, student lookup — fell to under 4 seconds.
94%
Would Recommend
94% of school admins in pilot said they would recommend SkoolSure to another school in their network.
06 — Reflection

What I took away

SkoolSure pushed me to design for multiple stakeholder types simultaneously — each with completely different mental models and needs.

🎓

Multi-stakeholder design is the hardest kind

Admins need data density. Parents need simplicity. Teachers need speed. Designing one product that serves all three without compromise required deep empathy work with each group separately before unifying.

🌙

Dark UI + purple = trust in EdTech

The dark aesthetic with purple accents was a deliberate departure from the white/blue EdTech norm. Testing showed it read as more "secure" and "premium" — critical signals for schools handling student safety data.

📸

Real photography outperforms illustration

Every auth page with a real school campus photo outperformed illustration variants in trust testing. Parents and admins connected with recognizable environments. Authenticity beats polish in education.

⚖️

Legal pages deserve real design

Investing in the Cookies and Terms pages — with branded headers and proper typographic hierarchy — reduced the "this feels sketchy" perception that often accompanies poorly designed legal pages in SaaS.

See More Work

Like what
you see?

Explore more case studies and UI work on my portfolio — or get in touch to discuss your next project.