# llms.txt for Oğuzhan Özcan | Product Designer & Design Engineer

## Site Information

-   **URL**: https://o10n.design
-   **Title**: Oğuzhan Özcan | Product Designer & Design Engineer
-   **Language**: en-US
-   **Last Updated**: 2025-08-30
-   **Content Type**: Portfolio, Case Studies, Technical Articles,
    Design Resources
-   **Target Audience**: Designers, Developers, Product Managers, Design
    Engineers

## Author

-   **Name**: Oğuzhan Özcan
-   **Alternate Names**: Oğuzhan Özcan, Oğuz Özcan
-   **Role**: Product Designer at Jotform
-   **Location**: Ankara, Turkey (Üniversiteler Mah. ODTÜ Teknokent,
    06800)
-   **Email**: oguz@o10n.design
-   **Website**: https://o10n.design
-   **Education**: Middle East Technical University (METU) -Physics (Dropout-No Grade Earned)
-   **Description**: Analytics and data-driven product designer who
    prioritizes research-based methodologies, accessibility,
    user-centered designs, and developer friendliness. Specializes in
    design systems, frontend development, and bridging
    design-development gaps.

## Site Purpose & Value Proposition

Personal portfolio showcasing product design, UI/UX design, design
systems, and technical writing. Features case studies, experiments, and
insights on design and development practices. Provides practical
knowledge for designers and developers working together.

## Content Structure & Navigation

### Main Sections

-   `/` - Homepage with featured work and introduction
-   `/about-me` - Professional background, expertise, and journey
-   `/case-study` - Design and development case studies
-   `/product` - Product showcases and design systems
-   `/ideas` - Design concepts and project ideas
-   `/experiment` - Design and AI experiments
-   `/writings` - Articles and technical blog posts
-   `/tech-stack` - Technologies and tools overview
-   `/docs` - Documentation and resources
-   `/contact` - Contact information and form

### Featured Work & Case Studies

-   `/case-study/jotform-2fa` - 2FA implementation case study (15K+ user
    adoption, security UX best practices)
-   `/product/brifl-design-system` - Comprehensive design system for
    open-source form builder
-   `/product/kroma` - Free color accessibility checker tool for
    designers and developers
-   `/ideas/jotform-logbook` - Internal company awareness tool design
    process
-   `/experiment/solart` - Design experiment showcase and methodology

### Technical Content & Articles

-   `/writings/dev-friendly-component-design` - Component design best
    practices for developer collaboration
-   `/writings/using-tokens-in-figma` - Design tokens implementation
    guide and workflow

### Legal & Policy Pages

-   `/privacy-policy` - Privacy policy and data handling
-   `/cookie-policy` - Cookie usage policy and consent management

## Social Media & Professional Profiles

-   **LinkedIn**: https://linkedin.com/in/ouzozcn/ (Professional
    network)
-   **GitHub**: https://github.com/ouzozcn (Code repositories and
    contributions)
-   **Behance**: https://www.behance.net/oguzhanozcan (Portfolio
    showcase)
-   **Dribbble**: https://dribbble.com/ouzozcn (Design inspiration and
    community)
-   **Medium**: https://medium.com/@ouzozcn (Technical writing and
    insights)

## Expertise & Skills Matrix

### Core Design Competencies

**Product Design**: User-centered design, research-driven decisions,
iterative prototyping **User Experience Design**: User research,
usability testing, information architecture, user flows **User Interface
Design**: Visual design, interaction design, component design, design
systems **Design Systems**: Component libraries, design tokens,
documentation, scalability **Accessibility**: WCAG compliance, inclusive
design, assistive technology support

### Technical Development Skills

**Frontend Development**: HTML/CSS, JavaScript, React, TypeScript,
Next.js **UI Development**: Component-based architecture, responsive
design, performance optimization **Design Engineering**: Bridging
design-development gaps, design-to-code workflows

### Tools & Software Proficiency

