Landing Page · 2026 · 5 min read
A bilingual landing page for Masari — introducing the platform clearly and turning visitors into sign-ups.
From intuition to data-driven engagement
The Deanship of Student Affairs at a leading university planned courses, workshops, and events based on assumptions. The result: low attendance and budgets spent on the wrong activities. Students, on their side, saw campus life as scattered — no clear progression, no real reward.
The university's gap
The students' gap
So the page had two jobs
“How might we design a teaser page that captures student interest in a new gamified campus platform — while gathering actionable data for university decision-makers to prioritize future investments?
What the administration needs
What students want
01
Students pick 1–3 tracks that match their passion — Tech, Leadership, Entrepreneurship, Creative, and more. Sign-up is gated by university email, so every data point is clean and authentic.
02
Attendance converts into XP across five tiers, from Bronze to Diamond. Points unlock a dual reward loop: partner discounts on one side, sponsored certifications and advanced workshops on the other.
03
A preview of the platform to come: 1-click event booking, limited-seat indicators, and automatic attendance logging — everything in one calendar instead of scattered announcements.
A clean hero with one clear promise, visual track cards, a tier ladder that explains itself, and a light sign-up overlay. Type and layout are tuned for Arabic first, with vibrant accents on a calm canvas to speak to a young campus audience.
The palette
Tier colors
Typography
مساري Aa
ToshA carries the Arabic display voice; Alexandria handles body text in both directions — high contrast, generous line height, RTL-first.
The visual language
Path, XP, tiers, rewards, and analytics — one icon family, with the Masari mark itself used as a moving background pattern across the colored sections.
Buttons · fields · selectable cards
Navbar · toggles · badges · progress · list row
From Figma to a live page — fast
The visual system was structured in Figma, then built and iterated with Claude Design — cutting the cycle from static mockup to working page down to days.
Not a prototype: the toggles, track selection, and micro-interactions you see in the walkthrough above are the real, functional page.
Stakeholders received a live link for real-time preview, user testing, and data-collection trials — no install, no build step.
More projects
