ODUS Plus
UI Redesign
KAU's student portal, redesigned for clarity and scale
The Problem
A university SaaS stuck in 2012
ODUS Plus is the academic portal used daily by every KAU student — for course registration, grade lookup, scheduling, and administrative requests. The existing interface was dense, inconsistent, and built without a design system: every page felt like a different application.
The goal was to redesign it as if it were a modern SaaS product — with a unified component library, proper information hierarchy, and first-class Arabic RTL support — while keeping the data model and feature scope identical to the live system.
Engineering
Key decisions
Component architecture over page templates
Rather than building per-page layouts, I extracted reusable primitives (cards, stat blocks, nav rails) that compose into any view. This meant less duplication and a consistent visual rhythm across 10+ screens.
Bidirectional layout from the start
RTL support was designed in from day one — not retrofitted. Every spacing decision, text-align, and flex direction was written as a CSS variable override under [dir="rtl"], which made switching languages seamless and prevented regression.
Design token system
Colors, radii, and type scale live as CSS custom properties scoped to a root class. Theming becomes a single attribute swap instead of a cascade of overrides — a pattern I carried into this portfolio site.
Screens
Selected views
Outcome
What shipped
Redesigned KAU's ODUS Plus student portal — a multi-role academic SaaS system — replacing the legacy UI with a component-driven React frontend. The core engineering challenge was implementing full bidirectional layout (Arabic RTL / English LTR) consistently across a dense, multi-page dashboard. Shipped as a live deployable prototype.