Product Design
Web
Design System

Designing the Open Campus Ecosystem

Open Campus grew from one education product into an ecosystem reaching 60 million learners. As its sole lead designer, Raymond designed almost everything it shipped on the web, from the brand system and EDU Chain to Open Campus ID and the AI-first relaunch.

Client: Animoca Brands / Open Campus
Year: 2023–2026
Led by: Ray
Status: Shipped

Designing the Open Campus Ecosystem for Animoca Brands / Open Campus

The problem

Open Campus moved fast. In a few years it went from a single idea, putting education on-chain, to a family of products: a blockchain for education, a portable learner identity, an accelerator, a rewards programme and a public website, each launched against a different deadline. Without one design language, it risked looking like several companies instead of one, to learners, partners and investors alike.

What we did

Raymond was the sole and lead designer on the Open Campus team, responsible for almost every web and product design it shipped:

Open Campus ID, the identity layer that ties the products together, from sign-up to the learner profile.
EDU Chain, its dApp ecosystem and the $1,000,000 hackathon series.
The OC-X accelerator, the rewards programme and the partner pages.
A shared design system, so every product looked and worked like the same company.
The website, twice: first as the home of the on-chain education network, then relaunched as an AI-first platform for lifelong learning.

Open Campus designs side by side: the on-chain education network website, the EDU Chain and dApp ecosystem pages, and the Open Campus ID, rewards and OC-X accelerator pages — One visual language across the website, EDU Chain, Open Campus ID and the OC-X accelerator.

One design system for everything

As the product family grew, the design system did the heavy lifting. Typography, colour, grids for the website, dashboards and sign-in, buttons, form fields and states were all defined once in Figma and shared by every team. New pages could be designed and built in days rather than weeks, and every launch still looked like Open Campus.

The Open Campus style guide in Figma: website grid, typography, colour, corner radius, spacing, buttons, form fields, pagination, checkboxes and loading states — The style guide: grids, type, colour, spacing and every core component, with its states.

An AI-first relaunch

As Open Campus moved into AI, the website was redesigned around people instead of protocols. Real photography from workshops and hackathons, a friendlier mascot, OC Minds (the personal AI partners) and clear paths for learners, builders and partners, designed for mobile and desktop together.

The relaunched opencampus.xyz homepage on desktop and mobile: Learn AI by building real things, with people who push you forward — The relaunched opencampus.xyz, on desktop and mobile.

The outcome

Open Campus grew into an education network spanning learners, schools, companies and governments, and now carries it into AI. The products Raymond designed are the front door to all of it.

60Mlearners reached across the Open Campus ecosystem

80+schools, platforms and organisations working with Open Campus

300K+Open Campus IDs claimed by learners

50M+student records across three states in India, with the Madhya Pradesh government

10Maddressable learners through partners in Vietnam

$1Mhackathon series run on EDU Chain

The impact section of the Open Campus website: 60 million learners reached, 80+ ecosystem companies and 300K+ OCIDs claimed — Figures as published on opencampus.xyz. They reflect the work of the whole Open Campus team and its partners.

Why it matters

Growing products sprawl. A single designer with a clear system kept a fast-moving, many-product company feeling like one place, and that consistency is what lets every launch build on the last instead of starting over.