UI/UX Design Launchpad Curriculum

#ux #ui #design #webdev

Excellent point! Focusing solely on Figma and FigJam will indeed make the program more streamlined, deeply skill-driven, and perfectly align with your partnership. This approach allows for a faster learning curve on specific tools and a more integrated workflow.

Here's the refined, polished 2-week UI/UX Design Launchpad curriculum, fully leveraging Figma and FigJam:

UI/UX Design Launchpad: 2-Week Curriculum (Figma & FigJam Focused)

Program Goal: To provide chapter members with a comprehensive introduction to UI/UX design, graphic design fundamentals, portfolio creation, and product management basics, while simultaneously optimizing their LinkedIn profiles for career advancement. This program aims to equip your chapter members with foundational knowledge, practical skills, and a strong professional online presence.

Target Audience: Chapter members with existing LinkedIn accounts seeking guidance on UI/UX design and professional online presence.

Key Tools: Figma, FigJam

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!

Tools & Resources:

Primary Design Software: Figma (for UI design, prototyping, presentation files).
Collaborative Whiteboarding: FigJam (for brainstorming, user research, IA, journey mapping, roadmapping, retrospectives).
Figma Community: Emphasize leveraging community files, plugins, and templates.
Friends of Figma Nairobi: Encourage participation in local events and networking opportunities.

Facilitator Notes:

Integrated Workflow: Continuously demonstrate how FigJam outputs feed into Figma designs and vice-versa.
Community First: Highlight Figma's community features for learning, inspiration, and resource sharing.
Practical Application: Every theoretical concept should be immediately followed by a hands-on activity in Figma or FigJam.
Portfolio as a Living Document: Emphasize that the portfolio isn't a one-time creation but an ongoing reflection of their growth.

This refined curriculum fully embraces Figma and FigJam, providing a cohesive and powerful learning experience that directly supports your partnership.

Here's an example of how a polished Figma design might look, ready for a portfolio: