Week 1-2: Foundation & Onboarding

Week 1: Project Context & Tool Setup

• Day 1-2: Project overview
  • Introduction to SIDF, Vision 2030 alignment, and project goals
  • Understand the project details and milestones
• Day 3-5: Figma Basics - Session 1
  • Figma interface and navigation
  • Frames, shapes, and basic design tools
  • Auto Layout fundamentals
  • Components vs instances
  • Practice Exercise: Recreate a simple login screen from screenshots

Week 2: Design Systems & User Research Basics

• Day 1-2: Figma Basics - Session 2
  • Design systems and component libraries
  • Variants and properties
  • Prototyping basics (linking screens, interactions)
  • Practice Exercise: Create a simple button component with variants
• Day 3-5: Competitive Analysis Kickoff (3 days)
  • Research and identify 5-7 competitor/comparable platforms (regional banks, government portals, fintech lending platforms)
  • Document initial findings and platform selection rationale
  • Set up analysis framework in FigJam/Notion
  • Begin collecting screenshots and initial observations

Week 3-4: Skill Building & Competitive Analysis

Week 3: Advanced Figma & Competitive Research

• Day 1-2: Figma Basics - Session 3
  • Advanced prototyping (overlays, scroll behavior, conditional logic)
  • Using plugins relevant to the project
  • Collaboration features (comments, version history)
  • Practice Exercise: Create a simple flow with 3-4 screens and prototype interactions
• Day 3-5: Competitive Analysis - Research Phase
  • Analyze competitor loan management interfaces, document submission processes
  • Document UI patterns, interaction models, and innovative features
  • Take screenshots and organize in FigJam with annotations
  • Focus areas: Mobile-first design, Arabic/RTL support.

Week 4: UI Patterns & Analysis Synthesis

• Day 1-2: Mobile-first design principles
  • Review GDA Design System
  • RTL (Right-to-Left) design considerations for Arabic
  • Responsive design patterns
• Day 3-5: Competitive Analysis - Synthesis & Opportunities
  • Create comparison matrices (features, UX patterns, strengths/weaknesses)
  • Extract improvement opportunities for SIDF Client Portal
  • Identify best practices and innovative solutions to adapt
  • Deliverable: Present findings in FigJam with recommendations

Week 5-6: Deeper Project Involvement

Week 5: Component Design

• Day 1-2: Design system work
  • Study existing SIDF brand guidelines
  • Understand design tokens (colors, typography, spacing)
  • Task: Begin building reusable components (form inputs, buttons, cards) in Figma
• Day 3-5: Screen State Documentation
  • Learn to document all screen states (empty, loading, error, success)
  • Document validation rules and error messages