My Portfolio

−

□

✕

FileEditViewHelp

The Crit

Daily Ticker

Education

Kipple Digital

Motion Graphics.mov

Brand & Design Systems

C:\My Documents\Case Studies

−

□

✕

FileEditViewHelp

The Crit

Daily Ticker

Education

Kipple Digital

Motion Graphics.mov

Brand & Design Systems

C:\The Lab - Creative Experiments

−

□

✕

FileEditViewHelp

⚡ Creative Tools

AI Assistant

Pixel Lab

90s Web Generator

Sketchbook

🎮 Just for Fun

NikNotes

Minesweeper

Tic-Tac-Toe

Calculator

My Mix Tape

Guestbook

Solitaire

passwords.txt

Recycle Bin - Idea Graveyard

−

□

✕

FileEditViewHelp

bad_logo.psd

startup_ideas.txt

comic_sans.doc

web3_pivot.txt

i_hate_papyrus.gif

are_you-ok.gif

Social Hub

−

□

✕

FileEditViewHelp

Email Me

@nikkilately

Calculator

−

□

✕

0

Tip of the Day

✕

Did you know...

Nikki builds design systems with 50+ components that teams actually use.

Show tips at startup

Resume.doc - WordPad

−

□

✕

FileEditViewInsertFormatHelp

NIKKI KIPPLE

Design Engineer • Educator • Builder

San Francisco, CA • hello@nikkikipple.com • linkedin.com/in/nikkikipple • nikkikipple.com

Summary

Product Design Lead and educator with 10+ years building products, programs, and teams at the intersection of UX, education, and the web. Experienced in leading 0→2 product work, mentoring designers into their first roles, and translating complex problems into simple, thoughtful experiences.

Experience

Instructional Designer & Faculty | De Anza College | 2019 - Present

Leads 0→2 product work across research, interaction design, and implementation details
Mentors and teaches designers, translating real-world practice into clear, supportive guidance
Builds teams, teaches UX design curriculum, and shapes how students learn design in higher education

Founder & Product Designer | The Crit | 2024 - Present

Designed and built an AI-powered design feedback platform from 0→1
Built a critique framework that delivers honest feedback in 2-3 minutes, plus 50+ resource pages designers actually use
Shipped full-stack product using modern design systems and thoughtful UX patterns

Senior Product Designer | Foothill-De Anza CCD | 2017 - 2019

Led design for Learning Management System (LMS) serving 40,000+ students across two colleges
Established design systems and accessibility standards for educational technology
Collaborated with engineering to ship complex features under tight deadlines

Skills

Product Design: 0→2 product development, design systems, user research, interaction design, prototyping, accessibility
Development: HTML/CSS, React, TypeScript, Node.js, modern web development, creative coding
Leadership: Mentorship, teaching, curriculum development, cross-functional collaboration, agile methodologies

Education

M.A. Instructional Design & Technology | San Francisco State University

B.A. Design Media Arts | University of California, Los Angeles

Display Properties

−

□

✕

Wallpaper

Select an option to change the desktop background:

Guestbook

−

□

✕

Sign My Guestbook!

WebMaster: Thanks for visiting! 1995-08-24

Tic-Tac-Toe

−

□

✕

Player X's Turn

Solitaire

−

□

✕

GameHelp

🃏 Solitaire

Coming Soon!

Classic Klondike Solitaire will be available here.

About_Me.txt

−

□

✕

FileEditViewInsertFormatHelp

╔═══════════════════════════════════════════════════════════════╗
║                         ABOUT_ME.TXT                           ║
║                    Last Modified: 2026                        ║
╚═══════════════════════════════════════════════════════════════╝

👋 HI, I'M NIKKI KIPPLE



Design Engineer & Educator
📍 San Francisco, CA
📋 THE TL;DR
I design it, build it, ship it, and teach others how.

I'm a design engineer — I don't hand off Figma files and hope for
the best. I design systems, write the React, ship the product, and
then walk into a classroom and teach the next generation how to do
the same thing. No handoff drama. No "make it pop." Just products
that work and students who can build them.
🛠️  WHAT I DO✓ Design Engineering — systems + code
  (Design systems in Figma, components in React, shipped to production)
