Material Design, 1 year later: How Pocket and Pocket Casts conquered Google’s vision

With Google I/O 2015 well underway, we’re rapidly approaching the one-year anniversary of Material Design — the dramatic redesign of Android and other Google products unveiled at last year’s developers’ conference. 

Material Design introduced a new look not only to the Android operating system but also to the ecosystem of apps that surrounds it. For the past 11+ months, developers have been working tirelessly to update their apps and make them feel like a proper part of the modern Android universe — and it shows: By Google’s own estimation, the Play Store now holds nearly a quarter million apps with Material-themed designs. 

As an owner of Android devices, the difference between using an app that’s embraced Material Design and one that hasn’t is immeasurable. The former feels like a natural extension of the Android experience — a piece that belongs in the platform and is consistent with the way it looks and works. The latter, meanwhile, feels like either a relic from the past or, worse, an out-of-place entity carelessly plopped over from another platform.

We’re reaching the point now where enough apps are doing Material Design well that the ones that don’t really stick out like sore thumbs. And you don’t have to be a professional designer to notice the difference.

The realities of Material Design 

There’s a common misconception among users and even some developers that embracing Material Design has to mean conforming to a generic cookie-cutter sort of visual — a non-distinctive appearance that mimics Google’s own apps and has no personality of its own.

Hold the phone, though: While emulating the basic “Google app” look is certainly one (and arguably the easiest) way to adopt Material Design, many developers have discovered it’s possible to go Material and still maintain an app’s own unique identity and brand.

“Our app is fairly distinctive on most of the platforms that it’s on,” says Russell Ivanovic, developer and co-founder of Shifty Jelly — the company behind the podcasting app Pocket Casts, one of six titles recognized by Google design guru Matias Duarte with a Material Design Award at I/O last night.

“One of the first things we said to ourselves was we don’t want some stark-white UI with just a few floating buttons on it and some shadows. We wanted to take the time to add all the little details and touches that put our own stamp on it and makes the app feel like us.”

One of those touches is the way that Pocket Casts identifies a key color from a podcast’s artwork and then uses that color for UI elements like buttons and backgrounds. It’s a subtle thing — and something some users might not even consciously notice — but it goes a long way in making the user experience feel extra polished and cohesive.

Interestingly, Pocket Casts doesn’t heavily lean on some of the more immediately recognizable signs of Material Design, like the floating action button — the brightly colored circular icon that’s in the lower right corner of many Material-themed UIs. Steering away from that element was a deliberate decision by Shifty Jelly’s developers.

“Some of our early concept designs did have a floating action button,” Ivanovic says, “but it felt like that didn’t need to be there in the context of Pocket Casts. It didn’t really make sense.”

Pocket Casts does use the floating action button in one place — the episode dialog, where a user has selected a specific show and episode and is thus likely ready to listen to that program. There, Ivanovic tells me, a prominent play button made sense — and a floating action button seemed like a logical way to present such a prominent action.

The balancing act of the Material designer

That raises an important point about Material Design — or most design guidelines, for that matter: They’re guidelines. Not hard-and-fast rules. It’s something the team behind Pocket, a popular article-saving tool also recognized by Duarte with a Material Design Award last night, quickly realized.

“They’re a good starting point,” says Max Weiner, Pocket’s lead Android developer. “Google is basically saying, ‘If you don’t have a team of designers, here’s what you can use and what you can make your app look like.'”

Weiner says his team started Pocket’s Material transition by combing through both their own app and Google’s guidelines and then thinking carefully about how the various elements might fit into their designing desires. They decided to include elements that seemed essential to the Material vibe — things like an updated navigation bar along with Material-esque icons and accent colors — and to find a way to bring those into Pocket’s interface while still allowing the app to feel like itself.

“It’s important that the brand is still there,” Weiner explains. “It comes down to a balancing act: We want to make sure people open the app and say, ‘Oh, this is Pocket.’ But we also want them to say, ‘This is Android.'”

Material and movement

While elements like icons, fonts, and colors may be most obvious signs of Material Design, the focus on animation is arguably the guidelines’ most transformative addition for Android and its ecosystem.

