Skip to content

Smart School

ClientUltimate Solutions
Role / ServicesProduct Designer
Location & year2025
ScopeUX/UI, SaaS product design, onboarding, pricing
Tools Used
Figma
Visit live site

Smart School is a full product experience for an all-in-one school management system — not just a landing page, but a connected flow from marketing through pricing, onboarding, authentication, and a self-serve help center.

The challenge

The product — a school management system covering buildings, classrooms, registration, student data, health records, fees, attendance, homework, and multi-language support — needed more than a homepage. School administrators research, compare, sign up, onboard, and need help — all before they start managing a single student. Each of those moments had to feel simple despite the product's breadth.

Two tensions shaped the work. Decision-makers want proof before committing — real numbers, clear pricing, social proof — but they also need a fast path to "just let me try it." And once signed up, they need a help system that doesn't send them to a separate support portal.

The marketing page

The landing page leads with a hero — "Ultimate School Management System / Smart School To Be" — over a real-world school image, then immediately backs the claim with numbers: 140 schools, 42 cities, 2500 students, 148 teachers.

Below that, a feature grid covers the product's breadth — registration, student data, health, multi-language — with icons that make scanning fast. Customer testimonials from real administrators build trust, and the pricing section closes the scroll with a clear CTA.

Pricing

Pricing lives in a dedicated panel with two views:

  • "Perfect Plan for You" — a student-count slider that recommends the right tier based on school size, with monthly/annual toggle.
  • Packages — all four tiers side by side (Bronze $10, Silver $18, Gold, Platinum $32) with feature lists and trial CTAs.

The slider is the key design decision: instead of forcing administrators to read and compare four cards, the system picks for them based on the one number they know — how many students they have.

Onboarding

Signup is a guided, multi-step flow:

  • Create account — full name, school name, phone, language selection.
  • Create school — school name, owner, city, country — then straight into the dashboard.
  • Sign in — email/password with "remember me" and password recovery.

The split-screen layout keeps the brand visible (welcome panel with school imagery on the left) while the form stays focused on the right.

Help center

A sidebar-navigated support hub with four sections — FAQ, Community, Support Articles, and Tutorials — with a search bar across all content. The help center lives inside the product chrome, not a separate site, so context is never lost.

Information pages

Modal-based pages keep secondary content accessible without leaving the main experience:

  • Why Us — company story, mission, team, and milestones.
  • Accounts Management — detailed module descriptions for administrators.
  • Contact Us — form with success/error states.
  • Company Profile — downloadable PDF portfolio.
  • Return Policy and Terms & Conditions — legal content.

Try the prototype

Smart School — interactive prototype

Selected screens

Landing page, pricing, onboarding, and help center. Drag to scrub, click any screen to enlarge.

The result

A complete SaaS front-of-house — from first visit through pricing, signup, school creation, and self-serve support — that makes a complex school management system feel approachable enough to try in minutes.

Bronze to Platinum
4 tiers
Signup to school in 3 steps
Guided
Built into the product
Help center
Pick by student count
Slider pricing

Ready to talk?

Drop a line about the product, the problem, or the team. That's enough to get started.

Currently available for new projects