Inspiration
Learning UX/UI design has never been more popular, but for beginners the journey is a mess. Tutorials, YouTube videos, blog posts, and Udemy courses all exist in abundance, yet almost none of them connect structured instruction, hands-on practice, and instant feedback into one path. Learners end up skipping fundamentals, losing motivation, and never quite turning theory into portfolio-ready work.
We looked hard at what already exists. Coursera and Udemy give broad catalogs but mostly passive, lecture-based learning with little gamification or personalized feedback. The Interaction Design Foundation has a well-organized curriculum but sits behind a subscription and leans theory-heavy. UXcel brings real gamification to UX but keeps most content paid and doesn't push into AI-driven personalization.
Two things pointed the way. Duolingo showed us that a long, intimidating subject becomes approachable when it's split into short units with streaks and rewards holding you to it. And Boot.dev, though it teaches backend programming rather than design, showed us the power of a "Training Grounds" area for reviewing what you've already studied, an effectively infinite supply of personalized generated exercises, and a public leaderboard to compete on. Nobody had brought that combination to UX/UI. So we built it.
What it does
UXFriends is a bilingual (Arabic/English) web platform that turns UX/UI education into a structured, gamified, and personalized experience.
Structured curriculum. Content is organized into Sections containing Units, each with interactive lessons, quizzes, and design projects. Progression is sequential — new content unlocks only once prerequisites are met — so learners can't skip the fundamentals that everyone skips.
Placement test. New users choose to start from zero or take an 18-question, 20-minute assessment across 3 levels that places them at the right entry point instead of forcing experienced designers through beginner material.
Gamification engine. XP for completing lessons, units, and sections; badges for long-term achievements; daily streaks with long-streak badges; levels; and weekly leaderboards ranking users by XP earned.
AI Learning Agent. This is the heart of the platform. It generates adaptive quizzes tuned to your actual performance, produces personalized weekly and monthly progress reports that surface your strengths and weaknesses, builds a structured review plan with tasks assigned day by day and estimated review times, and offers a chat-style study assistant that explains mistakes and answers questions. A recommendations engine analyzes progress, mistakes, and learning behavior to tell you exactly what to study next, and a quick-analysis dashboard gives a fast read on weak topics and recent activity.
Profile and certificates. A centralized profile displays total XP, earned badges, current streak, and skill mastery, alongside a project showcase listing every project completed along the path. Certificates are issued on Section completion and for the full learning path.
Analytics and settings. A dedicated analytics page for progress tracking, plus account settings, email verification, and password recovery flows.
How we built it
The system is a four-part architecture communicating over REST/JSON on HTTPS:
- Frontend: React.js, component-based, responsive across desktop, tablet, and mobile browsers
- Backend: ASP.NET Core handling RESTful APIs and business logic
- Database: Microsoft SQL Server for relational persistence
- AI microservice: Python FastAPI, kept as a separate service for the personalization engine
- Auth: OAuth and ASP.NET Identity (Google and email login)
- DevOps: Docker containerization with CI/CD pipelines, deployed to cloud (AWS / Azure / Vercel) We followed an Agile-based Scrum methodology through a full SDLC: requirements and feasibility analysis, UI/UX wireframing and clickable prototyping to nail the gamified look and feel before writing code, system design (activity, use case, class, and sequence diagrams plus a full ERD and Gantt timeline), iterative implementation sprints, then functional, performance, and security testing.
Splitting the AI out as a FastAPI microservice was deliberate — it let us iterate on personalization logic independently of the main learning engine, which mattered because the AI features changed the most between sprints.
On security we hashed passwords with bcrypt/Argon2 and proper salting, enforced TLS on all client-server traffic, added role-based access control, rate-limited public APIs, and logged sensitive operations for misuse detection.
Challenges we ran into
Making one data model hold three systems at once. The curriculum (sections, units, lessons, quizzes), the gamification layer (XP, badges, streaks, leaderboards), and the AI agent's analytics all read and write the same user activity. Getting the ERD and class diagram right so those three could coexist without duplicating state took several passes.
Keeping the AI a guide, not a crutch. The research on generative AI in education is clear about the risks: inaccurate outputs, learner over-reliance, privacy exposure, and weakened academic integrity. We deliberately positioned the AI Learning Agent as a support tool that guides practice and reflection rather than doing the work, which meant constraining what it generates and how it phrases feedback.
Performance targets against an AI service call. We set out to keep cached responses under 300 ms and dynamic operations under 2 seconds while supporting 50 concurrent users — but personalization requires round-tripping to a separate Python service. Caching frequently accessed content, tuning database queries, and moving report generation to asynchronous processing is what closed the gap.
GDPR compliance versus behavioral analytics. The AI agent is only useful if it can consume detailed activity data, yet compliance demanded data minimization, consent management, personal data export, and account deletion. Reconciling those two pulls shaped a lot of our data design.
Bilingual, RTL-first UI. Building an interface that works in Arabic and English meant handling right-to-left layout, mirrored navigation, and bidirectional text throughout every page rather than bolting translation on at the end.
Scoping to a graduation timeline. Five students, one semester. We prioritized the core learning loop first, then layered gamification, then the AI agent — which meant accepting that challenges ship static in this version.
Accomplishments that we're proud of
We shipped the whole loop, not a demo of one slice. A learner can land on the site, register, take a placement test, get placed, work through structured units, earn XP and hold a streak, get AI-generated feedback on their weak spots, follow a generated review plan, complete a project, and walk away with a certificate.
The AI Learning Agent actually works end to end — adaptive quiz generation, weakness detection, weekly and monthly reporting, review scheduling, and a conversational study assistant all running through our own FastAPI microservice.
Integrated project tracking is our real differentiator. No competing platform keeps a centralized history of completed projects inside the learner's profile, and that's the bridge between "I finished a course" and "here's what I can show an employer."
Full Arabic and English support in a domain where quality Arabic UX/UI education is genuinely scarce.
And we did it at essentially zero cost, using student cloud credits and open-source tooling — proof that the model doesn't require a subscription wall to work.
What we learned
Gamification isn't decoration. XP, streaks, and leaderboards only sustain motivation when they're bolted to a well-structured progression; rewards floating on top of unstructured content don't hold anyone.
Reading the literature on AI in higher education, adaptive learning systems, and learning analytics changed how we built. The application areas that keep recurring in systematic reviews — adaptive learning, intelligent assessment, learner profiling, performance prediction — map almost one-to-one onto what we ended up shipping, and knowing that upfront saved us from inventing features nobody needed.
Modular architecture pays for itself. Isolating the AI in its own service meant we could rewrite personalization logic repeatedly without touching the learning engine.
Writing the SRS before the code felt slow and turned out to be the reason the design chapter and implementation actually matched. Non-functional requirements especially — performance, security, GDPR — are far cheaper to design in than to retrofit.
And working in five-person sprints with supervisor feedback each cycle taught us more about scoping than any single technical lesson.
What's next for UXFriends
The roadmap takes UXFriends from an individual learning tool to a collaborative social ecosystem.
Community ecosystem. A community feed where users share UX/UI tips, case studies, and design inspiration, with upvotes, downvotes, and likes surfacing the most valuable content. Design challenges where learners submit work to earn XP and compete for Top 3 Design Badges. And a collaborative projects module for posting or joining open-source design work so learners get real teamwork experience.
Social and networking features. A friends feed for following peers' progress and adding "Design Buddies" for accountability. Real-time chat for one-to-one messaging and group study rooms.
Mentorship program. A tiered system connecting learners with industry professionals for both free and premium personalized feedback sessions.
Peer-Buddy program. Automated pairing that matches users learning at similar speeds, using mutual motivation to push completion rates up.
Log in or sign up for Devpost to join the conversation.