Why we are redesigning our Android apps

Embracing Material Design at Cluster


A few months ago, Google announced a new design framework called Material Design. It was a visual language that they’d be incorporating into the upcoming release of Android. They also encouraged app developers to follow the guidelines to make the overall Android user experience more cohesive.

It’s a giant step for the platform, and one we are fully embracing at Cluster. Even before Android L is fully released, we have updated all our apps to start transitioning them towards Material Design. Here’s why.

Guidelines lead to a better user experience

I’ve long felt that the biggest issue with Android was the totally inconsistent user experience across apps. Where on iOS, a lot of apps look and feel similar (not always a good thing), on Android it’s a complete grab bag. This has made designing for the platform a much bigger challenge than designing for iOS.

Since we initially launched, our Android design strategy has been “copy the iOS app and convert anything super iOSy to how it should look on Android.” As the only designer of Cluster, I have done very little actual Android design. When our Android engineer asks how something should look, 99% of the time I respond with, “How does the platform say it should look? How do other apps do it?” My response doesn’t come out of a lack of interest, but instead the fact that I’m an iOS user and don’t have the answer. I figure most of the time, platform guidelines / trends can answer that question. But on Android, they rarely do.

Our tablet experience

A few months ago we were designing a new version of Cluster with support for iOS and Android tablets. Designing the iOS version took almost no effort. Apple has made it very clear what they expect an iPhone -> iPad transition to look like. Lists that were once on their own screens sit as a panel (usually 320px wide) on the left side and that controls the content on the right side. Full screen overlays become vertically and horizontally aligned modals. I barely needed to get involved at all, because the platform dictated what the app should look like.

Cluster for iPad

Android was a different story. We felt like we were designing the first Android app that ever existed. The official documentation gave almost no guidelines and resources that showed good Android examples were few and far between (and most didn’t even have tablet versions).

We even reached out to some friends and designers at Google and asked them what Android apps they’d recommend to show off what the right way to do Android tablets was. They suggested some great apps, but all of them completely broke platform conventions. Flipboard was the most mentioned app, and they’ve built their own design framework on both iOS and Android. In the end, even when talking to Googlers, we still came away with no clue how to design for Android tablets.

In the end, we designed our Android tablet app using iOS design conventions. Not our proudest platform moment, but it looks and works great. However, we’ve always wished our apps felt more like they truly belonged on Android, instead of iOS ports.

Cluster for Android tablets

This is all fixed with Material Design. And that’s a huge deal.

Why Material Design helps

Google finally is offering guidelines to create a cohesive platform experience for Android users. With the announcement of Material Design, Google published an exceptionally long spec that explains the visual language, full of very specific examples, guidelines, animations, and more. It’s one of the best (although exhausting at times) documents explaining a visual language I’ve read.

Layouts with spacing metrics are provided for common app pages

The spec contains information on elevation and shadowing, animation, and color. What I found most useful, however, were the sections on app layout and components. Those sections give an idea what some common app layouts look like.

Design spec for tabs

There’s even a section (with a provided design template) for tablet layouts!

Finally, Google is getting specific about how an app should be structured. Want to add tabs to your app? They explain how. Need help designing the top navigational bar? Their “App bar” section talks about spacing, alignment, and more. Additionally, the document includes guidelines of patterns for navigation drawers, search, settings, and more.

Typography, Vertical keylines and horizontal margins, and Vertical spacing for Navigation drawer

The document is very, very complete and should make it exceptionally easy for even non-designers to know how they should lay out their apps. To top it all off, they’ve even made icon packs available, something that most iOS designers end up having to buy from independent designers.

Redesigning Cluster

Material design is a massive change to the Android design language, and one that will take us a bit to completely transition to. But we’re getting started as soon as we can. In fact, we just released a set of app updates that add Material Design language to the most commonly used parts of our apps.

Prioritization was necessary in this process, so we made it simple by starting our Material Design conversion with the most heavily used parts of our apps. Luckily, this dovetailed with a re-design we needed to do to incorporate tabs into our apps, so the timing was perfect. The three major components from Material Design we used were the app bar, tabs, and floating action button.

ClusterView

The first place we added Material Design was on the main content view, which we called the ClusterView. Material design solved some key issues for us.

  • Floating Action Button: On iOS, many apps put their main action button in the center of the tab bar at the bottom of the screen. Bottom tab bars aren’t a thing on Android (Instagram brought theirs over), so we’ve always had our main action button in the top right, surrounded by a lot of other actions. Material Design introduced the Floating Action Button, which we embraced. It’s consistent with where it appears in other apps and users should start looking there first.
  • Tabs: We incorporated the new tabs framework to give users an easy and clear way of flipping through the different sections.
  • Icons: We also replaced all of our icons with the provided Material Design icons

Posting Overlay

The second most common action in our app is to post content. Once a user taps the floating action button, they see an overlay where they choose what they want to post and can see who it’ll be shared with.

Inbox by Google had a very cool way of letting the user choose what action to take after tapping the floating button and we are using that in our app. When the + is tapped, the options slide up as the overlay appears. It’s very smooth, gives the user options right where their thumb just tapped, and generally is a better layout than what we had before.

What’s Next

These are just the first few steps. We also have plans to overhaul animations, typography, and experiment with using the Cards UI.


We’re really excited about Material Design and think it’ll totally change our Android design process. Kudos to Google for all the work they put into creating and explaining this new visual language!