UI/UX Design Launchpad Curriculum

Week 1: Foundations & Visual Design with Figma & FigJam

Theme: Understanding User-Centered Design, Visual Principles, and Practical Application in Figma & FigJam

Day 1: Introduction to UI/UX & Design Thinking

• Morning (3 hours):
  • What is UI/UX? (Definitions, differences, importance, impact on business)
  • The Design Thinking Process: Empathize, Define, Ideate, Prototype, Test.
  • User-Centered Design (UCD) Principles: Why users are at the core.
  • Introduction to HCI (Human-Computer Interaction): Usability, accessibility, cognitive load.
  • Hands-on in FigJam: Collaborative brainstorm on a common everyday problem, creating digital sticky notes for "Empathize" (who are the users, what are their feelings) and "Define" (problem statements).
• Afternoon (3 hours):
  • LinkedIn Optimization - Part 1: The Basics
    • Profile Picture & Headline: Best practices, keywords.
    • About Section: Crafting a compelling narrative, highlighting skills and aspirations.
    • Experience Section: How to describe non-design roles with a design mindset.
  • Homework: Refine LinkedIn profile picture, headline, and draft the "About" section. Research 3-5 inspiring UI/UX designers on LinkedIn.

Day 2: User Research & Information Architecture in FigJam

• Morning (3 hours):
  • User Research Methods Overview: Interviews, surveys, observation, competitive analysis (brief intro).
  • Creating User Personas (FigJam): Based on Day 1's problem, collaboratively define 2-3 user personas with needs, goals, and pain points using FigJam templates.
  • User Journey Mapping (FigJam): Visualize a user's interaction with a hypothetical product/service using FigJam's journey map templates.
• Afternoon (3 hours):
  • Information Architecture (IA): Structuring content for clarity and findability.
  • Site Maps & User Flows (FigJam): Collaboratively create a simple site map for a familiar app and then map out a user flow using FigJam's flow charting tools.
  • LinkedIn Optimization - Part 2: Skills & Education
    • Skills Endorsements: Identifying relevant UI/UX and soft skills.
    • Education & Certifications: How to list them effectively.
  • Homework: Refine their FigJam personas and user journey. Add relevant skills to LinkedIn, focusing on skills used today (e.g., User Research, Information Architecture, FigJam).

Day 3: Wireframing & Prototyping Fundamentals in Figma

• Morning (3 hours):
  • Introduction to Wireframing: Low-fidelity sketching, purpose, benefits.
  • Figma Basics - Part 1: Interface overview, frames, shapes, text, basic constraints.
  • Low-Fidelity Wireframing (Figma): Translate FigJam user flows into rough digital wireframes for key screens of the product defined on Day 1 (e.g., login, home, profile). Focus on structure and hierarchy, not aesthetics.