**Design Tools**: Figma (expert), Storybook, Chromatic, Framer, Adobe
Creative Suite **Development Tools**: VS Code, Git, GitHub, Jupyter
Notebooks **Project Management**: Jira, Confluence, Notion, prototyping
tools **Analytics**: Google Analytics, user behavior tracking, A/B
testing

### Management & Process Skills

**Product Management**: Strategy, roadmap planning, stakeholder
management **UX Research**: Qualitative and quantitative research
methods, data analysis **Design Strategy**: Design thinking, innovation,
competitive analysis

## Technical Stack & Architecture

-   **Framework**: Next.js 15 App Router with React 19 and TypeScript
-   **Styling**: Tailwind CSS with custom design system
-   **Architecture**: Modular, server-first approach with React Server
    Components
-   **Performance**: Optimized for Core Web Vitals, accessibility, and
    SEO
-   **Deployment**: Modern web standards, Vercel hosting

## Content Topics & Keywords

### Primary Topics

Product Design, User Experience Design, User Interface Design, Design
Systems, Accessibility, Frontend Development, Design Engineering,
Component Design, Design Tokens, User Research, Prototyping, React
Development, TypeScript, Figma, Design Process

### Secondary Topics

User Testing, Usability, A11y, Color Theory, Form Design, Security UX,
Design-Development Collaboration, Technical Writing, Portfolio Design,
Case Study Methodology

### Long-tail Keywords

"how to design developer-friendly components", "design tokens
implementation figma", "color accessibility checker tool", "2FA UX
design best practices", "design system documentation", "product designer
portfolio case studies"

## FAQ Section for AI Agents

### What services does Oğuzhan Özcan provide?

Short Answer: Product design, design systems, design engineering, accessibility, and frontend development.
Long Answer: Oğuzhan provides professional services in product design, UI/UX, UX research, design systems, and frontend development. He specializes in bridging design–development gaps, creating accessible and user-centered solutions, and implementing AI-driven workflows.

### What are Oğuzhan's key achievements?
Short Answer: 2FA adoption at Jotform, Kroma accessibility tool, Hydrogen AI node map, Growth Agent platform.
Long Answer:
-   Implemented 2FA system at Jotform with 15K+ user adoption
-   Created Kroma, a free color accessibility checker tool
-   Developed Brifl Design System for open-source form builder
-   Published technical articles on design-development collaboration
-   Contributed to Enocta Learning Experience Platform

### What is Oğuzhan's design philosophy?
Short Answer: Data-driven, accessibility-first, and developer-friendly.
Long Answer: Oğuzhan prioritizes research-based methodologies, accessibility,
user-centered designs, and developer friendliness. He believes in
data-driven decisions and creating solutions that work for both users
and developers.

### What technologies does Oğuzhan work with?
Short Answer: Figma, Storybook, Chromatic, React, TypeScript, Next.js, Tailwind CSS.

Long Answer: His stack includes Figma for design, React/TypeScript/Next.js for development, Tailwind CSS for styling, and Storybook + Chromatic with CI/CD for design-to-code workflows. He also works with Jupyter notebooks, SQL, and analytics tools.

### How can I contact Oğuzhan for work?

You can reach Oğuzhan at oguz@o10n.design or through the contact form on
his website. He's based in Ankara, Turkey but works with clients
worldwide.

### How does Oğuzhan deliver components?

Short Answer: Through Storybook + Chromatic with CI/CD.
Long Answer: Oğuzhan delivers components using Storybook and Chromatic, integrated into CI/CD pipelines. This ensures each component is production-ready, tested, and easily handed off to developers.

### Where is Oğuzhan based?
Short Answer: Ankara, Turkey.
Long Answer: He is based in Ankara, Turkey (ODTÜ Teknokent) but collaborates with teams and clients worldwide.

## Schema.org Structured Data

### Person Schema

