Next Project

Case Study

Building CodeRabbitโ€™s design system, one change at a time.

Context

CodeRabbitโ€™s product spans code review, triage, automation, team settings, and onboarding. A shared design system helps these workflows feel consistent and connected.

Description

From September to October 2026, I contributed 21 design-system updates across foundational components and product workflows. This timeline follows those changes, from buttons, banners, icons, and navigation through tables, Triage rules, coachmarks, and empty states. Each milestone links to its pull request, with verified before-and-after comparisons where available.

Role

Senior Product Designer

Timeline

Q3 26' - Current

Company

Stack

Claude

VS Code

Weavy

Impact (Dogfooding)

34%^ Agentic Accuracy & Design Alignment

Case Study

Building CodeRabbitโ€™s design system, one change at a time.

Context

CodeRabbitโ€™s product spans code review, triage, automation, team settings, and onboarding. A shared design system helps these workflows feel consistent and connected.

Description

From September to October 2026, I contributed 21 design-system updates across foundational components and product workflows. This timeline follows those changes, from buttons, banners, icons, and navigation through tables, Triage rules, coachmarks, and empty states. Each milestone links to its pull request, with verified before-and-after comparisons where available.

Role

Senior Product Designer

Timeline

Q3 26' - Current

Company

Stack

Claude

VS Code

Weavy

Impact (Dogfooding)

34%^ Agentic Accuracy & Design Alignment

Case Study

Building CodeRabbitโ€™s design system, one change at a time.

Context

CodeRabbitโ€™s product spans code review, triage, automation, team settings, and onboarding. A shared design system helps these workflows feel consistent and connected.

Description

From September to October 2026, I contributed 21 design-system updates across foundational components and product workflows. This timeline follows those changes, from buttons, banners, icons, and navigation through tables, Triage rules, coachmarks, and empty states. Each milestone links to its pull request, with verified before-and-after comparisons where available.

Role

Senior Product Designer

Timeline

Q3 26' - Current

Company

Stack

Claude

VS Code

Weavy

Impact (Dogfooding)

34%^ Agentic Accuracy & Design Alignment

SAN FRANCISCO, CA

COPYRIGHT JAYSon.STUDIO 2025

SEP 2, 2026

Button reference

Establish a shared button reference for consistent actions across the product.

BEFORE

AFTER

SEP 15, 2026

Banner

Introduce a reusable Banner for product messaging.

SEP 15, 2026

Filter controls

Bring shared filter controls into the system.

SEP 15, 2026

Navigation icons

Align navigation iconography across product surfaces.

SEP 16, 2026

Task navigation

Extend navigation patterns to task workflows.

BEFORE

AFTER

SEP 17, 2026

Stacked Banner

Add a stacked Banner treatment for layered messages.

BEFORE

AFTER

SEP 21, 2026

Banner background

Refine the Banner background treatment.

BEFORE

AFTER

SEP 22, 2026

Team Management

Apply shared settings patterns to Team Management.

BEFORE

AFTER

SEP 23, 2026

Selected navigation

Clarify the selected state in navigation.

BEFORE

AFTER

SEP 24, 2026

Automation rule builder

Bring system patterns into the automation rule builder.

BEFORE

AFTER

SEP 25, 2026

Triage templates & Slack

Connect Triage rule templates with a Slack action.

BEFORE

AFTER

SEP 25, 2026

Icons catalog

Organize iconography into a shared catalog.

BEFORE

AFTER

SEP 25, 2026

Data Table pagination

Extend the Data Table with pagination controls.

BEFORE

AFTER

SEP 27, 2026

Triage Rules modal

Frame Triage Rules in a focused modal workflow.

BEFORE

AFTER

SEP 29, 2026

Initiative filter

Add an Initiative filter to narrow workflow context.

BEFORE

AFTER

OCT 1, 2026

Team mapping

Introduce team mapping within the connected workflow.

BEFORE

AFTER

OCT 8, 2026

Triage rule editor

Develop the Triage rule editor as a dedicated editing surface.

BEFORE

AFTER

OCT 9, 2026

Motion reference

Capture a motion reference for consistent interaction behavior.

BEFORE

AFTER

OCT 12, 2026

Dialog & Coachmark

Expand system guidance with Dialog and Coachmark patterns.

BEFORE

AFTER

OCT 14, 2026

Onboarding coachmark

Apply coachmarks to the onboarding experience.

BEFORE

AFTER

OCT 15, 2026

Caught-up empty state

Close the workflow with a clear caught-up empty state.

BEFORE

AFTER

01 / 21 ยท CHANGES

fix(ui): simplify Triage caught-up empty state

Close the workflow with a clear caught-up empty state.

View PR #64700
Caught-up empty state โ€” after

fix(ui): simplify Triage caught-up empty state

#64700 ยท Jayson-Studio
BeforeAfter