Design Portfolio

This is my design portfolio, covering work at Google as well as side projects related to my work as an Android design advocate. I've got even more work up on Dribbble.

Firebase Console

August 2015 – Present

I'm currently a design lead and manager on the Firebase UX team, focusing on the Firebase console design system (components, spec documentation, Sketch UI kit) and other platform-level design and UX engineering projects.

Previously, I was UX lead for Firebase Remote Config, A/B Testing, the console onboarding experience, our UI prototyping system, the Firebase plugin for Android Studio, and other smaller projects.

I was previously UX lead for Firebase Remote Config, helping define the experience for an innovative new developer product.

I was also previously UX lead for Firebase A/B Testing.

I had the opportunity to design and implement a few small-scale icon animations throughout the console.

I had a chance to design a loading state, animating the Firebase logomark designed by Ali Johnson.

Muzei Live Wallpaper

September 2013 – February 2014

My philosophy for design and developer advocacy is to create big, real-world demos and use them as fodder for content creation; walking the walk gives you more credibility.

Muzei is one of the larger apps I've written that epitomizes this philosophy. I came up with the idea for the app, designed, developed, launched, and open-sourced it over the course of 4 months.

Since the original launch, I updated some of the custom visual language in the app to include material design elements.

Muzei has been installed over a million times on Google Play.

I obsess over details. Here's a screen in Muzei I'm really proud of, where the seekbars visually represent their corresponding effect. See on Dribbble

I also built a web-based archive of featured art used in the app, which actually served as the basis of some of the interactions in this portfolio.

Google I/O Android App

2010 – 2014

The Google I/O Android app is a Developer Relations-run project that serves two purposes:

  • Help Google I/O attendees and remote viewers personalize their conference agenda and explore conference content before, during, and after the event.
  • Be an excellent open-source example of Android design and development best practices

My role has primarily been lead designer and frontend engineer, most notably for the 2014 app, which was one of the very first Android apps to adopt material design. For two years, I was also the overall technical lead for the app. In 2015, I acted primarily as UX mentor/advisor.

I published a popular article and video detailing some of our design decisions for the 2014 app.

The 2014 app was one of the very first apps to adopt material design.

The 2013 app was one of the first to support 7-inch tablets for Android, helping light the path for Android tablet UI design.

The 2011 app was one of the first to support the new tablet form factor with multi-pane UIs.

DashClock Widget

September 2012 – February 2013

DashClock was my first published Android app and is exemplary of my philosophy for design and developer advocacy. It also promotes Android by exemplifying functionality that's only available on the Android platform.

I updated the app for material design shortly after the material launch at Google I/O 2014.

DashClock has been installed over 3 million times.

Design Tools

One of my biggest passions is creating designer and developer tools. Since 2010, I've worked on a number of small and large, mostly web-based tools that help designers and developers be more productive.

This gallery showcases some of my proudest design tooling side projects.

Like many other designers, I've switched to using Sketch for most of my UI work. In my unrelenting quest to improve my own productivity, I started writing Sketch plugins. Sketch Artboard Tricks is one that I wrote that many designers on my current team now use.

The Android Icon Animator was a foray into motion design tooling, and the genesis for the new and awesome Shape Shifter tool by Alex Lockwood. Built with AngularJS.

The Android Asset Studio was one of the first tools I wrote, aiming to take the guesswork out of Android app icon sizing and effects. Plug in some values and it generates all the necessary assets for each screen density.

The Layer Visualizer was a quick tool I built for helping teach material design, specifically the depth relationships of material surfaces. See on Dribbble

Android Design Preview is a tool I co-wrote that allows designers to get a more realistic view of their UIs by mirroring a portion of their computer screen to an Android device.

Nine-patches are notoriously tedious to produce, especially in bulk. I built the nine-patch generator, to simplify the process of creating optimized nine-patches for all densities.

I recognized several years ago that developers were using device frames inconsistently, with poor lighting/sheen, shadows, etc. I decided to make an easy-to-use generator for Nexus device-framed images.

Material Product Icons

I’ve created a number of product icons following the material design guidelines, for a number of purposes, including official Google products such as Google Cloud Messaging, as well as unofficial apps such as Nick Butcher’s Plaid.

The gallery showcases a sampling of the icons I’ve worked on.

Product icon for Nick Butcher's Plaid design inspiration app. See on Dribbble

Official product icon for Google Cloud Messaging.

Product icon for an internal team working on an attendee check-in system for Google Developer events.

Product icon for my app, Muzei Live Wallpaper.

Product icon for my app, DashClock Widget.

FORM Type Maker & Watch Face

October 2014

In addition to my strategy work for our FORM conference (which I co-created), I built a web-based playground for the brand's display typeface (created by the material team). The desktop and mobile web app let users type a message, choose a color, and created an animated GIF to share on social media.

Because the conference was invite-only and very small, the playground was a key part of the social media strategy for the event, ensuring that those who couldn't attend could still participate in the conversation.

I designed and developed the app, building a <canvas>-based glyph animation framework in the process. This project was a great exercise in creative technology for me, and I learned a ton about modern web animation, performance, and more along the way.

Finally, I built an Android Wear watch face based on the font, and helped integrate it with Muzei.

I also designed, developed, launched and open-sourced a watch face for Android Wear using the FORM typeface.