Product Design · SaaS

Skillz-up — SaaS Learning Platform

End-to-end product design for a SaaS learning platform — from user research and testing to full UI design and developer handoff. Research-driven, conversion-focused.

Role
Product Designer (UX/UI)
Timeline
Jan – Mar 2026
Platform
Web App (SaaS)
Deliverables
Research, Wireframes, UI, Handoff
Replace with Skillz-up hero — dashboard or course overview screen
Overview

Making online learning actually stick

Skillz-up is a SaaS learning platform designed to help professionals upskill through structured, bite-sized courses. The founders had a clear product vision but needed a designer who could translate research insights into a product that keeps learners engaged and drives course completion.

This was an end-to-end product design engagement — from discovery research through user testing to a complete, developer-ready UI system.

Diagnosis

Why learners drop off, and how to fix it

✕
Problems
  • Online course completion rates average 5–15% industry-wide
  • Existing platforms overwhelm users with too many choices upfront
  • Progress tracking is buried — learners lose momentum
  • No social proof or community features to sustain motivation
✓
Solutions
  • Guided onboarding flow that personalizes the learning path
  • Persistent progress bar and streak system for daily motivation
  • Bite-sized modules (15 min max) — designed for real schedules
  • Peer activity feed and milestone celebrations for social accountability
Process

Research first, pixels second

01
Discovery
User interviews with 10 professionals. Competitive audit of 6 learning platforms. Defined personas and key jobs-to-be-done.
02
Wireframes
Low-fidelity wireframes for core flows: onboarding, course discovery, lesson player, dashboard. Validated with stakeholders.
03
UI Design
High-fidelity UI in Figma with component library, design tokens, and responsive variants. Purple-forward SaaS aesthetic.
04
Test & Handoff
Usability testing with 6 users. Iterated on navigation and lesson flow. Delivered annotated specs and Figma dev handoff.
Dashboard & learning path
Course player & progress tracking
Full flow — onboarding to lesson completion
Impact

Research-validated, developer-ready

10
User interviews conducted
40+
High-fidelity screens delivered
6
Usability tests completed
Tools & Stack

What I used

Figma FigJam User Research Usability Testing Design System Dev Handoff
Next Project
Noor Islamic App →