Pushbullet Case Study

Product: web app, mobile app, desktop app

Status: public

Position: Lead UI / UX Designer

I joined as the second employee at Pushbullet. When I started, the first thing I did was work on branding. I defined the set of brand colors, created the current logo, and ensured that they were applied consistently throughout the product.

Pushbullet has apps for many different platforms. As Pushbullet’s only designer, I worked on the design for each of these apps, combining the paradigms of each platform with the Pushbullet brand. My goal was to ensure that each app felt true to the platform while still being recognizably Pushbullet.

I created the visual language and illustrations Pushbullet uses throughout the product. My goal was to make Pushbullet more approachable and friendly. I also directed and edited videos demonstrating new products and features.

Web

The web interface and front page were the first things I worked on at Pushbullet. The first image in all the following albums were how Pushbullet existed before I started working on it.

After Ryan Oldenburg published the first Chrome extension, I started designing for all the extensions. Material design released around the same time we started making extensions. I used Google's guidelines because the bulk of our userbase at the time were using Chrome/ web and Android and I wanted to make the experience feel unified. When we updated our style to be more chat-centric, Oldenburg and I really wanted the Chrome extension to be able to stand on its own. I designed it to include nearly all our features so that users would be able to pop it out into its own window and use it like they would a stand-alone app.

This is how the web app looked when I started at Pushbullet.

Android

I helped update the Android app to fit in with Google's Material Design when they released their guidelines. Yarian (our Android developer) and I decided to update Pushbullet's brand colors at this time. We had been debating the change previously, and the makeover seemed a good time to switch. We opted for a green with a lot more blue because we felt it would cooperate with a wider variety of colors on the screen.

Yarian took the lead on our Android app's design when we converted Pushbullet to a more chat-centric style. We held design critiques during the change, but the end product is much more to his credit than mine.

iOS

This is how the iOS app looked when I started at Pushbullet.

Designing for iOS was a lot slower than the other platforms. We ran into issues with submitting the app so often that it interrupted anything resembling a steady update cycle. Most of the updates to our iOS app were functional rather than visual, so I have less iterations on this platform.

Mac and Windows

The Mac app is the only platform currently left out of the chat-centric makeover we applied to Pushbullet in June. We only have one developer for both iOS and OSX, so we had to choose which platform we thought would get the most out of the update.

The second image in this slideshow is an old mock I worked on before I realized we wouldn't be able to ship a Mac update with the rest of the platforms. It is not done or polished, but does provide an idea of where the app may have ended up.

While the Windows app existed before our chat-centric makeover, I didn't take control of its design until we made the switch. It's been a while since I was on a Windows system, so I researched what other desktops apps were doing and what their design was like. I tried to create something that blended in with Windows' style while still feeling as if it belonged in our ecosystem of apps and platforms.

Blog images

I quickly learned that whatever images we used in our blog posts would be used by other blogs to write about us. I tried to keep blog image headers simple and straightforward - something that clearly visualized the feature we were writing about. I also included titles in the images to account for blogs that use thumbnails to link to articles.

Prototyping

I didn't do too much prototyping while at Pushbullet because we were such a small team. I could sit down with each developer and iterate in real time, so I only ever made prototypes when the developer for the platform I was designing was particularly busy. Here are a few animations I put together to better communicate my intentions.