Chams Din
Graphic Design — Web & App Full Stack Development

Madrasati

Web & Apps — 2026

Concept
Skip the demo
Madrasati — Parent

Parent

The parent checks.

Open the demo
Madrasati — Teacher

Teacher

The teacher takes the register in ten seconds.

Open the demo
Madrasati — Administration

Administration

The office runs the school.

Open the demo

The Problem

Tunisian school apps exist — and that's the problem. Slow, cluttered, designed for the administration. A parent opens the app with a simple question, takes eight seconds to find the answer, and eventually stops opening it. The school goes back to paper.

The Approach

  1. Zero clicks

    Today's answer is on the home screen.

  2. No blunt bad news

    A problem always arrives with its solution, in the same card.

  3. The parent isn't a software user

    Big type, big targets, no nested menus.

  4. Colour doesn't decorate

    It only says what's fine and what needs action.

Three spaces, one system

Parent

No red, and no ranking in the grades: the parent sees how their child is doing, not where they stand against the class. The bus is a countdown, not a map — “Arrive dans 15 min” (Arrives in 15 min) answers the only question anyone asks at the bus stop.

Teacher

The register, inverted: everyone is present by default, and she only touches the exceptions. 24 children in under ten seconds — and on the parent’s phone, “Absent aujourd’hui” (Absent today) arrives with “Justifier l’absence” (Justify the absence) in the same card.

Administration

A task list, not a dashboard: each line says what is waiting and offers the action. Payment reminders without shame — sorted by date, and always offering an instalment plan.

The Result

Roll call of 24 pupils
~5 s
Every text colour above it
WCAG AA
On a mid-range Android (CPU ×4), no animation that moves the page
60 fps
Full French and Arabic, mirrored layout
FR · AR

Identity

Madrasati — the mark with مدرستي and MADRASATI on grenat, as on the sign-in screenMadrasati — the mark in grenat on creamMadrasati — the mark in grenat on powderMadrasati — app icon

Palette

Grenat

#6B2232

Poudre

#D99A86

Encre

#2A161A

Fond

#FBF8F6

Done state

#2E7D5B

To-do state

#C4603A

Typography

Madrasati — IBM Plex Sans and IBM Plex Sans Arabic, weights 400 and 500, with “Absent aujourd’hui” and “Justifier l’absence” in French and Arabic

In motion

Paying October: one tap, the receipt, and the line turns green.
The bus, live, stop by stop (sped up ×4).
Roll call: everyone is present, she taps the two absences, sent.
Homework set by the teacher lands on the parent's phone.
An urgent announcement from the office goes to the top of every phone.

Built with

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Motion

Concept — personal project, no real school