Case Studies

Case Study

Prep Excellence: UI/UX for a Structured Learning Platform

September 9, 2026

Prep Excellence: UI/UX for a Structured Learning Platform

The Client

Prep Excellence is an education platform built around a specific belief: that academic results improve when learning is personalised and structured, and that the habits underneath the results matter as much as the results themselves.

Their remit runs wider than exam coaching. Alongside exam and admissions preparation, the programme develops time management, confidence, discipline and goal-setting — the skills that determine whether a student keeps going in week nine, long after initial motivation has worn off.

That combination made the design brief unusually demanding, because a platform teaching discipline has to demonstrate it.

The Challenge

Prep Excellence needed to deliver personalised, structured learning that helps students achieve academic excellence, and to support skills development across time management, confidence, discipline and goal-setting alongside exam and admissions preparation.

Two words in that brief pull against each other, and reconciling them is the whole design problem.

Personalised means every student's path is different — different starting point, different targets, different pace. Structured means there is a clear shape to follow, a sense of sequence and progress. Lean too far toward personalisation and a student opens the platform to an open field with no obvious next step, which is precisely the condition in which motivation fails. Lean too far toward structure and you have a fixed syllabus with a personalised label attached, which serves the student who happens to fit it and nobody else.

The skills side raises the stakes further. A student learning time management and discipline is being asked to do something difficult. If the platform itself is confusing to navigate, every ounce of discipline they have gets spent on operating the software rather than on studying — and the platform quietly undermines the thing it exists to teach.

Confidence is the same argument in a different register. Confidence is built by visible progress. A student who cannot see how far they have come has no evidence to be confident with.

The Design

TRODAD produced the full UI/UX design in Figma, with the design file published in TRODAD's portfolio.

Designing the interface in full before building it is the right sequence for a product of this kind, and it is worth being explicit about why. An education platform is not a set of pages; it is a set of journeys — a student arriving for a scheduled class, a student sitting an assessment, a student checking progress before deciding what to do next. Those journeys have to be worked out and tested as complete flows. Discovering in development that the route from an assessment result to the next recommended action does not quite make sense is an expensive way to find out.

Working in Figma also makes the design reviewable by the people who understand the pedagogy. Educators can walk through a flow and say where a student would hesitate — a judgement they can make confidently about a screen and much less confidently about a description of one.

The design covers a platform providing online classes, resources, assessments and progress tracking, together with personalised study plans. Progress tracking and personalised study plans are the two elements that resolve the central tension in the brief: the study plan supplies the structure, personalised to the individual, and progress tracking makes the movement along it visible. Between them, the student always has a next step and always has evidence of the last one.

The Build

The platform was built with TanStack Start on React, with Node.js and Express on the server and Prisma for the data layer.

The requirements drove the stack. A student on this platform is doing genuinely interactive work — sitting assessments, moving through class material, watching progress update — so responsiveness in the interface is not decoration. React with TanStack Start provides application structure with proper routing and data handling, rather than a collection of pages that happen to be linked.

Node.js and Express handle the application logic: what a given student should see next, how an assessment is scored, how a personalised study plan adapts.

Prisma matters more here than it might elsewhere, because personalisation is fundamentally a data-modelling problem. Every student has their own plan, their own assessment history, their own progress record, and the relationships between those are what make personalisation possible at all. A schema defined explicitly, with type safety across the application boundary, is what keeps that model coherent as the platform grows — and keeps student records correct, which in an education product is not a technical nicety but a matter of trust.

The Results

Prep Excellence reports higher academic performance and improved exam results for students, along with improved consistency, discipline and study habits.

The second of those is the one worth pausing on. Improved exam results are the outcome the platform was hired to produce. Improved consistency, discipline and study habits are the mechanism that produced them — and they are the ones that persist after the exam.

They also validate the design decisions. Consistency is what happens when a student always knows what to do next, which is what a personalised study plan is for. Discipline is easier to sustain when effort is visible, which is what progress tracking provides. Neither is a feature a student would ever ask for by name; both were designed in deliberately, in response to a brief that asked for skills development rather than just content delivery.

The transferable lesson: in any product where the user has to keep coming back under their own motivation, the interface is not a wrapper around the value. It is a substantial part of it.

Working with TRODAD

TRODAD designs and builds custom platforms for education and other sectors where the interface carries real weight. Clients order services online, track progress in a client portal, chat directly with the team, and receive full access to design and source files on approval.

See more of our work at trodad.com/case-study, or read about UI/UX design and web app design.

Book a free consultation — let's talk about your project. trodad.com/appointment

Want results like these?

Tell us what you're building. We'll show you how we'd approach it.

Book a free consultation
Share