March 2025
TECHNOLOGY:
REACT / NEXT.JS / Typescript
XJournal
SECTOR:
EDUCATION / EDTECH
PRODUCT DESIGN
DESIGN SYSTEM
RWD
Live product
What is the product?
XJournal brings schedules, grades, attendance, and school administration into one web product for four roles. The headmaster oversees school-wide administration and dashboards, teachers manage information within their own subject, and students and parents review academic information.
My contribution
I designed workflows for all four roles, created the visual language and design system, and prepared developer documentation. The challenge was determining what each role needed to see and do, how their actions affected others, and how the interface should handle edge cases. I built the interface around shared components, adapting them when different responsibilities required different controls.
Feature comparison by role
FUNCTION
HEADMASTER
TEACHER
STUDENT
Publish announcement
Available
Available
Cannot publish
Create test/quiz
Any subject
Assigned subject
Cannot create
Record/edit attendance
All subjects
Assigned subject
Personal review only
Select class
Available
Available
Not available
Add timetable lesson
Available
Not available
Not available
Add/edit grades
Available
Available
Personal review only
Create users
Available
Not available
Not available
Assign class/teacher subject
Available
Not available
Not available
Planning assessments, organizing lessons, and managing staff.
These walkthroughs show how teachers add tests and quizzes, and how the headmaster plans lessons and manages staff. I kept the interface consistent across these tasks, while giving each role the controls it needs.
Calendar / Teacher
I kept the calendar focused on Monday to Friday, with today highlighted. Teachers can switch between classes and months, check a day’s events, or scan the monthly list before adding a test or quiz. Each day allows up to three events. When that limit is reached, the interface explains why the teacher can't add another assessment, so they know to choose a different date.
lesson plan / headmaster
I designed the timetable around a recurring school week. After selecting a class, the headmaster can add a lesson to an empty slot or open an existing lesson to remove it. The day and time stay visible in the form, and the updated timetable and confirmation message show the result.
In XJournal, each subject is assigned to one teacher. Teachers can edit lessons only for their assigned subject, while the headmaster manages the timetable across classes.
ADMIN / HEADMASTER
The headmaster can add or remove users, set passwords and assign teachers to subjects. The form adapts to teacher or student/parent setup, showing the fields relevant to the selected user type.
Search and sorting help locate records without scanning the entire list. The walkthrough shows the headmaster adding a teacher, assigning their subject and then finding the new record by name.
Same information, different responsibilities.
A student comes here to check their own grades and attendance. A teacher needs to keep a whole class's records up to date. The challenge was deciding what each group needed in front of them, rather than showing everyone the same screen with a few buttons removed.
Grades and attendance are compared using original XJournal Figma product screens. In each comparison, Student is on the left and Teacher is on the right. Drag the divider or use Left and Right arrow keys to reveal how the same information changes with each role.
Student / Review
Personal results
Without editing controls, there was more room to show the student’s grades across subjects. I used that space for a fuller overview, clearly marking the school year and semester so students know which results they’re looking at.
Teacher / Manage
Class results
Teachers have more to keep track of: the class, the subject, and the period they’re working in. The view is deliberately denser, with separate date and year selectors and a pill-shaped subject menu.
Student / Review
Personal attendance
Students see their week day by day, with attendance grouped by subject under each date. Rather than navigating a class register, they can follow their own record through the selected week.
Teacher / Manage
Class attendance
Teachers work through the class register, marking attendance and correcting individual entries. I made their assigned subject stand out so they can pick out the relevant column while keeping the selected day and week in view.
both user groups
When a week crosses into another month
The less obvious challenge was handling the dates. Months have different numbers of school days, and a week can start in one month and end in the next. I worked through those cases for both views, keeping the week selector, day labels and dates consistent.
From small parts to complete interfaces.
Rather than designing each screen separately, I built the interface from smaller, reusable parts. Icons and labels combine into controls, which form larger sections—like the assessment form—and those sections come together to form complete pages. Shared variables define their colors and spacing in one place, so I didn’t have to set those details again on every screen.
FOUNDATIONS
The rules beneath the interface.
The colour, typography and layout foundations gave the product a shared visual structure before individual components were introduced. These examples show how the system handles hierarchy, spacing and responsive layouts.
COMPONENTS
Reusable controls for recurring tasks.
The same actions and inputs appear throughout XJournal, but their states change depending on what the user can do. I created reusable controls for navigation, selection, forms and feedback rather than redesigning them separately for each screen.
BUILDING BLOCKS
Components assembled into product patterns.
Individual controls become useful when they work together. These patterns combine the system into larger structures for schedules, administration and school communication.
School information, adapted for smaller screens.
The mobile layouts bring announcements, calendars, schedules and grades into a compact interface. These four views show how shared navigation and controls support different school roles on a smaller screen.
Home/Headmaster
Calendar / Headmaster
Schedule / Teacher
Grades / Teacher
let's talk
Have a project in mind?
React Developer at Rimthan