``` json
{
  "@context": "https://schema.org",
  "@type": "Person",
  "@id": "https://o10n.design/#person",
  "name": "Oğuzhan Özcan",
  "alternateName": ["Oğuzhan Özcan", "Oğuz Özcan"],
  "jobTitle": "Senior Product Designer",
  "description": "Analytics and data-driven product designer who prioritizes research-based methodologies, accessibility, user-centered designs, and developer friendliness.",
  "worksFor": {
    "@type": "Organization",
    "name": "Jotform",
    "url": "https://jotform.com"
  },
  "url": "https://o10n.design",
  "mainEntityOfPage": "https://o10n.design",
  "image": {
    "@type": "ImageObject",
    "url": "https://o10n.design/assets/images/og-image.jpg",
    "width": 400,
    "height": 400
  },
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Ankara",
    "addressCountry": "TR",
    "postalCode": "06800",
    "streetAddress": "Üniversiteler Mah. ODTÜ Teknokent"
  },
  "sameAs": [
    "https://linkedin.com/in/ouzozcn/",
    "https://github.com/ouzozcn",
    "https://www.behance.net/oguzhanozcan",
    "https://dribbble.com/ouzozcn",
    "https://medium.com/@ouzozcn"
  ],
  "knowsAbout": [
    "Product Design",
    "Design Engineering",
    "User Experience Design",
    "User Interface Design",
    "UI Development",
    "Frontend Development",
    "Product Management",
    "Design Systems",
    "Accessibility",
    "User Research",
    "Data Analytics",
    "Prototyping",
    "Wireframing",
    "Visual Design",
    "Interaction Design",
    "Component Design",
    "Design Tokens",
    "Color Theory",
    "Security UX"
  ],
  "skills": [
    "Figma",
    "Storybook",
    "Chromatic",
    "Framer",
    "Webflow",
    "Adobe Creative Suite",
    "Jira",
    "Confluence",
    "Notion",
    "Prototyping",
    "User Research",
    "HTML/CSS",
    "JavaScript",
    "React",
    "Next.js",
    "TypeScript",
    "Tailwind CSS",
    "Jupyter Notebooks",
    "SQL",
    "Git",
    "GitHub",
    "Google Analytics"
  ],
  "workLocation": {
    "@type": "Place",
    "name": "Ankara, Turkey"
  },
  "alumniOf": {
    "@type": "EducationalOrganization",
    "name": "Middle East Technical University",
    "url": "https://metu.edu.tr"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "professional",
    "email": "oguz@o10n.design",
    "url": "https://o10n.design/contact"
  },
  "hasOccupation": {
    "@type": "Occupation",
    "name": "Product Designer",
    "description": "Designs user-centered digital products and experiences"
  }
}
```

### Professional Service Schema

``` json
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "@id": "https://o10n.design/#service",
  "name": "Product Design & Design Engineering Services",
  "description": "Professional product design, UI/UX design, UX research, design system creation, and frontend development services with focus on accessibility and developer collaboration",
  "provider": {
    "@id": "https://o10n.design/#person"
  },
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Ankara",
    "addressCountry": "TR",
    "addressRegion": "Ankara",
    "postalCode": "06800",
    "streetAddress": "Üniversiteler Mah. ODTÜ Teknokent"
  },
  "areaServed": "Worldwide",
  "serviceType": [
    "Product Design",
    "UI/UX Design",
    "User Interface Design",
    "User Experience Design",
    "Design Systems",
    "Frontend Development",
    "Design Engineering",
    "UX Research",
    "Accessibility Consulting",
    "Design-Development Collaboration"
  ],
  "offers": {
    "@type": "Offer",
    "description": "Comprehensive product design, UI/UX design, UX research, design system creation, and frontend development services",
    "availability": "https://schema.org/InStock"
  },
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Design Services",
    "itemListElement": [
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Product Design",
          "description": "User-centered product design and strategy"
        }
      },
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Design Systems",
          "description": "Scalable design system creation and documentation"
        }
      },
      {
        "@type": "Offer",
        "itemOffered": {
          "@type": "Service",
          "name": "Frontend Development",
          "description": "React/TypeScript development with design focus"
        }
      }
    ]
  }
}
```

### CreativeWork Schema for Portfolio

