Skip to content
TwoFour_

~/work/student-portal-ux $ cat case-study.md

UX design and frontend prototype for a student-facing learning portal

Outcomes

  • ▸Unified student experience across all learning features
  • ▸Dual-mode design served both individual and enterprise users
  • ▸Interactive prototype enabled efficient developer handoff
  • ▸Consistent design system aligned with admin portal

$ cat overview.txt

Overview

A complete UX design and interactive frontend prototype for a student-facing portal, enabling learners to manage enrolments, complete assessments, track progress, and access certificates. Delivered as a handoff-ready prototype with two distinct experience modes.

$ cat challenge.txt

The problem

The existing student experience was fragmented: students had to navigate between multiple disconnected interfaces to view enrolments, complete assessments, and access certificates. The client needed a unified, mobile-friendly portal that could serve both standard learners and enterprise users with different feature sets, all built on a consistent design system.

$ cat solution.txt

The approach

We designed and prototyped a complete student portal with 13+ screens, supporting two experience modes: a standard mode for individual learners and an enterprise mode with additional features like skills management and credential passports.

The prototype was built as a fully interactive React application with realistic mock data, demonstrating the complete user journey from dashboard overview through to assessment completion and certificate viewing. The design system maintained consistency with the companion admin portal for a cohesive platform experience.

student-portal-ux/screen-01.tsx
student-portal-ux/screen-02.tsx

$ ls features/

What shipped

  • +Student dashboard with activity feed and upcoming deadlines
  • +Enrolment management with course and unit details
  • +Interactive assessment interface with results tracking
  • +Digital certificates and qualifications viewer
  • +Skills management and progression tracking (enterprise)
  • +Credential passport for comprehensive qualification overview
  • +Activity log with training history
  • +Notification centre and profile management
twofour.os · /new-project

Let's build something that ships.

Book a discovery call and we'll map your problem, scope a first sprint, and tell you honestly whether we're the right team.

▸ book_discovery_call