# Product Designer Portfolio # Theme: Modern (clean, contemporary) meta: name: Morgan Park title: Staff Product Designer location: San Francisco, CA timezone: UTC-8 contact: email: morgan@designsystem.co website: https://morganpark.design github: morganparkdesign linkedin: morganparkux twitter: morganparkux bio: | I design products that people actually want to use. Currently leading design systems at Figma. Previously shaped experiences at Airbnb and Spotify. I believe great design is invisible—it just works. about: short: Staff Product Designer specializing in design systems and developer tools long: | Design has always been about problem-solving for me. Not making things pretty (though that's nice too), but understanding why something doesn't work and figuring out how to fix it. I'm particularly drawn to systems thinking—how do you create components and patterns that scale across products and teams? How do you balance consistency with flexibility? Outside of work, I teach design workshops, collect vintage posters, and spend too much time organizing my Figma files. settings: color_scheme: light enable_hotkeys: true animate: subtle layout: homepage_style: grid project_layout: case-study show_experiments: true show_timeline: false sections: experience: - company: Figma role: Staff Product Designer date: start: 2022-06 end: present description: Design Systems & Developer Experience highlights: - Leading the design system team serving 4M+ designers globally - Shipped Auto Layout 4.0, adopted by 89% of active users - Established design token architecture used across 200+ components - Mentoring 6 designers across product and systems tracks - company: Airbnb role: Senior Product Designer date: start: 2019-08 end: 2022-05 description: Host Experience Team highlights: - Redesigned host dashboard increasing listing completion by 34% - Led design for Airbnb Plus quality program expansion - Created illustration system adopted company-wide - Conducted 100+ user research sessions across 12 countries - company: Spotify role: Product Designer date: start: 2017-03 end: 2019-07 description: Podcast & Creator Tools highlights: - Designed Spotify for Podcasters dashboard from 0 to 1 - Shipped episode analytics used by 500k+ creators - Contributed to Spotify's design system documentation - company: IDEO role: Design Intern date: start: 2016-06 end: 2016-12 description: Human-Centered Design Practice highlights: - Contributed to healthcare innovation project with Kaiser Permanente - Facilitated design thinking workshops for Fortune 500 clients # Simple projects (backwards compatible) projects: - name: Tokens Studio description: Open-source design token management tool. Bridges design and development workflows. url: https://tokens.studio tags: [Design Systems, Figma Plugin, Open Source] featured: true - name: Accessible Color Palette description: Generate WCAG-compliant color palettes from any base color. 50k+ monthly users. url: https://accessible-colors.com tags: [Accessibility, Color Theory, Tool] featured: true - name: Design System Checklist description: Comprehensive checklist for building and maintaining design systems at scale. url: https://designsystemchecklist.com tags: [Design Systems, Guide, Resource] - name: Component Gallery description: Curated collection of component patterns from top design systems worldwide. url: https://component.gallery tags: [Research, Components, Inspiration] skills: Design: [Product Design, Design Systems, Interaction Design, Visual Design] Tools: [Figma, Sketch, Framer, Principle, After Effects] Research: [User Research, Usability Testing, A/B Testing, Analytics] Development: [HTML, CSS, React, Storybook, Design Tokens] Methods: [Design Thinking, Jobs to Be Done, Atomic Design] writing: - title: "Design Tokens: The Missing Link" url: https://morganpark.design/tokens-missing-link date: 2024-09 publication: Personal Blog - title: "Why Your Design System Needs a Content Strategy" url: https://figma.com/blog/design-system-content date: 2024-05 publication: Figma Blog - title: "The Art of Component API Design" url: https://morganpark.design/component-api date: 2024-02 publication: Personal Blog - title: "Accessibility Is a Design Skill" url: https://uxdesign.cc/accessibility-design-skill date: 2023-11 publication: UX Collective education: - institution: Rhode Island School of Design degree: MFA Industrial Design date: start: 2015-09 end: 2017-05 description: Thesis on human-AI collaboration in creative tools. - institution: UC Berkeley degree: B.A. Cognitive Science date: start: 2011-09 end: 2015-05 description: Minor in Computer Science. # Rich projects (case studies with visual content) projects: - id: figma-auto-layout title: Auto Layout 4.0 subtitle: Responsive design made intuitive featured: true thumbnail: /images/projects/auto-layout-thumb.png hero: /images/projects/auto-layout-hero.png meta: year: 2024 role: Lead Designer timeline: 8 months tech: [Figma, Design Systems, User Research] links: live: https://figma.com/auto-layout case_study: https://morganpark.design/auto-layout sections: - type: overview content: | Auto Layout is Figma's flagship feature for responsive design. Version 4.0 was a ground-up reimagining of how designers create flexible, adaptive layouts. The challenge: make something powerful enough for complex design systems, yet simple enough for a first-time user to understand immediately. - type: gallery images: - src: /images/projects/auto-layout-before.png caption: Before - Manual positioning and resizing alt: Screenshot showing manual layout process - src: /images/projects/auto-layout-after.png caption: After - Intelligent responsive behavior alt: Screenshot showing auto layout in action - src: /images/projects/auto-layout-settings.png caption: Simplified settings panel alt: New settings panel design - type: metrics data: - label: Adoption Rate value: "89%" - label: Time Savings value: "3.2 hrs/week" - label: NPS Score value: "+67" - label: Support Tickets value: "-45%" - type: process content: | ## Research Phase We started with 50+ user interviews to understand pain points: - "I spend more time fixing layouts than designing" - "Auto Layout is powerful but the learning curve is steep" - "I wish it worked more like CSS Flexbox" ## Design Exploration We explored 12 different mental models before landing on the final direction. The breakthrough came when we stopped thinking about "settings" and started thinking about "behaviors"—what should happen when content changes? ## Iteration 8 rounds of usability testing with designers ranging from students to design system architects. Each round refined the interaction model. - type: outcomes content: | Auto Layout 4.0 shipped to 4M+ users in March 2024. Within 3 months: - 89% of active users adopted the new features - Average time spent on layout tasks decreased by 3.2 hours per week - Support tickets related to layout issues dropped by 45% The feature was highlighted at Config 2024 and received coverage in Design Week, Fast Company, and The Verge. - id: tokens-studio title: Tokens Studio subtitle: Design tokens for everyone featured: true thumbnail: /images/projects/tokens-thumb.png hero: /images/projects/tokens-hero.png meta: year: 2023 role: Creator & Maintainer timeline: 2 years tech: [Figma Plugin, TypeScript, Design Tokens] links: github: https://github.com/tokens-studio/figma-plugin live: https://tokens.studio sections: - type: overview content: | Tokens Studio bridges the gap between design and development by bringing design tokens directly into Figma. Define once, use everywhere. What started as a side project became an open-source tool used by teams at Spotify, GitHub, and Microsoft. - type: image src: /images/projects/tokens-workflow.png caption: Design tokens workflow - from Figma to code alt: Diagram showing token workflow - type: metrics data: - label: Monthly Users value: "50k+" - label: GitHub Stars value: "4.2k" - label: Enterprise Teams value: "200+" - type: demo title: Token Sync in Action embed: | - type: outcomes content: | ## Impact Tokens Studio has become the de facto standard for design token management in Figma. It's used by design systems teams at companies including: - Spotify (Encore design system) - GitHub (Primer design system) - Microsoft (Fluent design system) - Shopify (Polaris design system) The plugin processes over 2M token syncs per month. # Experiments and side projects experiments: - title: Color Harmony Generator description: AI-powered tool that generates harmonious color palettes based on color theory principles and accessibility requirements. demo: https://colorharmony.design tags: [Color Theory, AI, Accessibility] - title: Figma Plugin Starter Kit description: Open-source template for building Figma plugins with React and TypeScript. Includes hot reload and testing setup. github: https://github.com/morganparkdesign/figma-plugin-starter tags: [Figma, TypeScript, Open Source] - title: Design System Metrics Dashboard description: Track adoption, consistency, and health metrics for your design system. Built with Observable. demo: https://ds-metrics.netlify.app github: https://github.com/morganparkdesign/ds-metrics tags: [Analytics, Design Systems, D3.js] - title: Variable Font Playground description: Interactive tool for exploring and testing variable font axes in real-time. demo: https://varfonts.design tags: [Typography, Web Fonts, CSS] # Testimonials from collaborators testimonials: - quote: "Morgan has this rare ability to see both the forest and the trees. They can zoom out to understand system-level implications while still sweating the pixel-level details." author: Sarah Chen company: Figma role: VP of Design - quote: "Working with Morgan transformed how our team thinks about design systems. They don't just design components—they design how teams collaborate." author: Alex Rivera company: Airbnb role: Design Systems Lead - quote: "The Tokens Studio plugin literally changed how we work. It's elegant, powerful, and feels like it should have been built into Figma from day one." author: James Wu company: Spotify role: Senior Design Technologist - quote: "Morgan's workshops on design systems are the best I've attended. Clear, practical, and immediately actionable." author: Emily Tran company: Netflix role: Product Designer theme: modern