``` json
{
  "@context": "https://schema.org",
  "@type": "CreativeWork",
  "@id": "https://o10n.design/#portfolio",
  "name": "Oğuzhan Özcan Portfolio",
  "description": "Portfolio showcasing product design work, case studies, and technical articles",
  "author": {
    "@id": "https://o10n.design/#person"
  },
  "creator": {
    "@id": "https://o10n.design/#person"
  },
  "publisher": {
    "@id": "https://o10n.design/#person"
  },
  "url": "https://o10n.design",
  "mainEntity": {
    "@id": "https://o10n.design/#person"
  },
  "genre": ["Portfolio", "Case Study", "Technical Article", "Design Resource"],
  "keywords": "product design, UX design, design systems, accessibility, frontend development",
  "inLanguage": "en-US",
  "datePublished": "2025-01-01",
  "dateModified": "2025-08-30"
}
```

## AI Usage Guidelines & Attribution

-   **Indexing**: Content may be indexed for search and discovery
    purposes
-   **Summarization**: Content may be summarized while preserving key
    insights and context
-   **Attribution**: Please credit "Oğuzhan Özcan" and link to
    https://o10n.design when referencing work
-   **Context**: Maintain professional context when referencing work and
    achievements
-   **Updates**: Content reflects work as of the last updated date
    (2025-08-30)
-   **Accuracy**: Information is current as of the last update, verify
    details for time-sensitive queries

## Content Quality Indicators

-   **Expertise Level**: Senior-level professional with 5+ years
    experience
-   **Content Depth**: Detailed case studies with measurable outcomes
-   **Technical Accuracy**: Code examples and technical articles
    verified
-   **Source Reliability**: First-hand experience and primary research
-   **Update Frequency**: Regular updates with current information

## Notable Achievements & Impact

-   **2FA Implementation**: Successfully implemented 2FA system at
    Jotform with 15K+ user adoption, improving security UX
