Skip to main content
Portrait photo of Kyle Bavender. He’s looking sharp!

👋 Hello there!I’m Kyle Bavender.

I am a Front-end Developer working at Studio Science. I have been building custom user interfaces, design systems, storytelling animations, and interactive experiences for companies large and small the better part of a decade.

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

Studio Science

November 2019 - present

With Studio Science I have built custom marketing sites, developed interactive experiences, engineered modular admin systems, developed style guides, integrated with APIs, and much more. I am fortunate to get to regularly empower companies and people in my work.

I have also created complex storytelling animations, conducted web performance audits, led client presentations, and more. Increasingly I am leveraging serverless platforms and reactive, stateful Javascript to enhance everything from feedback loops, to code sustainability, to user experience.

  • Genesys Product Tours

    Interactive Tours Application + Builder


    • 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
    • (WIP 2021-2022) Extending functionality with new features at Genesys’ request for continued work
    See a Product Tour
    See under the "Make your agents your customers’ heroes" heading
  • Bloomerang Pricing Calculator

    Reactive JavaScript Widget


    • 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 Calculator
    Most of the site was developed by others on our team; I fully owned the Pricing Calculator project.
  • Genesys Empathy Assessment

    Interactive Assessment + Report Application


    • 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

    WordPress-powered Marketing Site


    • 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

    Front-end Components & Module Library


    • 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 Site
    The development of this site was done by the Code42 team, using the markup, styles, layouts, and patterns that I established.
  • Searchspring

    WordPress-powered Marketing Site


    • 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

    WordPress-powered Marketing Site


    • 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 Emplify
    Emplify has been acquired and has replaced their home hero brand expression. Demo available upon request.

Rare Bird

July 2010 - November 2019

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

    Network of Subscription Box Sites


    • 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

    E-commerce Site


    • 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

Highlighted Skills

Recognizing skills lists can be a bit unnecessary at times, I am aiming to list skills that I have achieved some relative level of true mastery over. Not just “I used this once“.

In the past few years, I have been aggressively leveling up my knowledge of Javascript — particularly for reactive, stateful applications. This site has been handwritten in React + custom React Hooks using the Next.js framework.


  • Advanced CSS
  • Semantic HTML
  • Vanilla JS
  • React
  • Next.js
  • SVG
  • Web Standards
  • Web Performance
  • Lighthouse & Core Web Vitals
  • Accessibility Standards
  • WordPress Themes & Plugins
  • WP: Advanced Custom Fields
  • Serverless platforms
  • Browser Testing & Debugging


  • Interaction Design
  • UX Patterns
  • User Interface Design
  • Web Animation
  • E-commerce UI/UX
  • Design Systems
  • Design Critique


  • VS Code
  • Chrome Dev Tools
  • Terminal / CLIs
  • npm + build tools
  • git
  • Figma
  • Sketch
  • XD
  • Photoshop
  • Illustrator
  • GSAP
  • macOS

Most of the items below are attached to my interests in development, engineering, automation, and design — and have found homes in a project, or test case. Several of the items are skills & tools that I am learning through my current projects at Studio Science.

  • Single Page Applications
  • React Query
  • GraphQL
  • TypeScript
  • Software design patterns
  • Headless CMSs
  • State Machines
  • CI & CD