01 — OVERVIEW

SkillSwap:
Democratizing Learning

The Challenge

Traditional education is expensive, and online courses can be lonely. People want to learn new skills but often lack the funds or the community support to keep going.

The Solution

A barter-based platform where skills are the currency. Learn guitar by teaching coding. No money changes hands, just knowledge and good vibes.

Role
Product Designer & Developer
Timeline
2 Weeks Sprint
Tools
Figma, Next.js, Tailwind
02 — METHODOLOGY

The Double Diamond Process

Discover

User interviews, market research, and identifying the core problem.

Define

Creating personas, user stories, and defining the MVP scope.

Develop

Wireframing, prototyping, and iterating on the UI/UX.

Deliver

Final high-fidelity designs, development, and testing.

03 — TARGET AUDIENCE

Who are we designing for?

The Broke Student

PRIMARY PERSONA

"I want to learn design but courses are too expensive. I'm good at math though!"

  • Needs free resources
  • Has time but no money
  • Values community

The Hobbyist Expert

SECONDARY PERSONA

"I'm a pro developer but I want to learn pottery on weekends. I'd love to mentor someone."

  • Wants to give back
  • Looking for genuine connection
  • Needs flexible scheduling
04 — USER STORIES

Key Scenarios

01
As a user, I want to list the skills I can teach so that others can find me.
02
As a user, I want to search for specific skills I want to learn.
03
As a user, I want to chat with potential matches to see if we vibe.
04
As a user, I want to schedule a session without leaving the app.
05 — USER FLOW

Information Architecture

Start
ONBOARDING
Welcome Screen
Social Login
Guest Mode
Select 'Teach'
Select 'Learn'
AI Match Result
MAIN APP LAYOUT
Dashboard
Schedule
My Learning
Top Picks
Explore
Find Skills
Skill Detail
Book Session
Community
Post Feed
Post Detail
Exchanges
Upcoming
Pending
History
Messages
Chat List
Direct Message
Profile
My Stats
Edit Profile
Settings
06 — WIREFRAMES

Low-Fidelity Sketches

Wireframe Screen 1
Wireframe Screen 2
Wireframe Screen 3
07 — DESIGN SYSTEM

Visual Identity & Components

COLOURS

BRAND GRADIENTS
PrimaryIndigo-Purple
BackgroundPastel Mesh
SEMANTIC
#22C55E
#F59E0B
#EF4444
#3B82F6
NEUTRALS
900
700
500
200
50

TYPOGRAPHY

Display
Poppins Black
48px / 1.1 / -0.02em
H1
Poppins Bold
30px / 1.2 / -0.01em
Body
Nunito Medium
16px / 1.5 / 0em

The quick brown fox jumps over the lazy dog. SkillSwap uses Nunito for high readability in long-form content and chat interfaces.

Label
Nunito Bold Caps
12px / 1.0 / 0.05em

BUTTONS

Primary
Secondary
Icon

UI ELEMENTS

Input Fields
Placeholder text...
Active Input
Navigation
08 — FINAL RESULTS

High-Fidelity UI

Interactive Preview Available on Home
98%
User Satisfaction
2min
Avg. Match Time
5k+
Skills Exchanged