01CSS / SCSS · Motion system
Open-source Animation Library
A reusable motion library with documented utility classes, an interactive demo, and more than 100 GitHub stars.
01 / Design systems
Designing thesystem.Shipping theexperience.
Product Designer and
Design Engineer in Vancouver.
I turn complex SaaS workflows into clear, production-ready products—shaping the experience, building reusable systems, and staying close to implementation.
Product UX · Design systems · Prototyping · Frontend implementation
Available for product design and design engineering roles
Later Product Design SystemLater
A shared interface language connecting product guidance, reusable foundations, component anatomy, and shipped UI.
Senior Product Designer
- Problem
- A growing product needed shared interface decisions that could remain coherent across teams and workflows.
- Decision
- Document shared foundations and component guidance, then connect them to product examples.
- Outcome
- A public product guide documenting shared foundations, variables, and component anatomy.
Simply Stakeholders Design SystemSimply Stakeholders
A Figma system connecting visual foundations, reusable objects, component states, and page patterns for a complex stakeholder-management product.
Product design · Design systems
- Problem
- A broad interface library needed consistent patterns and a clearer way to find decisions across data-heavy workflows.
- Decision
- Structure the library in layers, then document variants, interaction states, and the page patterns built from them.
- Outcome
- A navigable reference connecting foundations and reusable components to product-level application.
02 / Selected product work
Complex workflows,
made clear.
Four complementary product stories spanning visual builders, data-heavy systems, collaboration workflows, and a cross-platform marketplace.
02A / More product work
Connected surfaces,
distinct use cases.
Two concise stories add breadth without repeating the four featured cases: Later’s content lifecycle and its Instagram-comment workflow.
Content Library + UGCLater
Content Workflows
Connected content discovery, review, approval, organization, and reuse across Later’s collection and Media Library surfaces.
View concise case
Instagram comment managementLater
Conversations
A desktop workflow for reviewing and replying to Instagram comments while keeping post and commenter context visible.
View concise case03 / Built in code
Interaction ideas,
tested at browser fidelity.
I use code to test behavior, build reusable interface patterns, and close the gap between design intent and implementation quality.
02CodePen · Browser experiments
Interaction Archive
Selected studies in interface motion, component behavior, loading states, and scroll interaction.
03React · TypeScript · AI-assisted development
Portfolio Design OS
A responsive portfolio implemented as an interactive system with reusable components, motion preferences, and accessible states.
04 / Next opportunity
Let’s design what
comes next.
Available for product design and design engineering opportunities with teams building complex, useful software.