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

I was the first Design Engineer hired at Glitch and owned end-to-end design for all features on the Glitch community site, doing everything from front-end engineering (React), UX/UI design and prototyping, user research, product specs, and illustration.

During my time at Glitch, I designed many of the foundational features we successfully launched:

I also contributed to many other cross-functional tasks like interviewing and hiring 8 other front-end engineers and designers, facilitating design and code reviews, coordinating with external illustrators and contractors, building internal design tooling – all the things that happen simultaneously when a startup doubles in size.

Here's a small sampling of UX and engineering 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; I worked 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 10 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.
The redesigned homepage.
Responsive layout of the homepage

onboarding experience

We wanted to welcome new users and help them get started in the code editor. This onboarding flow was designed to gradually scaffold the experience by suggesting projects to remix. It appears on a signed-in-user's homepage and user profile.

New users are invited to create their first project:

The onboarding banner for new users with subtle waving animation

While users with less than three projects are given suggestions for starter apps to remix:

Onboarding banner shifts to suggesting project ideas

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.

Build your own custom app by editing a single JSON file:

Connect to hardware / hardware related apps

Play with CSS animations

Manipulate SVGs

Immersive experiences with Google Street View

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.

image/svg+xml Created with Sketch. Created with Sketch. Created with Sketch. A computer with a hand giving a welcoming wave