glitch

Glitch is a code editor and community for sharing and remixing web apps.

As the first Design Engineer at Glitch, I owned end-to-end design for all features on the Glitch community site, designing and building foundational features like user collections, search, hompage redesign(s), and user onboarding.

Below is a small sampling of UX design, front-end engineering, and illustration work I did at Glitch.

project avatar creator

I developed a design system of layers SVG shapes to programmatically generate unique project avatars. The shapes were initially created in Sketch, then layered programmatically; I collaborated with Edwin Morris, the Design Engineer for the Glitch Editor, on implementing the color generator.

homepage redesign

In my first month at Glitch, I designed and executed the first usability study on the product.

We recruited 7 programmers from NYC and ran in-person individual sessions, asking them what their impressions of Glitch were from the homepage and observing how they got started coding a project.

The usability study revealed that the homepage was not clearly communicating what the product was. Users were unsure of whether the product was for sharing apps, rather than building their own, and the text description of the product at the top of the page was lost among the featured content.

Based on this feedback, I redesigned the homepage to provide clearer messaging to new users, while also enabling fresh editorial content from the marketing team to be highlighted (in the example below, a Mythbusters Jr. collaboration).

The initial homepage before the redesign.

Some initial illustration directions.

starter apps

Alongside my main job of designing the site, I loved building apps using Glitch to inspire new creators. Many of my starter apps were some of the most popular and remixed on the site. Bongo Cat has thousands of awesome remixes!

Below are some of the 20+ starter apps I built that show off how to build both static + full-stack Node apps, connect to APIs like Airtable and Google Maps, communicate with hardware using Web Bluetooth, and more.

animated doodles

The Glitch aesthetic was designed to be friendly and playful – and a bit weird! I created many animated SVGs to add to this feel.