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 gap inside Contra and built it to feel like Contra already made it.
It is called LevelUp. It helps freelancers earn Contra's Expert badges through a structured 42-day sprint with an AI roadmap, a real accountability partner, daily missions, and a public journal that proves their consistency to clients. It is free. And it makes Contra more valuable than a paid product would because it makes every freelancer on Contra more hirable, more confident, and more likely to earn higher rates.
Why?
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 videos. But no one has reverse-engineered Contra's Expert badge requirements into a day-by-day plan. Freelancers don't lack content. They lack a clear path.
The Accountability Gap
Self-directed learning has a a minimum completion rate. Most learners quit between day 8 and 14, when excitement fades and the skill gap feels widest. Add a human partner during that window and completion rates jump 3x.
The Proof Gap
A portfolio shows taste. It does not prove consistency, process, or professional competency to a client who has 4 minutes to evaluate a profile. A verified badge is instant, trustworthy signal.
The gap between knowing and doing
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 Solution - Insights & How It Works
The Core Insight
Research on Contra shows freelancers with verified Expert badges charge 2 to 4 times higher rates. Clients spend roughly four minutes evaluating a profile. A badge is instant trust. The bottleneck is not skill. It is verifiable signal.
How It Works | The Core Loop
Quitting becomes structurally harder than continuing
Pick Path → AI Roadmap → Daily Missions → Journal Proof → Earn Badge → Get Hired (with Partner Check-ins running throughout).
The Loop
The Four Mechanisms That Make It Stick
This creates a content flywheel that makes the whole platform stronger.
AI ROADMAP
AI Roadmap (WE CAN THINK INDY AI HERE)
You pick one Expert path and your current level. The system generates a personalized 42-day, 6-milestone plan in under 10 seconds (Prototype example: within 4 seconds). Not generic advice. Your specific path, for your badge, starting from where you actually are.
Accountability Partner
You are matched with someone on the same path, same level, compatible schedule. You both check in daily. You see their progress. They see yours. It is not surveillance. It is shared visibility that makes both people want to show up.
Public Journal
Every entry you post is public by default. Not a private diary. A proof-of-work artifact. 42 entries equals 42 days of documented consistency.
A client who discovers your daily Framer journal has encountered proof no portfolio can replicate.
Expert Badge
At day 42, a verified badge goes live on your Contra profile. Clients see it. It signals not just skill but discipline, consistency, and follow-through. The things that matter just as much as technical ability when a client makes a real hiring decision.
Part 03: The Onboarding Moment: Where Value Is Proven Before Commitment
Four actions. Zero account creation in the critical path. Pick path, share level and schedule, watch the 4-second AI terminal animation generate the roadmap, then Sign In/Signup to Enter Dashboard (Straight into Dashboard on prototype for DEMO purposes). The product proves value before asking for commitment.
User Onboarding
That is it. The product proves its value before asking for any commitment.
The Resource Layer
Default resources are pre-selected and quality-reviewed by the Contra University team. Users can swap any resource. Top mentors also recommend their favorites. Newcomers get clarity. Advanced learners get flexibility.
The Thinking Behind The Design
Every visual decision reinforces that the badge has weight. The yellow accent appears exactly once per section. It signals active, earned, or action required. When yellow means something consistent, it actually means something.
The ALL CAPS bold headlines, tight spacing, near-black backgrounds communicate this is not a toy EdTech app. This is serious professional infrastructure.
Dark mode is the default because it feels premium, like pro tools and for eye-rest. Light mode is equally polished. Both are built from the same token system. Zero drift between them.
Part 04: The Business Outcome
LevelUp is free. So where is the money?
This question matters because design decisions and business strategy are inseparable.
Freelancers with badges upgrade to PRO and MAX more often because they earn higher rates.
Clients trust badges and hire faster, spending more. Experts stay on Contra longer because it becomes their professional home. Contra gains a clear competitive moat because no other platform offers this structured credentialing.
Visual proof that LevelUp connects directly to Contra's ecosystem
The Learn to Earn Model
Active earning comes from higher-rate client projects on Contra.
Passive earning comes from selling micro-courses, templates, tutorials, and digital products inside LevelUp and Contra Payments.
This creates a content flywheel that makes the whole platform stronger.
Learn → Earn → Active + Passive (Dual Revenue Model)
Independents learns then earn twice: Active & Passive
Fact spots:
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 Academy, Webflow Courses, 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.
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 ($$–$$$)
→ 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 05: The System
Information Architecture
Nine Routes. One Conversion Goal.
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.
INFORMATION ARCHITECTURE - Visual Built with Google Flow
User Journey + Flow
Phase 1: Discover
A freelancer arrives at the landing page. They see the headline BECOME THE EXPERT YOU WERE HIRED TO BE. They see floating tool logos. They read the before and after comparison. They scroll to the four-step system. It makes sense. They hit Choose Your Expert Path.
BECOME THE EXPERT YOU WERE HIRED TO BE
Mobile View Dark/Light | Dual CTA
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
Phase 2: Convert
They pick Framer. They say they are a beginner with 5 to 8 hours a week. The AI runs its terminal sequence. Their six-week roadmap appears, specific and structured. They hit Enter Your Dashboard.
Existing Contra users Onboarding
Non-Contra User/Independent Onboarding with Dashboard
Community | Find an Accountability Partner
From Expert Courses to Request a Path
Phase 3: Activate
Now they are in. The sidebar shows them where to go. Today's missions appear. They complete the first lesson. They tick the mission off. Plus 200 XP appears. Their streak starts at one. Tomorrow it will be two.
THE DASHBOARD WALK-THROUGH - Desktop
"Build in Public" is unmatched compared to generic portfolio's with community.
Phase 4: Earn
At day 42, they have a Contra Expert badge. Every client who finds them on Contra sees it. That unlocks the Share and Earn layer: micro-courses, templates, coaching, digital products. The graduates who started as learners become the mentors for the next cohort.(Expected User Flow)
For Mentors to Become a Mentor
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 top bar. 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 06: 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 07: 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 08: RESPONSIVE SYSTEM
Works Everywhere
User friendly approach for the independent learners.
Overall Responsive Design
Desktop uses fixed sidebar and topbar.
Mobile replaces sidebar with 5-tab bottom navigation.
All headlines use fluid scaling so no breakpoint-specific overrides are needed.
PART 09: THE PROCESS (Execution Workflow)
How This Got Built
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 10: METRICS & OUTCOMES
What Conceptual Success Looks Like
What Success Looks Like
Design KPIs
Onboarding completion: over 80% with 4 actions to dashboard and zero friction
Dashboard daily return: daily habit driven by streak, partner, and missions
Partner matching requests: around 30% of logged-in users with community page placement and clear value prop
Journal entries per week: 5 of 7 days with XP incentive and AI daily prompts
Theme toggle engagement: over 40% with prominent placement in all navigation contexts
Every percentage is behavioral math, not hope: solo completion × 3x partner accountability = increase badge conversion; 4 frictionless clicks to value = increases onboarding completion; daily missions + visible streaks = habitual daily return.
Business KPIs
Free to badge conversion: over 20% with 42-day structure and partner accountability
PRO/MAX upgrade rate: 20% of badge earners with higher earnings driving platform investment
Enterprise client acquisition lift: plus 15% with verified Expert messaging building B2B trust
Marketplace transaction volume: plus 12 % with trusted badges accelerating hiring decisions
12-month talent retention: plus 30% with experts who leveled up on Contra staying on Contra
Digital product GMV: 250K plus with micro-courses, templates, and coaching unlocking passive income
Mentor application rate: over 5 percent of certified experts with clear revenue proof on the For Mentors page
Every projection is compound logic: a verified badge that lifts rates more for PRO/MAX upgrade intent; trusted credentials that cut hiring time which multiply transaction volume; and every expert who stays becomes a mentor who attracts three more learners.
PART 11: WHAT'S NEXT
What could be the expected Version 2.0:
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 12: 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
What This Project Demonstrates
Evaluating AI Output
Every screen was AI-generated, then rigorously evaluated against strict design standards. Gradients in the wrong place were rejected. Inconsistent spacing was corrected. Missing states were added. This is the cognitive process modern design requires. Done repeatedly, with precision.
Structured Design Feedback
Not "make it pop." Not "I don't like it." Specific. Actionable. Professional. Example: "Violates brand system — replace with approved color token." That is the precision AI-augmented design demands.
Defining Taste Standards
The Yellow Rule. Zero-radius cards. Single-font typography. No decorative gradients. These are not preferences. They are enforced standards, documented and held across the entire product. Defining them is one skill. Holding the line is another.
Working Fast with AI-Augmented Workflows
Concept to production prototype in one sprint. Pipeline: strategy to generation to refinement to build. Not theoretical. Actually used. Every iteration improved because I got better at directing the tools, not because the tools got smarter.
Concept → Production-ready prototype in one sustained sprint.
Pipeline: Claude → Stitch → Banani → Figma → Figma Make
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.
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
3
Views
61
Timeline
Apr 3, 2026 - Apr 10, 2026
Clients
Contra