When you talk to designers — be they design divinities like Duarte or the more earthly beings who create non-Google apps and services — you often hear about the notion of “delight.” Basically, the idea is that we’ve reached a point where functionality should be a given. Beyond having a UI be sensible and intuitive, you want it to be a pleasure to use — to have it create those magical little moments when a user sees something and smiles or says, “Huh. That was cool.”

It’s a concept that’s core to the Android Lollipop design and one that’s becoming increasingly important to the apps that run on the platform as well. As developers explain it, properly executed animation can fulfill two different but equally valuable roles.

“Some animations are there purely to delight the user, like our play button animating into a pause button,” says Pocket Casts’ Ivanovic. “Others give you a sense of what’s happened, like when you’ve chosen to start playing a different episode and that episode’s artwork moves itself into the playing position. There’s a bit of delight there, but it’s also serving a purpose — showing the movement and clearly outlining exactly what’s going on with that transition.”

Looking back, looking ahead

All right — let’s pause the praise for a minute and get brutally honest: For all of Material Design’s positives, the past year hasn’t been all sunshine and giggles in the lives of developers. For the folks tasked with taking Google’s guidelines and putting them into place in the real world, there’s one main challenge that seems to come up most frequently — and it’s the dreaded “F”-word.

No, not that “F”-word, you foul-mouthed maniac. The other one. Fragmentation. But not in the way you might think.

“From a non-developer’s point of view, people look at all the different device sizes on Android and they’re like, ‘Wow, that must be really hard,'” Ivanovic says. “But Google baked in the ability to easily scale an app to different sizes fairly early on, well before even Android 4.0.”

The real fragmentation at play isn’t the diversity of devices but rather the diversity of software that runs on those many phones and tablets. All it takes is one glance at my latest Android upgrade report card to see what developers are up against: When Shifty Jelly launched Pocket Casts’ Material redesign, about a quarter of the app’s user base was on the current Android 5.0 Lollipop OS. That figure is now up to about 50%. That’s a lot of users on older versions of the platform — and those users need to be supported.

“That’s the hard part,” Ivanovic explains. “When Google introduces an API that’s brand new to Android 5.0, sometimes they’ll give you a support library that’ll let you use that in older versions and sometimes they won’t. And if they don’t, you’re kind of on your own when it comes to making sure users on those older versions can still use the things you’re implementing.”

Pocket Casts currently supports devices with software as old as 2012’s Android 4.1 Jelly Bean release. And with Material elements like animation and elevation being limited to devices with Android 5.0 or higher, the Shifty Jelly team has faced some difficult decisions.

“You can hunt for open source implementations for things that Google hasn’t backported to older versions, you can implement them on your own, or you can just give up and say we’re not going to support this feature on older devices,” Ivanovic says.

Shifty Jelly took the time to find solutions to ensure its app would look just as good on older versions of Android as it does on Lollipop. But many developers don’t have the resources, the knowledge, or the motivation to do the same. Looking ahead, that seems to be developers’ biggest request — even plea — for Google to improve Material Design and make it more practical from their perspective.

“In the real world, you can’t just support Lollipop,” says Max Weiner of Pocket. “You have to support way back, sometimes even all the way to [2011’s] Ice Cream Sandwich. We need more tools that are available to make things like animations fall back gracefully.”

(Google did announce new resources for bringing Material Design elements to older devices at I/O this year, incidentally, but some areas — like animation and elevation — are still not supported.) 

Challenges and all, there’s little debate that Material as a design standard has helped Android move forward in leaps and bounds. While previous updates have felt like fresh coats of paint or even partial splashes of polish, Material Design actually makes Android feel like an entirely new and newly cohesive platform — one that rivals the best of ’em in the department of design.

And if there’s anyone you can count on for a BS-free assessment of the progression, it’s a person whose job it is to study the OS and create tools that fit within it.

“I wouldn’t say it was ugly, but Android was never the best looking operating system in the world,” Ivanovic laughs. “With Material, it seems like Google finally gave its designers free range to actually remodel the whole thing rather than just little bits here and there.”

NEXT: 30 exceptional Material Design apps for Android