ODUS Plus Redesign
A component-driven redesign of KAU’s student portal with an Arabic-first RTL interface.
- Stack
- React / TypeScript / Tailwind CSS / RTL
- Links
- Live site ↗Source ↗
My contribution
- Personal scope
- I translated the redesign into a working React and TypeScript prototype.
- Deliverables
- Built shared navigation, dashboard, academic-record, and schedule components.
- Technical ownership
- Implemented RTL behavior at the layout level across the working frontend.
Turn the student portal into a coherent product system.
The redesign treats ODUS Plus as a product students use repeatedly, not a collection of disconnected forms. The interface is reorganized around clearer hierarchy, reusable patterns, and the tasks students return to most often.
Reusable components replace page-by-page styling.
React components and Tailwind establish repeatable interface rules for navigation, records, schedules, and student actions. The goal is consistency across the portal rather than polishing screens in isolation.
RTL is built into the layout instead of patched on later.
The implemented routes use RTL directly across navigation, page headers, records, and calendar views. That keeps spacing, alignment, and hierarchy intentional for the Arabic student experience.
The redesign is implemented as a working frontend, not only a visual concept.
The working frontend brings the homepage, academic records, and calendar views together through shared React and TypeScript components, with RTL layout rules tying the screens together.
The redesigned home screen pulls the portal's common student tasks into a clearer hierarchy.
The calendar uses the same component language while keeping dates and academic events easy to scan in RTL.
Academic records share the navigation, spacing, and RTL rules instead of behaving like a separate legacy page.