• Afternoon (3 hours):
  • Figma Basics - Part 2: Auto Layout for responsive design, component creation (simple buttons).
  • Prototyping Fundamentals (Figma): Connecting frames, basic click interactions, transitions.
  • LinkedIn Optimization - Part 3: Projects & Accomplishments
    • Adding Projects: How to showcase even small design exercises (like today's wireframes).
    • Volunteering & Publications: Highlighting relevant experiences.
  • Homework: Complete the low-fidelity wireframes in Figma, ensuring basic Auto Layout for one section and simple click-through prototyping. Start brainstorming potential "projects" for LinkedIn based on daily activities.

Day 4: Graphic Design Fundamentals for UI & Figma Styling

• Morning (3 hours):
  • Principles of Design: Balance, alignment, hierarchy, contrast, repetition, proximity, white space.
  • Color Theory: Color psychology, palettes, accessibility considerations (e.g., contrast plugins in Figma).
  • Typography Basics: Type classifications, pairing fonts, readability.
  • Imagery & Iconography: Purpose, consistency, sourcing (e.g., Unsplash, Iconify plugin in Figma).
  • Activity: Analyze a few well-designed and poorly designed websites/apps, noting principles.
• Afternoon (3 hours):
  • Creating a Basic Design System (Figma):
    • Color Styles: Define primary, secondary, accent, neutral colors.
    • Text Styles: Define heading, body, caption styles.
    • Component Creation: Build a simple button and input field component using Auto Layout and styles.
  • LinkedIn Optimization - Part 4: Recommendations & Connections
    • Requesting Recommendations: Who to ask and what to ask for.
    • Networking Strategies: Connecting with industry professionals, group participation.
  • Homework: Create a simple color palette, typography scale, and 2-3 basic components in Figma. Draft a recommendation request message.

Day 5: Visual Design & UI Best Practices in Figma

• Morning (3 hours):
  • Grids & Layouts (Figma): Setting up layout grids for consistency.
  • UI Elements & Components: Review common patterns (navigation, cards, forms).
  • Applying Design System: Use the created styles and components to bring low-fidelity wireframes to life.
  • Gestalt Principles: How users perceive visual elements (brief review).
  • Hands-on: Convert 2-3 key low-fidelity wireframe screens into high-fidelity UI screens in Figma, applying the developed design system.
• Afternoon (3 hours):
  • Advanced Prototyping (Figma): Incorporating more complex interactions (hover states, overlays, scrolling).
  • Figma Plugins for Efficiency: Quick intro to useful plugins (e.g., Unsplash, Iconify, Content Reel).
  • LinkedIn Optimization - Part 5: Content Strategy
    • Sharing & Engaging: Curating relevant content, commenting thoughtfully.
    • Posting Original Content: Sharing insights, design process, project updates.
  • Homework: Complete the high-fidelity UI screens for the selected screens in Figma, adding advanced interactions. Prepare to share their work.

---

Week 2: Deeper Dive & Career Readiness with Figma & FigJam

Theme: Advanced UI/UX Concepts, Portfolio Development, Product Management Integration, and Career Launch

Day 6: Usability Testing & Iteration with Figma Prototypes

• Morning (3 hours):
  • What is Usability Testing? Purpose, benefits, different methods (moderated, unmoderated).
  • Creating a Usability Test Plan (FigJam): Collaboratively define objectives, tasks, and metrics for testing the Figma prototype.
  • Conducting a Small Usability Test: Role-playing user and facilitator, observing interactions with the Figma prototype.
  • Hands-on: Use the Figma prototype from Day 5 for brief peer usability tests, taking notes in FigJam.
• Afternoon (3 hours):
  • Analyzing Test Results (FigJam): Synthesize feedback, identify pain points, and prioritize issues using FigJam's dot voting or swimlane features.
  • Iterative Design (Figma): Apply feedback to make improvements to the Figma prototype, demonstrating how design evolves.
  • LinkedIn Deep Dive: Workshop on advanced search, job alerts, and company research.
  • Homework: Refine the Figma prototype based on the identified feedback. Identify 3-5 target companies of interest on LinkedIn.

Day 7: Introduction to Product Management for Designers

• Morning (3 hours):
  • The Product Lifecycle: Discovery, definition, development, delivery, iteration.
  • Role of a Product Manager: Vision, strategy, roadmap, backlog.
  • Collaboration between PM & Designer: Working effectively, communicating design value.
  • Understanding Business Goals: How design contributes to product success.
  • Hands-on (FigJam): Outline a simple product roadmap for the project from Day 1, considering business goals and how design fits into each phase. Use FigJam for collaborative roadmapping.
• Afternoon (3 hours):
  • Agile & Scrum Basics: Sprints, stand-ups, backlog grooming (brief overview).
  • Measuring Design Success: Key Performance Indicators (KPIs), metrics.
  • Hands-on (FigJam): Simulate a brief "sprint planning" session, discussing how a designer would contribute to an agile sprint for their ongoing project, using FigJam for task breakdown.
  • Resume/CV Workshop - Part 1: Structuring a design resume, key sections, keywords relevant to UI/UX and product roles.
  • Homework: Start drafting a design-focused resume/CV.

Day 8: Portfolio Building - Part 1: Case Study Fundamentals & Figma Presentation

• Morning (3 hours):
  • What is a Design Portfolio? Purpose, audience (recruiters, hiring managers).
  • The Power of the Case Study: Telling the story of your design process.
  • Key Elements of a Case Study: Problem, research, ideation, solution, results, learnings.
  • Leveraging Figma for Portfolio Presentation: Exporting assets, creating clean mockups (using Figma mockups or plugins), showcasing prototypes.
  • Activity: Select 1-2 projects (including the program's main project) and brainstorm the "story" for each.
• Afternoon (3 hours):
  • Structuring a Case Study (FigJam): Collaboratively outline a compelling case study narrative using FigJam for structure and content ideas.
  • Visual Storytelling in Figma: How to effectively present sketches, wireframes, and high-fidelity prototypes within Figma itself, or by exporting assets for other platforms.
  • Resume/CV Workshop - Part 2: Tailoring your resume to specific job descriptions, incorporating design project experience.
  • Homework: Outline the first case study for their chosen project in FigJam. Start gathering and organizing visual assets (Figma screenshots, prototypes, FigJam boards) for it.

Day 9: Portfolio Building - Part 2: Execution & Refinement

• Morning (3 hours):
  • Hands-on Case Study Creation (Figma/FigJam): Begin assembling their chosen case study. This can be done directly in Figma (e.g., creating a "presentation file" with frames for each section) or by exporting assets from Figma/FigJam to an external portfolio builder (Behance, Notion, personal website).
  • Writing Compelling Descriptions: Clearly articulate your role, decisions, and impact.
  • Peer Review - Case Study Outline/Draft: Get feedback on the structure, content, and visual presentation of their developing case study.
• Afternoon (3 hours):
  • Presentation Skills for Designers: Communicating design decisions, walking through a portfolio.
  • Mock Interviews - Portfolio Walkthrough: Practice presenting their work (even if it's just the initial case study) to peers, focusing on telling the story.
  • LinkedIn Profile Review & Q&A: Final check of LinkedIn profiles, addressing individual questions on optimization and content.
  • Homework: Continue working on the first portfolio case study. Refine visuals and narrative in Figma/FigJam.

Day 10: Capstone Project & Career Launch

• Morning (3 hours):
  • Capstone Project Presentations: Each member presents their refined Figma prototype and their drafted portfolio case study (or at least the detailed outline with key visuals from Figma/FigJam). Focus on the design process and learnings.
  • Constructive Feedback Session: Peers and instructors provide feedback.
• Afternoon (3 hours):
  • Job Search Strategies for UI/UX: Where to look, crafting cover letters, networking in the Figma community and beyond.
  • Freelancing & Side Projects: Exploring other avenues for experience.
  • Continued Learning Resources: Figma community files, Figma's official resources, Friends of Figma events, online communities, blogs.
  • Final Q&A and Wrap-up: Addressing any remaining questions, encouraging continued engagement with the Figma ecosystem and the Friends of Figma Nairobi chapter.
  • Group Activity: Create a shared "Figma Power User Tips & Plugin Recommendations" board in FigJam.
  • Homework: Refine their portfolio and LinkedIn based on feedback, and start actively engaging with the design community!

Comments

[Hashbyt]

I appreciate how this program integrates practical design fundamentals with career readiness activities like portfolio building and LinkedIn optimization. It’s a great model for nurturing well-rounded design talent.