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.

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.

Android Design in Action Redesigns

2012 and 2013

In 2012, I created and co-hosted a popular web video series on Android design, that now totals over a million views on YouTube.

The original idea was to put the UI guidance we were sharing with developers to practice by redesigning apps, nominated by the apps' developers, and discussing these explorations on a biweekly live broadcast.

The format eventually evolved, but we successfully produced about a dozen hypothetical designs over ~40 episodes, helping pave the way for better design in the Android app ecosystem.

This London Underground app redesign from Sep 2012 was one of my first for ADiA. Click the image for detailed notes.

My design explorations for Kayak from Oct 2012 were among my favorites during ADiA. Click the image for detailed notes.

This soccer scores app redesign from Feb 2013 was a great vehicle for allowing me to explore data visualization.

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 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 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.

Motion Graphics

While I've always been interested in motion design, I've only had a few opportunities to work on motion projects at Google. The gallery to the right showcases some of those projects, most of which were built with After Effects.

Aside: For UI motion, I prefer to do most of my motion work directly in code (i.e. CSS or Android UI toolkit) because interaction and motion are so intertwined.

An intro bumper for our Android Developers YouTube channel. One of the earlier forays into higher-quality videos for our team.

An 'attendee has checked in' UI state transition for an attendee check-in app for Google Developers events. See on Dribbble