Home › Projects › FBSU: university learning platform

FBSU: university learning platform

A university's diplomas, online.

A university wanted to sell and teach its diplomas online and had nothing to start from: no platform, no design system, no visual identity. I designed it from the logo to the lesson view.

Client: Fahd bin Sultan University
Role: UI/UX and design system
Scope: Brand, design system, web platform
Status: Shipped

Over a hundred diplomas and nowhere online for them.

The university had over a hundred training programmes and sixteen coaches, but no platform to present them, sell them or teach them online.

Visitors, learners and coaches.

A first-time visitor deciding whether to trust the university, a learner following lessons, and a coach teaching. Each needed a different page from the same product.

I set up the foundations before the screens.

A Cairo type scale, a ten-colour palette on institutional navy, and 40+ components with every state defined. The public site and the learning area were assembled from those parts.

Diploma pages open with the coaches.

Each diploma page leads with the coaches who teach it, so a visitor sees who they'd learn from before the price. After enrolling, the lesson view goes quiet: it's for studying, not selling.

What I decided before the first page.

Each one made the next hundred pages quicker to build.

Components before pages

Type, colour and 40+ components came first, so every page was assembled from tested parts instead of drawn one by one.

A quiet lesson view

Once someone has enrolled, the lesson screen drops the sales tone: the session, its date, a calm description and one Join button.

Navy for the main action

A ten-colour palette on institutional navy, with one colour kept for the main action, so the university looks serious without looking dated.

What's on the platform now.

100+: Diplomas

Programmes learners can browse, compare and enrol in.

40+: Components

Reusable parts with every variant and state defined.

What I owned

Brand identity and logo lockup
Cairo-based design system: 40+ components
Public site: home, diplomas, coaches
Learning area: lessons and live sessions

It grows a diploma at a time.

Visitor, learner and coach each need something different. Shared tokens let one product serve all of them, and a new diploma is added without anyone restyling a page.