Student services
Consolidated into one dashboard instead of scattered access points.
0:00
Loading…
Case Studies
Majmaah University Student Portal
A unified Arabic student portal — consolidating academic services, schedule access, and university systems into a single daily dashboard.
01 — Context
What this project was about
Majmaah University students were managing their academic lives across several disconnected systems — a separate login for Blackboard, another for exam booking, another for the library — with no central place to see their schedule or access services quickly.
This portal was designed to change that. The goal was one authenticated dashboard where a student could check their timetable, reach any university system, review personal and academic information, and handle administrative tasks — without switching between multiple sites or re-entering credentials.
I was responsible for the UX design and front-end implementation. The visual direction was deliberately kept soft and approachable — a teal and warm-orange palette, rounded cards, generous spacing — to avoid the heavy institutional feeling that government-facing systems tend to carry. Students spend real daily time in this portal, and it needed to feel like a useful tool rather than a formal system.
What the portal covers
- Academic schedule — interactive, time-based, clickable
- Quick access to all university systems in one panel
- Exam booking and university applications
- Announcements, events, and news
- Personal and academic information via modal overlays
- Important contacts and a feedback form
- Single sign-on — one session for everything
02 — Challenge
What needed to change
The starting point was clear: students were doing too much work just to complete routine academic tasks. The friction wasn't in any single system — it was in the space between them.
Disconnected university systems
Blackboard, the library, exam booking, and transportation required separate logins and separate navigation. Every routine task started with a context switch.
No central place for the schedule
The timetable — the most-checked piece of information in a student's day — required several steps to reach and wasn't connected to any other service.
No mobile-friendly experience
Students are constantly on their phones, especially between classes. The existing systems weren't built for small screens or touch interaction.
No visual priority in information
Critical tasks and passive content appeared at the same visual weight. Exam deadlines looked identical to general university news.
03 — My Role
Design ownership from structure to implementation
I owned the UX design and front-end implementation, translating student and stakeholder needs into a clear structure and responsive, buildable interface components.
- Experience architecture and dashboard structure
- Academic service journey design
- Responsive, RTL-first interface design
- Collaboration with analysts, developers, and QA
- Front-end implementation in HTML, CSS, and JavaScript
04 — What I Found
Who I was designing for
Every decision in the portal traces back to a clear picture of who actually uses it and when. The profile below represents the typical daily pattern the design was built around.
👨🎓
فيصل — Faisal21 · Computer Science · 3rd year
Faisal uses his phone for almost everything. He checks his schedule first thing in the morning, usually before getting out of bed. Between classes he quickly looks up exam dates or checks his GPA. He doesn't browse — he arrives at the portal with a specific task and wants it done in under a minute.
What he needs
- ›See today's schedule without navigating into a sub-section
- ›Access Blackboard without a separate login
- ›Check his GPA and academic standing quickly
- ›Know his exam date without opening another system
- ›Submit an application without visiting the registrar
What slowed him down before
- ›Seven separate systems, all with different logins
- ›The schedule lived inside the academic system, several clicks in
- ›Important announcements looked the same as general news
- ›Nothing worked properly on his phone
- ›No single place to find contact numbers or submit feedback
05 — Key Decisions
How the portal was designed to work
Each decision below addresses a specific aspect of how students interact with academic services daily — from how the schedule is structured to how information surfaces without requiring navigation.
01
The schedule was built as a real time-based grid
Rather than displaying courses as a plain list, the schedule was implemented as a positioned time grid — courses appear as cards placed vertically according to their actual start and end times, across a five-day week view. Students can see duration, gaps between classes, and day structure at a glance. Color coding differentiates courses visually without requiring labels. The cards use soft rounded corners and consistent padding, keeping the grid readable without feeling like a spreadsheet.
02
Clicking a course opens a modal that animates from the event itself
When a student taps on a course card, the detail modal opens with a smooth animation that originates from the card position — on desktop, it scales from the event; on mobile, it slides up. This spatial relationship makes the interaction feel connected rather than disjointed. Course details — instructor, room, absences, and monthly grades — are all inside the modal. Pressing ESC or tapping the backdrop closes it and returns the student to exactly where they were in the schedule.
03
Personal and academic information surface from a profile card
A persistent student card in the sidebar holds two clearly labelled buttons — one for personal information, one for academic standing. Personal details (student ID, college, balance) and academic details (GPA, level, hall, warnings, advisor) each open as separate modals. Students who need their student ID for a form, or want to check their GPA quickly, get that in one tap from the same card they see every time they open the portal. No navigation to a profile page required.
04
All university systems were consolidated into one access panel
Seven university systems — Blackboard, the digital library, transportation, exam booking, the academic system, email, and committees — are presented as a visual grid of icon-and-label cards. Each card uses a subtle neumorphic shadow that depresses on hover, giving tactile feedback on both mouse and touch. Students see all available systems at the same level, scan to what they need, and tap once. The session is already authenticated — no separate login, no context switching to a different tab.
05
RTL was the primary layout direction, not an adaptation
The portal is built for Arabic-speaking students and Arabic is set as the foundational layout direction — direction:rtl at the body level, not applied section by section. The 29LT Bukra font handles Arabic script at all weights with proper readability at small sizes. Carousels are configured with rtl:true so slide order and swipe direction both behave correctly. Navigation, modal positioning, and reading flow all follow Arabic convention naturally rather than being mirrored from an LTR version.
06
Announcements, events, and news are surfaced on the dashboard
University announcements, upcoming events, and news are all visible from the main dashboard without requiring navigation to a dedicated section. Each is presented in a contained panel, visually separated from the schedule and systems areas by clear section spacing. The separation keeps the page organized even as content density increases — students can scan down the page and recognize which zone they are in without reading headers.
07
Contacts and feedback are accessible at the end of one scroll
Important university contact numbers are grouped in collapsible sections — students can expand the category they need (IT support, academic advising) without seeing every number at once. The feedback form sits directly below with a short, welcoming Arabic prompt. No navigation, no separate page — a student with a question or suggestion can submit it from the same session without breaking their workflow.
08
Mobile behavior was built in from the start
The schedule switches from a side-by-side day grid to a vertically stacked layout on small screens, keeping course information legible without horizontal scrolling. Scroll-triggered animations (AOS) are disabled below 800px to reduce frame cost on mobile devices. System cards and course cards are sized for touch — large enough to tap accurately without precision targeting. The layout uses a consistent grid that reflows cleanly at the main breakpoints rather than collapsing awkwardly.
06 — Design / Execution
What the portal includes
The portal covers the full range of daily student needs — academic, administrative, and informational — in a single authenticated session. Features are grouped by context on the dashboard, so students can reach what they need by scanning down the page rather than navigating through menus.
🗓️
Academic Schedule
Time-based grid, color-coded courses, clickable cards with modal detail
👤
Personal Information
Modal overlay — student ID, college, scholarship balance
🎓
Academic Information
Modal overlay — GPA, level, hall, warnings, academic advisor
📚
Blackboard
One tap from the systems panel — authenticated session
🏛️
Digital Library
Direct access to research databases and academic resources
🚌
University Transportation
Bus routes and schedule information
📝
Exam Booking
Reserve exam seats without leaving the portal
📋
University Applications
Submit administrative requests from the dashboard
📢
Announcements
University-wide notices surfaced on the main dashboard
🎉
Events & Activities
Upcoming campus events and academic calendar
☎️
Important Contacts
Collapsible groups — IT, advising, admin — always reachable
💬
Feedback
Simple form at the bottom — no navigation, no separate page
07 — Outcome / Impact
One entry point for daily academic life
One authenticated session
Access to university systems without repeated sign-ins.
Arabic-first delivery
Responsive layout, direction, and interaction built for daily Arabic use.
08 — Reflection
What this project demonstrates
This project demonstrates how I turn a complex service ecosystem into one coherent experience—connecting information architecture, RTL product design, and front-end implementation in the same delivery decision.