Product Design · SaaS · AI

Skillz-up — AI-Powered Learning Platform

Designing an AI-native LMS for Moroccan businesses — upload your documents, AI generates the training. Distribute via QR code, track progress in real time, no app to download. End-to-end UX/UI from research to handoff.

Role
Product Designer (UX/UI)
Timeline
Jan – Mar 2026
Platform
Web App (SaaS) · PWA
Deliverables
Research, UI, Design System, Handoff

A landing page that sells the AI promise

Bold dark hero with the purple brand accent on "l'IA", a clear three-CTA path (free trial, install app, demo), and immediate stat reinforcement to build credibility. The five-pillar strip below introduces the core capabilities at a glance.

skillzup.ma SkillzUp Solutions Tarifs Ressources Contact FR EN AR Réserver demo Essai gratuit Formez avec l'IA. Uploadez vos documents, l'IA génère la formation. Diffusez par QR code. Suivez la progression en temps réel. Sans app à télécharger. Essayer gratuitement Installer l'app 240+ FORMATIONS CRÉÉES 12K APPRENANTS ACTIFS 48h POUR ONBOARDER SkillzUp Mes formations Rechercher une formation... EN COURS HACCP : Sécurité alimentaire Module 4/6 · 70% complété À COMPLÉTER Hygiène en cuisine 8 modules · 25 min Service client 6 modules · Terminé 📋 Procédures ouverture 4 modules · 15 min Création IA Diffusion QR 📊 Pilotage 🌐 FR & AR natif

skillzup.ma — Hero section, desktop view

Making professional training actually scale

Skillz-up is an AI-powered LMS designed to help Moroccan businesses digitize their training programs. It turns existing PDFs, presentations, and procedures into interactive courses, quizzes, and audio modules in minutes — distributed via QR code, no app required.

The product needed a landing page that sells the AI value prop without alienating non-tech founders, a product UI that's simple enough for first-time LMS admins, and a multilingual experience (FR / EN / AR) that respects the local market without compromising on polish.

Why training programs fail, and how we fixed it

Challenges

  • SMEs still train "on the job" — no structure, no measurement, no compliance trail
  • Existing LMSs are built for big enterprises — too complex, too expensive
  • Course creation takes weeks of authoring work most teams can't afford
  • Distribution requires apps, accounts, IT setup — friction kills adoption
  • Multilingual market (FR/AR/EN) — most platforms only do one well

Design Direction

  • "Upload → AI generates" as the core narrative — make speed the hero
  • QR code distribution to remove every barrier between manager and learner
  • Tiered pricing that grows with the team, not enterprise lock-in
  • Right-to-left ready type system and component library from day one
  • Dark, premium SaaS aesthetic with the purple accent owned consistently

Where one document becomes a full course

The AI Studio is the heart of the product — twelve content types generated from a single source file: presentations, quizzes, flashcards, mind maps, AI audio, AI video, glossaries, infographics. The UI surfaces this breadth without overwhelming first-time users.

AI STUDIO Tout ce que l'IA peut créer Images, vidéos, audio, quiz, mind maps, présentations — depuis un seul studio. 12 TYPES DE CONTENUS — GÉNÉRÉS EN TEMPS RÉEL Presentation Quiz Flashcards Mind map Audio IA Vidéo IA Plan de cours Rapport Glossaire Tableau Infographie Image IA Slide 1 / 6 · HACCP : Sécurité alimentaire 📄 Source : HACCP_2026.pdf HACCP : Le Pilier de Votre Sécurité Alimentaire Comprendre les principes pour protéger la santé de tous ‹ Précéd Suivant › GÉNÉRATION EN COURS Formation HACCP Plan de cours généré 2.3s 6 slides présentation 8.1s Quiz · 12 questions 5.4s Audio IA — narration FR en cours Mind map en attente Glossaire (24 termes) en attente Progression globale 3 / 6

AI Studio — slide preview + generation pipeline

Research first, pixels second

01

Discovery

User interviews with 10 professionals across SMEs. Competitive audit of 6 LMS platforms. Defined personas and key jobs-to-be-done for trainers and learners.

02

Wireframes

Low-fidelity wireframes for core flows: AI generation, course discovery, lesson player, admin dashboard. Validated with stakeholders before adding visual layer.

03

UI Design

High-fidelity UI in Figma with full design system, tokens, FR/AR/EN variants, and responsive specs. Purple-forward SaaS aesthetic with strong AI cues.

04

Test & Handoff

Usability testing with 6 users. Iterated on AI generation flow and lesson player. Delivered annotated specs and Figma dev handoff for the Next.js team.

Pricing built for the SME journey

Four tiers with progressive AI generation limits. The "Grow" tier carries the "Le plus populaire" flag as the recommended plan for growing teams. Each card uses the same rhythm so visitors can scan top-to-bottom in seconds.

TARIFS Un investissement, pas un coût. Offre lancement : 14 jours gratuits + configuration incluse. Places limitées. Annuel −20% Mensuel Starter 20 utilisateurs 655 MAD / mois Facturé annuellement Démarrez avec l'IA, jusqu'à 20 apprenants Jusqu'à 20 apprenants 4 modules IA par cours 5 images générées QR code & lien web Support email Commencer Core 40 utilisateurs 1 309 MAD / mois Facturé annuellement 8 modules IA/cours, 10 images Jusqu'à 40 apprenants 8 modules IA par cours 10 images générées QR code & lien web Support email Commencer LE PLUS POPULAIRE Grow 70 utilisateurs 2 519 MAD / mois Facturé annuellement 16 modules, enrichissement & review IA Jusqu'à 500 apprenants 16 modules IA par cours 35 images générées Enrichissement + Review IA Support prioritaire Commencer Pro 100 utilisateurs 4 939 MAD / mois Facturé annuellement 35 modules, TTS, vidéo, tout inclus Jusqu'à 100 apprenants 35 modules IA par cours 60 images + 5 vidéos TTS, enrichissement, review Accompagnement dédié Commencer

skillzup.ma — Tarifs section, 4-tier structure

Research-validated, developer-ready

10
User interviews
40+
Hi-fi screens
6
Usability tests
3
Languages (FR/EN/AR)

What I used

Figma FigJam User Research Usability Testing Design System Dev Handoff RTL Layout
Next Project

SnapOps — Operational Intelligence

View case study →