Senior Product Designer
Design System, Product Design, UI/UX Design, Figma, Claude, Components, Theming, Documentation, Iconography
Design System Components
As part of eBay’s Design System team, I designed reusable components in Figma for a library of 65+ components. Each was built with defined states and variants, then documented in Playbook with clear usage guidance. Accessibility was part of that process: I designed with color contrast, keyboard focus states, and screen reader behavior in mind, and documented accessibility expectations so teams could implement components inclusively. I tested every component with Front End engineering to confirm it held up in practice, creating consistent building blocks that teams could adopt without starting from scratch.
I co-hosted Design System Office Hours, six 30-minute sessions a week, where teams could troubleshoot problems,
explore ideas, and leave with clear next steps.
explore ideas, and leave with clear next steps.
I used AI tools such as Claude to draft documentation, review accessibility considerations, and synthesize
Office Hours feedback, which freed up time for higher-impact system work.
Office Hours feedback, which freed up time for higher-impact system work.
The goal: Give teams a reliable library of accessible, well-documented components they can adopt with confidence, and the support to use them well.
Component Update Examples
Alert Notice: adding a warning variant
I added a warning variant to Alert Notice, testing it against accessibility requirements and checking color contrast.
This also meant building new color and semantic tokens into our color system, so the variant could be themed
and reusedrather than being a one-off.
I added a warning variant to Alert Notice, testing it against accessibility requirements and checking color contrast.
This also meant building new color and semantic tokens into our color system, so the variant could be themed
and reusedrather than being a one-off.
Tourtip: adding a sequential update
I added sequencing to Tourtip so teams can guide users through multiple steps. The update required alignment between
web and native teams to make sure it was feasible in dev across platforms.
I added sequencing to Tourtip so teams can guide users through multiple steps. The update required alignment between
web and native teams to make sure it was feasible in dev across platforms.
Badge: refining number display
I updated Badge so one- and two-digit numbers sit in a circle and three-digit numbers sit in a squircle.
We also aligned on a maximum: counts above 99 show as “99+” instead of the full number.
I updated Badge so one- and two-digit numbers sit in a circle and three-digit numbers sit in a squircle.
We also aligned on a maximum: counts above 99 show as “99+” instead of the full number.
The goal: Evolve components in response to real team needs, so they stay accessible, consistent, and feasible to build across web and native.
Playbook: From Quarterly Projects to Real-Time Updates
When I took over Playbook updates, the team focused on large initiatives that took four to six weeks to ship. Design teams told us they wanted more guidance on how to use components and saw gaps in the documentation. I shifted our approach to quick, nimble updates. We kept running the larger initiatives, and the new format let us respond to feedback in real time.
Example: CTA buttons. Teams were confused about how to use our CTA buttons, and we saw designs departing from our semantic color tokens. Within a day of that feedback, I updated the CTA button page in Playbook with specific guidance on color usage.
A global change log. We also added a global change log so updates are tracked as they happen.
The goal: Address internal design team feedback in real time, so the documentation stays useful to the people building with it.
Color Token System
eBay’s color token system separates core tokens from semantic tokens. Core tokens hold the base color values, while semantic tokens assign those values to specific roles in the interface. This two-tier structure lets product design and code reference color by purpose rather than by hex value, which keeps usage consistent across products and makes the system themeable. A single role-based token can resolve to different values in different themes without anyone redesigning individual screens.
I helped refine the color token documentation in eBay’s Playbook, writing guidance on when to use each tier and reformatting the page for clarity. Working closely with Design Technology, I implemented tabs and dropdown menus so users could scan through different tokens. This enabled designers and engineers to explore the system and apply color with confidence.
The goal: Make color meaningful and adaptable: use semantic tokens so teams apply color by purpose, and themes can change the look of the system without redesigning screens.
Iconography
The work: I designed icons for eBay’s icon library, which spans categories from actions and navigation to shipping, status, and photo. Each icon followed the system’s rules for stroke width, corner radius, and color tokens, so every new icon matched the
existing set and worked across themes. I then uploaded finished icons to GitHub and opened pull requests so they could be reviewed and merged into the library. I tracked the work in Jira and GitHub, where I managed dev tickets that kept designers
and engineers aligned from request to release.
The goal: Keep the icon library consistent and on-brand as it grows, so teams can easily find and use the right icon at any size, theme, or platform. Make adding new icons fast and repeatable, without losing quality.
existing set and worked across themes. I then uploaded finished icons to GitHub and opened pull requests so they could be reviewed and merged into the library. I tracked the work in Jira and GitHub, where I managed dev tickets that kept designers
and engineers aligned from request to release.
The goal: Keep the icon library consistent and on-brand as it grows, so teams can easily find and use the right icon at any size, theme, or platform. Make adding new icons fast and repeatable, without losing quality.
Streamlining icon creation with a plugin
I co-owned this workstream with a partner on the Design Technology team. Icon creation is nuanced, and the process
had grown to 12 steps. Exporting meant taking the file into Visual Studio Code and adjusting the code by hand for dev,
and the work was spread across four separate programs.
had grown to 12 steps. Exporting meant taking the file into Visual Studio Code and adjusting the code by hand for dev,
and the work was spread across four separate programs.
We built a plugin that brings the full workflow into one place:
Export: SVGs and PNGs export with the correct code already embedded, so there is no manual cleanup in Visual Studio Code.
Pull requests: The plugin creates GitHub pull requests directly, so the dev team can build the icons.
Status tracking: New, updated, and deprecated icons are separated, so it’s clear what changed.
Toggle overlay: A visual overlay lets you compare icon iterations side by side.
The goal: The plugin cut the time to create each icon in half, and any team member can now step in when needed.
eBay Live Icon Case Study
eBay Live lets shoppers buy and bid in real time through livestreamed auctions. As the feature grew, its icon in the bottom navigation wasn’t keeping up. It didn’t clearly say “live,” and it felt out of balance with the rest of the nav. Working with a fellow designer on eBay’s Design Systems team, I explored ways to redesign it, from refining the broadcast metaphor to testing it across the product, landing on a simpler mark that fits the system and extends into motion.
The goal: Create an eBay Live icon that’s instantly recognizable, feels at home in the bottom nav, and is flexible enough to carry the feature across the product, including motion.