✓ Product Building — shipped, real products
  (The Crit, Daily Ticker — built from 0 to revenue, not just prototypes)
✓ Education — teaching design engineering
  (Faculty at Foothill College + Academy of Art University)
✓ AI-Powered Design — building with AI as a force multiplier
  (Using AI to accelerate design workflows, not replace designers)
💼 CURRENTLY→ Teaching design engineering at Foothill College + Academy of Art
→ Building The Crit — AI-powered design feedback that's actually useful
→ Exploring AI × design workflows (the future is collaborative)
→ Shipping code, not just wireframes
🎯 HOW I WORK
I don't separate design from code — they're the same craft. When
I'm designing a component in Figma, I'm already writing the React
in my head. When I'm debugging a layout, I'm thinking about the
user who'll never notice it works perfectly.

The same obsession with clarity that makes me a better engineer
makes me a better teacher. I don't give ambiguous feedback. I show
students exactly how to build it, then step back and let them ship.

My arc: designer → builder → design engineer → educator. Each
stage made the next one inevitable.
🖥️ ABOUT THIS PORTFOLIO
This portfolio IS a product — a desktop OS built in the browser
with React, TypeScript, and Framer Motion. Draggable windows,
working apps, real games, AI integrations, and easter eggs.

It's not a gimmick. It's a design engineering showcase. Every
window, every interaction, every animation was designed and coded
by hand. The same way I build real products.
✨ THINGS THAT ARE TRUE→ I shipped two SaaS products from zero — The Crit and Daily Ticker
→ I teach design engineering to college students and working professionals
→ My first website had a <marquee> tag. This one has Framer Motion.
→ I've debugged more CSS at 2 AM than I care to admit (and enjoyed it)
→ I believe the best design engineers are the ones who can teach what they know
🤝 WANT TO WORK TOGETHER?📧 Email: hello@nikkikipple.com
💼 LinkedIn: linkedin.com/in/nikkikipple
🌐 Website: nikkikipple.com
💡 PRO TIP
Explore the desktop - there are easter eggs hidden everywhere!
Try clicking on things, opening apps, and see what you discover.

Contact.txt

−

□

✕

FileEditViewInsertFormatHelp

CONTACT FORM

I'm always open to new opportunities and collaborations.

Name:

Email:

Organization: (optional)

Inquiry Type:

Message:

Or reach out directly:

Email: hello@nikkikipple.com

LinkedIn: linkedin.com/in/nikkikipple

America Online

−

✕

Screen Name:

Password:

90s Web Generator

−

□

✕

Connecting...

NikNotes

−

□

✕

FileEditViewInsertFormatHelp

Paint - Sketchbook

−

□

✕

Doom II

−

□

✕

AI Assistant

−

□

✕

Minesweeper

−

□

✕

🚩 10

⏱️ 0

Let's play! Click a square to start.

Image Viewer

−

□

✕

Pixel Lab

−

□

✕

FileEditViewPresetsHelp

▼ Upload Image

📁

Drop image here

or

Also supports paste (⌘V / Ctrl+V)

▼ Presets

Win98

8px • 4 levels

Avatar

6px • 5 levels

Vaporwave

10px • 4 levels

Mono

6px • 3 levels

▼ Pixel Settings

Pixel Size

8 px

Color Steps

4 levels per channel

▼ Color Palette

▼ Grid & Display

Show Grid

Grid Opacity

0.35

Background

Grid Color

Ready

—

Media Player

−

□

✕

Loading Media Player...

🔊

The Crit - Case Study

−

□

✕

FileEditViewHelp

Daily Ticker - Case Study

−

□

✕

FileEditViewHelp

Education - Case Study

−

□

✕

FileEditViewHelp

Kipple Digital - Case Study

−

□

✕

FileEditViewHelp

Motion Graphics - Case Study

−

□

✕

FileEditViewHelp

Brand & Design Systems - Case Study

−

□

✕

FileEditViewHelp