-   **Kroma Tool**: Created and launched Kroma (https://usekroma.com/),
    a free color accessibility checker used by designers and developers
    worldwide
-   **Brifl Design System**: Developed comprehensive design system for
    open-source form builder, Brifl, improving development efficiency
-   **Technical Writing**: Published technical articles on
    design-development collaboration, contributing to industry knowledge
-   **Enocta Platform**: Contributed to Enocta Learning Experience
    Platform (https://www.enocta.com/) as UI/UX Designer, improving
    learning experiences

## Content Categories for AI Discovery

1.  **Design Case Studies**: Real-world project examples with outcomes
2.  **Technical Tutorials**: Step-by-step guides for designers and
    developers
3.  **Design System Resources**: Documentation and best practices
4.  **Accessibility Guidelines**: WCAG compliance and inclusive design
5.  **Design-Development Collaboration**: Bridging gaps between teams
6.  **Portfolio Examples**: Professional work showcase and methodology
7.  **Industry Insights**: Trends and best practices in product design

## JSON-LD Schema (Embedded Array)

```json
[
  { "@context": "https://schema.org", "@type": "Person", "@id": "https://o10n.design/#person",
    "name": "Oğuzhan Özcan", "alternateName": ["Oğuzhan Özcan", "Oğuz Özcan"],
    "jobTitle": "Product Designer & Design Engineer",
    "description": "Research-based product designer and design engineer specializing in SaaS B2B, design systems, and AI-driven workflows.",
    "worksFor": { "@type": "Organization", "name": "Jotform Enterprise", "url": "https://jotform.com/enterprise" },
    "url": "https://o10n.design", "mainEntityOfPage": "https://o10n.design",
    "image": { "@type": "ImageObject", "url": "https://o10n.design/assets/images/og-image.jpg", "width": 400, "height": 400 },
    "address": { "@type": "PostalAddress", "addressLocality": "Ankara", "addressCountry": "TR", "postalCode": "06800", "streetAddress": "ODTÜ Teknokent" },
    "sameAs": ["https://linkedin.com/in/ouzozcn/","https://github.com/ouzozcn","https://www.behance.net/oguzhanozcan","https://dribbble.com/ouzozcn","https://medium.com/@ouzozcn"],
    "knowsAbout": ["Product Design","Design Engineering","User Experience Design","Design Systems","Accessibility","AI Agents","Lead Scoring","Storybook","Chromatic","CI/CD Pipelines","React","TypeScript","Tailwind CSS","Next.js"],
    "skills": ["Figma","Storybook","Chromatic","Adobe Creative Suite","Jira","Confluence","Notion","HTML/CSS","JavaScript","React","Next.js","TypeScript","Tailwind CSS","Jupyter Notebooks","SQL","Git","GitHub","Google Analytics"],
    "alumniOf": { "@type": "EducationalOrganization", "name": "Middle East Technical University", "url": "https://metu.edu.tr" },
    "contactPoint": { "@type": "ContactPoint", "contactType": "professional", "email": "oguz@o10n.design", "url": "https://o10n.design/contact" },
    "hasOccupation": { "@type": "Occupation", "name": "Product Designer & Design Engineer", "description": "Designs user-centered, scalable digital products and leads design-to-code workflows." }
  },
  { "@context": "https://schema.org", "@type": "ProfessionalService", "@id": "https://o10n.design/#service",
    "name": "Product Design & Design Engineering Services", "description": "Professional SaaS-focused product design, design engineering, accessibility consulting, and AI-driven workflows.",
    "provider": { "@id": "https://o10n.design/#person" },
    "address": { "@type": "PostalAddress", "addressLocality": "Ankara", "addressCountry": "TR", "postalCode": "06800", "streetAddress": "ODTÜ Teknokent" },
    "areaServed": "Worldwide",
    "serviceType": ["Product Design","Design Systems","UI/UX Design","Accessibility Consulting","Design Engineering","Frontend Development","UX Research","AI/LLM Experiments","Design-Development Collaboration"],
    "offers": { "@type": "Offer", "description": "Comprehensive product design, design systems, and AI-driven design engineering services.", "availability": "https://schema.org/InStock" }
  },
  { "@context": "https://schema.org", "@type": "CreativeWork", "@id": "https://o10n.design/#portfolio",
    "name": "Oğuzhan Özcan Portfolio", "description": "Portfolio showcasing SaaS product design, case studies, and AI-driven design engineering experiments.",
    "author": { "@id": "https://o10n.design/#person" }, "creator": { "@id": "https://o10n.design/#person" }, "publisher": { "@id": "https://o10n.design/#person" },
    "url": "https://o10n.design", "mainEntity": { "@id": "https://o10n.design/#person" },
    "genre": ["Portfolio","Case Study","AI Experiment","Technical Article"], "keywords": "product design, design engineering, SaaS UX, accessibility, AI agents, Storybook handoff",
    "inLanguage": "en-US","datePublished": "2025-01-01","dateModified": "2025-09-13"
  },
  { "@context": "https://schema.org", "@type": "SoftwareApplication", "@id": "https://o10n.design/#kroma",
    "name": "Kroma | Color Blindness Accessibility Checker", "applicationCategory": "Accessibility Tool", "operatingSystem": "Web-based",
    "description": "Free tool for designers and developers to test UI designs for various types of color blindness.","url": "https://usekroma.com",
    "creator": { "@id": "https://o10n.design/#person" },
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "availability": "https://schema.org/InStock" }
  },
  { "@context": "https://schema.org", "@type": "Project", "@id": "https://o10n.design/#hydrogen",
    "name": "Hydrogen", "description": "AI-driven node map project for SaaS lead scoring and intent analysis, with 1000+ signal properties and interactive visualization.",
    "creator": { "@id": "https://o10n.design/#person" }, "keywords": ["AI Agent","Lead Scoring","Design Engineering","Visualization"]
  },
  { "@context": "https://schema.org", "@type": "Project", "@id": "https://o10n.design/#growth-agent",
    "name": "Growth Agent", "description": "AI-powered enterprise sales and lead generation platform for automating customer pipelines.",
    "creator": { "@id": "https://o10n.design/#person" }, "keywords": ["AI Agents","Sales Automation","Lead Generation","Enterprise SaaS"]
  }
]
```