Level Up Edtech Platform Design for Contra University
Mohammad Rafat
CONTRA UNIVERSITY / LEVEL UP
Learn the skill. Earn the badge. Get the client.
Detailed Product Design Prototype Fast-Forward Walk Through
Detailed Product Design Concept & Case Study
Landing Hero
"This isn't just another course platform. It's the missing infrastructure between knowing what to learn and actually earning from it."
Context/Concept
I designed a product that solves a real problem on Contra, and built it to feel like Contra already made it.
It's called LevelUp. It helps freelancers earn Contra's Expert badges through a 42-day sprint that helps freelancers go from "I should learn this" to "I'm a verified Expert on Contra" with logical AI roadmap to learn and earn the expert badge, a real accountability partner, refined course modules and a public journal shared live with community that proves their consistency to clients.
Think! Duolingo's habit system × LinkedIn Learning's structure × Contra's community & marketplace credibility which built specifically for independent professionals who want to learn faster to get verified expert badge to charge more and get hired more.
Level Up from Contra University, is a free. And it makes Contra more money than a paid product would, because it makes every freelancer on Contra more hirable,
more confident, and more likely to earn higher rates/payments.
Let me walk you through how and why I built it.
PART 01 : THE PROBLEM STATEMENT
Gap in-between.
Most freelancers already know what to learn. They just never finish.
I spent time studying how freelancers actually behave on Contra. Three patterns kept showing up:
The Knowledge Gap : There are hundreds of Framer tutorials, Webflow courses, Figma YouTube videos which is similar case for other Contra Partner tools. But no one has reverse-engineered Contra's own Expert badge requirements into a day-by-day learning plan. Freelancers don't lack content. They lack a clear path through it which is the proper roadmap.
The Accountability Gap : Self-directed learning has a minimum completion rate. Most learners give up between day 8 and day 14, exactly when the initial excitement fades and the gap between where you are and where you want to be feels widest. Add a human partner during that window and 30-day completion rates go up roughly 3×.
The Proof Gap : A portfolio proves taste. It doesn't prove consistency, process, or professional-grade competency to a client who has four minutes to evaluate a profile. A verified badge on Contra is instant, trustworthy signal.
The result: Freelancers stay stuck at lower rates. Clients stay skeptical. Contra's community and marketplace stays smaller than it could be.
Reasoning
PART 02: THE INSIGHT
The bottleneck isn't skill. It's verifiable signal.
Research on the Contra marketplace revealed something clear: freelancers who hold verified Expert badges command 2–4× higher rates than peers with equivalent portfolios but no credential. Clients spend roughly four minutes evaluating a profile. Reading a portfolio takes time. Reading a badge takes a second.
If Contra could help freelancers earn that signal and if that signal lived permanently on their Contra profile everyone in the ecosystem would benefit.
That was the design brief.
The gap between knowing and doing
PART 03 : THE BUSINESS CASE
LevelUp is free. So where's the money?
This is the question I wanted to answer clearly, because the design decisions and the business strategy are inseparable.
Visual proof that LevelUp connects directly to Contra's ecosystem
Contra PRO/MAX Upgrades
Freelancers billing $50/hour have little reason to invest in Pro tools. Freelancers billing $150/hour after earning an Expert badge that increased their every reasons to upgrade PRO/MAX for entire year. The 3.4× average rate increase for badge earners creates direct upgrade intent.
Enterprise Trust
Large companies hesitate on Contra because they can't quickly evaluate freelancer quality. "Verified Expert" badges change that. They give enterprise buyers a shorthand they already understand. LevelUp creates the credentialing infrastructure Contra can market directly to B2B buyers which is a sales argument that currently doesn't exist on any similar platform.
Marketplace Speed
Trusted credentials mean faster hiring decisions, fewer failed projects, higher client retention. Each of these compounds transaction volume without requiring new client acquisition.
Competitive Moat
Framer University, Webflow University, Figma Courses etc every major partner tool company is building its own credentialing program right now. If those programs succeed, talent loyalty shifts toward tool companies, not toward Contra. Level Up puts Contra permanently at the center of every Expert badge journey.
The Learn → Earn → Active + Passive Model
Independents learns then earn twice: Active & Passive
This is where Level Up gets really interesting.
Active Earning = Client projects via Contra jobs (the core business)
Passive Earning = Sharing knowledge via LevelUp + Contra Digital Products (Marketplace)
After earning their Expert badge, freelancers can:
→ Create & sell micro-courses ($5–$79)
→ Share and sell templates, UI kits, tutorials
→ Offer 1:1 coaching sessions
→ License digital products through Contra
All inside the same platform. This creates a content flywheel.
Why this matters:
Gives experts a reason to stay and contribute (not just consume)
Creates a content flywheel: more experts → more resources → more learners → more experts
Opens new revenue streams for Contra (transaction fees on digital products, premium course hosting)
Turns every graduate into a potential mentor scaling supply organically
Three More Outcomes Worth Naming:
Learning behavior data: Completion rates, resource preferences, and skill gap patterns from LevelUp directly inform Contra's matching algorithm and product roadmap.
Lower talent acquisition cost: "Get certified on Contra" becomes an organic acquisition channel. High-intent freelancers come to Contra specifically to earn a credential that lives there.
Talent retention: Freelancers who leveled up on Contra stay on Contra. The badge is their credential. The community is their network. The marketplace is where they earn. There's no reason to leave. It feels home.
PART 04: THE SOLUTION
How LevelUp Actually Works?
PICK PATH → AI ROADMAP → DAILY MISSIONS → JOURNAL → BADGE → HIRED
↑ ↓
└─ PARTNER CHECK-INS ─┘
AI ROADMAP
The Four Mechanisms
AI Roadmap: You choose one Expert path and your current skill level. The system generates a personalized 42-day, 6-milestone plan. Not generic advice straight your specific path, for your specific badge, starting from where you actually are. This happens in under 10 seconds(WE CAN THINK INDY AI HERE).
Accountability Partner: You're matched with someone on the same path, at the same level, with a compatible schedule. You both check in daily. You can see if they've logged. They can see if you have. It's not surveillance as it's shared visibility, the kind that makes both people want to show up.
Build Public Journal: Every entry you post is public by default. Not a private diary but a proof-of-work artifact. 42 entries is 42 days of documented consistency. A client who discovers a freelancer's daily Framer journal has encountered something no portfolio can replicate.
Earn Expert Badge: After day 42, a verified badge goes live on your Contra profile. Clients see it. It doesn't just signal skill. It signals discipline, consistency, and follow-through the things that matter just as much as technical ability when a client is making a real hiring decision.
Quitting becomes structurally harder than continuing
The Resource Layer
Most learning platforms either give you one rigid curriculum or drop you into a sea of links. LevelUp uses curated choice:
Default resources: pre-selected by the Contra team, quality-reviewed, tied to specific milestones
Swap options: you can replace any resource with one you prefer
Expert picks: top mentors on each path recommend their favorites
Example: In Week 2 of the Framer Expert path, the default resources are curated Framer docs and two video tutorials. You can swap them out. Or you can pick up Sarah Chen's advanced scroll techniques course at $12.
Newcomers get a clear path. Advanced learners get flexibility. Everyone gets quality.
The Loop
PART 05: DESIGN STRATEGY
Why It Looks and Feels the Way It Does
OVERALL DESIGN APPROACH
Minimal-Editorial, not generic
Looks like a serious professional tool, not a toy app. ALL CAPS bold headlines, tight spacing, near-black backgrounds.
Earned, not given
Every visual decision reinforces that the badge means something. Yellow accent used only for actions/earned states, never for decoration.
Systems, over chaos
Structure is the product and 42-day is the sprint replaces anxiety with clarity. Daily missions, weekly milestones, visible progress bar
Community, as infrastructure
Social features aren't add-ons as they're core to making the system work. Partner matching, public journals, leaderboard = proof-of-work network
Dark-first, light-parity
Dark mode is the default (feels premium, like pro tools), but light mode is equally polished
PART 06: THE USER JOURNEY
What a Real User Actually Experiences
Phase 1: Discover
Five public pages, each handling a specific objection before the user even knows they have it.
Landing page: The first thing someone sees is the headline. "BECOME THE EXPERT YOU WERE HIRED TO BE." The word "EXPERT" is in a solid yellow fill block. Floating tool logos orbit the headline with Framer, Figma, Webflow, Rive, Bubble, Kittl, Notion, Spline. The social proof line below says "2,400+ freelancers enrolled." Two CTAs: start immediately, or learn how it works first.
BECOME THE EXPERT YOU WERE HIRED TO BE
Expert Paths: Eight specific paths, each with enrolled counts, skills covered, and a direct link to Contra's Expert program. This page answers: "Which badge should I go after?"
INDY AI - Expert Path
Courses: Filterable by path. Every course shows the instructor's Expert credentials. This page answers: "What will I actually learn?". Having said that, If the user can't find his path then it's quite easier to request an expert path.
From Expert Courses to Request a Path
Community: A live feed of real learners' daily journal entries. A streak leaderboard. A partner matching feature. This page answers: "Is this a real community or just marketing?"
Community | Find an Accountability Partner
For Mentors: Three featured mentors with actual revenue numbers ($12,400 / $9,800 / $16,200). This page answers: "Is the content made by real experts or generic instructors?"
For Mentors to Become a Mentor
Phase 2: Convert
The part I'm most proud of
The AI roadmap generation screen that takes a short step for the onboarding.
You've picked your path. You've told it your level and
how much time you have. Now it generates your roadmap.
And it take seconds to do it.
Four actions. Zero account creation for existing Contra users.
Pick your path (one click)
Select your level + study schedule (two clicks)
Watch the AI generate your roadmap (automated 4-second terminal sequence no action required)
Click "Enter Your Dashboard →"
Existing Contra users Onboarding
Non-Contra User/Independent Onboarding with Dashboard
That's it. The product proves its value before asking for any commitment.
Phase 3: Activate
The dashboard is where the 42-day experience lives. Every day:
Today's Missions - Usually three tasks: a lesson, a partner check-in, and a journal entry. Each shows its XP reward upfront. No surprises.
Progress bar - Day 12 of 42. 29%. Always visible.
Partner card - Ahmed K., Day 11, streak 🔥, "Checked in ✓ today."
Roadmap - Week 2 in progress. Weeks 3–6 locked and visible.
XP counter in topbar - ⭐ 2,840 XP. A number that grows every day you show up.
THE DASHBOARD WALK-THROUGH - Desktop
"Build in Public" is unmatched compared to generic portfolio's
Phase 4: Earn
After day 42, the badge goes live on your Contra profile. That unlocks the Share & Earn layer: micro-courses, templates, coaching, digital products. The graduates who started as learners become the mentors for the next cohort.
(Expected User Flow)
PART 07: KEY UX PATTERNS
The Decisions That Made the Product Work
Pattern 1 - The AI Terminal Moment
The onboarding's Step 3A is a 4-second animated terminal sequence:
The 4 seconds are not a technical constraint. They're a psychological design decision. Users who watch the terminal process arrive at the roadmap primed to value it. Instant results feel automated. Earned results feel real. The terminal aesthetic also speaks the language of the target user, Framer developers and Figma designers spend their days in technical creative tools. A terminal is a language they recognize.
Pattern 2 - Progressive Disclosure in Onboarding
Progressive disclosure at two levels:
Macro: One decision at a time. Path selection is completely separate from level/schedule input. The roadmap reveal is its own dedicated moment.
Micro: Every CTA communicates exactly what's required before it activates. The Continue button is grey until conditions are met. Users always know why a button is inactive, and what to do about it.
Pattern 3 - The Gated Partner Match
Partner matching requires Contra Independent identity verification. The gate is:
Transparent - explains clearly why verification is required
Low friction - one toggle confirms status
Non-blocking - unverified users get a direct link to create a Contra profile
Three business outcomes from one design decision: quality filter, trust signal, and Contra acquisition touchpoint.
Pattern 4 - XP Without Dark Patterns
The XP system shows reward values before you earn them. Rewards are immediate but not excessive. The total connects to a visible running counter in the topbar. No variable reward schedules. No streak anxiety mechanics. The system respects the user's intelligence while still creating meaningful forward momentum.
Pattern 5 - The Proof-of-Work Journal
Journal entries are public by default, timestamped with a day counter, and reaction-capable from the community feed. This transforms private learning into public evidence of professional consistency, proof that portfolios can't replicate because portfolios show what you made, not how you work.
Pattern 6 - The Flex-Wrapper Modal Pattern
All four modals in the product (Request Path, Find Partner, Custom Path, Apply Mentor) use the same centering architecture.
This solves a real conflict between CSS transform-based centering and Motion's animation transforms. One pattern, four modals, zero centering bugs.
PART 08: DESIGN SYSTEM
Color System
Color System - Created with Google Stitch Ai
The Yellow Rule: appears maximum once per visible actions following sections. It means: active, earned, take action. Consistent meaning requires consistent restraint.
Typography
One font. Inter. All weights, from 400 to 900. No second font. No display face exceptions. Maximum expression through weight and scale alone.
PART 09: INFORMATION ARCHITECTURE
Nine Routes. One Conversion Goal.
INFORMATION ARCHITECTURE - Built with Google Flow
Flat routing over nested SPA - All 9 routes are flat. The Dashboard manages its 6 internal views via user state without URL changes. Clean URL sharing, fluid in-app navigation.
Onboarding as conversion flow, not post-signup screen - Every CTA on every public page routes to /onboarding. There's no account creation step in the critical path. The product proves its value before asking for any commitment.
PART 10: RESPONSIVE SYSTEM
Works Everywhere
User friendly approach for the independent learners.
Overall Responsive Design
PART 11: THE PROCESS (Execution Workflow)
How This Got Built (A process that Contra Labs Requires)
The AI tools generated raw material. Human judgment taste evaluated every output, identified every violation, and provided specific corrective direction before anything went into the product.
THE PROCESS
The ability to evaluate AI-generated design output against professional standards and articulate exactly what's wrong and why, that's not a secondary skill in 2026. It's the primary one.
STRATEGY: Problem framing, product architecture, business case, screen inventory.
SYSTEM : Design tokens, component standards, motion principles, brand rules
GENERATION: Google Stitch - detailed screen-by-screen prompts generating initial UI outputs.
AUDIT: Banani AI - alternative visual pass, brand alignment comparison.
DIRECTION: Every generated screen evaluated: violations? card radius wrong? yellow used twice? Regenerate with specific fixes.
FIGMA Design: Fixing and polishing, refinement for final prototype.
BUILD: Figma Make → Live Polished Prototype, Full routing, theme system, animations, mobile responsiveness, and 31 versions and exported entire Site Map, information architecture and user flow to figure out how things worked for the final product design prototype.
PART 12: METRICS & OUTCOMES
What Conceptual Success Looks Like
Design KPIs:
Onboarding completion: >80% - 4 actions to dashboard, zero friction
Daily dashboard return: streak + partner + missions create daily pull
~30% partner matching requests: community page placement + 3× proof visible upfront
5 of 7 journal entries/week: XP incentive + AI daily prompt removes the blank page problem
>40% theme toggle engagement: toggle accessible in every navigation context
Business KPIs
>20% badge conversion: 42-day structure + partner accountability vs. solo 5% industry average.
20% PRO upgrade rate: among badge earners - higher rates create platform investment intent.
+15% enterprise client acquisition: "Verified Expert" credential messaging builds B2B confidence.
+12% marketplace transaction volume: trusted badges accelerate hiring decisions.
+30% 12-month talent retention: experts built on Contra stay on Contra
>5% mentor application rate: revenue proof on /for-mentors ($12,400–$16,200 shown explicitly).
Growing digital product GMV: micro-courses, templates, coaching unlock passive income layer.
PART 13: WHAT'S NEXT (V2)
Real authentication: Supabase (mentioned it following technical perspective), user persistence, real partner matching.
Live AI roadmap: AI API, genuinely personalized plans.
Accessibility hardening: WCAG AA, full keyboard nav, screen readers.
Resource curation dashboard: Internal tool for Contra team.
Share & Earn creator tools: Upload courses, set prices, track sales.
PART 14: WHY CONTRA
I could have designed this for anywhere.
Generic EdTech. Productivity tools. Fitness apps. The portfolio options are endless.
I chose Contra because the problem is real, the opportunity is clear, and the fit is undeniable.
The Problem Is Real
Freelancers on Contra earn 2–4× more with Expert badges but there's no structured path to earn them. That gap costs independents 18 months of lost positioning. LevelUp closes it.
The Opportunity Is Clear
Framer, Webflow, Figma etc. every major tool is building its own credentialing program. If Contra doesn't own this layer, talent loyalty shifts away from the marketplace. LevelUp keeps it where it belongs.
The Fit Is Natural
LevelUp doesn't feel like an add-on. It feels like infrastructure Contra should have built already. That's the highest compliment a product proposal can earn.
The Timing Matters
The independent work economy needs verifiable signal. Contra has the marketplace. LevelUp provides the credentialing engine. Together, they become unbeatable.
What This Project Demonstrates
Evaluating AI Output
Every screen was generated by AI (Stitch, Banani) then evaluated against strict design system criteria:
Gradient in the wrong place? Rejected.
Card corners too rounded? Corrected to 0px.
Yellow used twice in one section? Adjusted.
Missing notification icon or settings panel? Added.
This is the cognitive process the role requires. I've done it 31 times over.
Structured Design Feedback
Not "make this pop." Not "I don't like it."
Specific. Actionable. Professional.
Defining Taste Standards
The Yellow Rule (max once per section)
0px card radius on public pages
Inter-only typography
No decorative gradients
These aren't preferences. They're enforced standards documented, applied, and held across 9 pages and 31 versions. Defining them is one skill. Holding the line is another.
Working Fast in AI-Augmented Workflows
Concept → Production-ready prototype in one sustained sprint.
Pipeline: Claude → Stitch → Banani → Figma → Figma Make
Not theoretical. Actually used.
Every version improved because I got better at directing the tools not because the tools got smarter.
Few Resources:
Please check the links for:
🔗 Full site map structure and user flow: VIEW NOTION LINK
🔗 Live Prototype : https://contra-university-levelup.figma.site
Full Figma Designs for Desktop and Mobile breakpoints with Dark & Light Mode
Last thing to share.
I wrote this case study to feel like it already belongs to Contra.
Final thought: If you're a freelancer who's ever thought "I should get better at something" but never quite got there then this is built for you. If you're a client who's ever wondered "Is this person actually good?" then this qualified badge is your answer. one verified expert at a time.
If you're in Contra then this is how you make your entire platform, community, marketplace, and Contra Payments more stronger then ever.
Having said that, I strongly believe, if this ideation can be implemented then there is no other platform till the date, which can be compared with Contra to standout around the global economy.
Learn the skill. Earn the badge. Get the client.
A Conceptual Product Design By - Mohammad Rafat | Product Designer
Like this project
Posted Apr 10, 2026
Designed Contra University / Level Up: Free 42-day AI-powered guided learning roadmap to earn verified Expert badges, higher rates & passive income on Contra
Likes
0
Views
12
Timeline
Apr 3, 2026 - Apr 10, 2026
Clients
Contra
