👋 Hello there!I’m Kyle Bavender.
I am a Senior Software Engineer, with a background in design. I have been building custom user interfaces, design systems, storytelling animations, and interactive experiences for companies large and small over a decade. I have spent the last 4 years working working at Shopify, working on the app access primitives for the core platform, the Developer Dashboard, extensibility APIs for apps, and improvements to the merchant Admin.
Between my years of development experience and design background, I have a big-picture, user-centric view of the web platform. When I work, I care about the details; I “sweat the pixels” of an interface. Accessibility, performance, and user experience are considered from the start.
Below are some recent projects that I have had the privelege of working on.
Recent Work
On to the next adventure…
After four amazing, impactful years at Shopify, I am looking for a new challenge. With the summer break, I took some time to focus on my family, before reflecting on my career and preparing for the search.
I am looking for an organization in need of an experienced engineer who can work across the product spectrum, using agentic engineering best practices, from research & design, to implementation, to checks/safeguards, to GTM & release.
Shopify
With Shopify I have had the great privelege of working primarily on Shopify’s core product & Admin, building for developers working with Shopify’s apps ecosystem and extensibility platform. Over the years, Shopify Editions have promoted features that I have worked on.
My day-to-day work has commonly involved implementing or updating UI in TypeScript React front-ends, leading projects, reviewing technical design documents, enhancing internal tools, fixing regressions, code review, pair programming, and cross-team collaboration.
From the main Shopify merchant Admin (modern TypeScript React/Preact, GraphQL), to extensibility APIs, to the new Developer Dashboard (Rails + Stimulus.js), I have built new features, components, APIs, primitives, and flows for thousands of apps to build upon and millions of merchants to experience.
More details are available on my LinkedIn profile.
Studio Science
With Studio Science, I built custom marketing sites, developed interactive experiences, engineered modular admin systems, developed style guides, integrated with APIs, and much more. I was fortunate to get to regularly empower teams and companies to focus on their vision.
I also created complex storytelling animations, conducted web performance audits, led client presentations, and more. I leveraged serverless platforms and reactive, stateful JavaScript to enhance everything from business feedback loops, to user experience, to developer experience.
Genesys Product Tours
Highlights
- Wrote a bespoke vanilla JS front-end application, including state management, back/forward history, and more
- Conceptualized & built back-end schema, fields, & controls
- Co-designed the UX flows, architecture, & interaction model
- Validated UX with a minimal web-based prototype
- Enabled the Genesys web team to create their own embeddable, customized product tours
- Genesys contracted us to add additional features in 2022
See a Product TourSee under the "Make your agents your customers’ heroes" headingBloomerang Pricing Calculator
Highlights
- Wrote using a stateful, reactive, functional JavaScript pattern
- Developed a cross-browser, truly custom range input
- Leveraged CSS Custom Properties to deliver "gliding" LERP’ed animations of the tooltip and slider thumb
- Wrote a custom container query-esque Resize Observer script for more responsive & dynamic sizing of the pricing card
- Used CSS Grid for managing multiple layouts
View the Pricing CalculatorMost of the site was developed by others on our team; I fully owned the Pricing Calculator project.Genesys Empathy Assessment
Highlights
- Developed the assessment as a reactive, stateful JS application
- Wrote dynamic data visualization for the results page/report using the Chart.js library
- Integrated with a client side PDF generation library
- Gathered report PDF and assessment data, and used a mixture of APIs to send them to different places
- Established back-end structure using custom fields for Genesys to customize questions, scoring/weighting, and more
Quorum
Highlights
- Strategized a modular-based approach to faithfully, responsively bring the design to life
- Built admin-controlled module customization systems for interweaving stylized lines, custom edge dividers, and more
- Wrote custom lazyload treatments to limit loading of certain modules until they are in/approaching the browser viewport
- Integrated Lottie animations with admin controls
- Leveraged advanced CSS layering & masking techniques
- Consulted with design team on opportunities & feasibility
Code42 Front-end Modules
Highlights
- Provided ready-to-implement front-end modules prepared for the WordPress Block Editor
- Documented all modules & variations in a visual module library, and components & elements in a style guide
- Used Eleventy (SSG) + Netlify for rapid iteration
- Collaborated with the Code42 development team to codify patterns and optimize delivery
- Built a project tracking interface using Eleventy front matter
View the Finished Code42 SiteThe development of this site was done by the Code42 team, using the markup, styles, layouts, and patterns that I established.Searchspring
Highlights
- Employed CSS Masking in a module edge divider system
- Leveraged CSS Custom Properties for relational, context-aware systems of values
- Developed a custom, flexible Tabbed Content module
- Wrote JS to enable swiping on certain modules
- Implemented the designed-by-Searchspring site according to their Adobe XD prototype & feedback
Emplify
Highlights
- Developed a complex, animated, parallax home hero brand expression
- Aided and informed design of the brand expression as well as other modules
- Built an admin-controlled system for module edge dividers
- Built all modules to be fully customizable in the admin
- Created an in-view fade-in animation system
Visit EmplifyEmplify has been acquired and has replaced their home hero brand expression. Demo available upon request.
Rare Bird
Prior to joining Studio Science, I worked at Rare Bird Inc., where I developed complex sites & experiences from scratch, built an internal front-end library, designed & developed e‑commerce experiences, and much more.
I had the pleasure of working with many clients while at Rare Bird, including Harvard Health Publications, Superman Hall of Heroes, Cub Cadet, Premier1Supplies, Intelligent Fiber Network, and Reis‑Nichols Jewelers.
Annie’s Kit Clubs
Highlights
- Developed most of the Kit Club “network” of sites
- Made a multi-site build process using Laravel Mix (Webpack)
- Created shared libraries, methods, and variables to speed up the creation of new sites
- Used Laravel Blade templates for modularizing code
- Used CSS border-image, clip-path animation, grid, calc(), injected SVGs, & more to achieve a variety of effects & styles
- Worked alongisde other developers in git
Annie’s Fiction
Highlights
- Worked with our designer to strategize & plan various information architecture and UX aspects of the site
- Designed & implemented hover, focus, interaction treatments
- Implemented e-commerce cart & checkout front-end layout, styling, and UX details
- Wrote custom JS for handling interactive interface elements
- Leveraged & extended the delightful Flickity slider library