Instagram: Anatomy of a failed redesign

A few weeks ago, it was announced that the Instagram app was getting a redesign. Since Instagram is the #1 app that I would like see redesigned, I was pretty happy about the news.

However, while the redesigned Instagram is an improvement in some ways, it doesn't really address the fundamental problems I had with the old app, and in some ways makes it worse.

For background: On Android forums, there's often a lot of geeky discussion about when a particular is or isn't "Holo". However, if you read design-focussed Android blogs or watch videos like Android Design In Action (which is produced by Google), you'll see that one of the frequently-cited principles of "Holo" design is that it's less about how an app looks than how it works. This slideshow makes the same point.

The Holo design guidelines allow for a lot of flexibility and creativity in terms of visual design. Look at apps like Timely, the official FIFA app, Grand Street, Hue Weather, Google Maps, Get Shit Done!, Hold 'Em Odds, or Pocketcasts to see some of the interesting ways that designers have interpreted the Android design guidelines. Some of these apps don't even have an action bar, but they still feel recognisably "Android". And they use a common set of interaction patterns, so the user should be able to go into any of these apps for the first time and already have a pretty good idea of how it works.

So, how does this relate to the redesigned Instagram? At first glance the new Instagram looks pretty good:


The design is flat and clean. It has an Android-style action bar, and it looks recognisably like an "Android app". Some people have complained about certain choices (eg. the tabs at the bottom), but I think this is one of those areas where the developers can use their discretion, if they feel they have a good reason.

One problem is that the tabs aren't swipeable. The tabs look like Android tabs, but they don't behave like them, which might be a source of confusion for new users.

Things get worse when you look at an individual user's page. On this screen, there's an action overflow button (or more colloquially, a menu button). It looks like the standard menu button in every other Android app. But it behaves differently. Instead of a subtle pop-up menu, it brings up a big dialogue box that takes over the centre of the screen:


This is especially strange because the dialogue box is, in fact, a menu. So why couldn't this menu simply have been implemented in the regular way? I'm not sure.

But, things get even worse.

When you're on the tab for your own profile, there's another menu button. However, this one takes you to the app's settings screen:


At this point, the UI is getting bizarre.

Not only is this inconsistent with the Android design guidelines, it's inconsistent with the rest of the app. Why does an identical button bring up a menu on one tab, and the settings screen on another? Why should the user have to memorise which tab does which? If they wanted to put a direct shortcut to settings screen in the action bar, there's an obvious, instantly-recognisable icon that they could have used instead: the "gear' icon, which is used to denote settings in many apps.

On a deeper level, we might also ask why should the settings screen only be accessible from one particular tab? Settings is a universal function that the user might want to access from anywhere in the app. A more elegant solution would be to have the standard menu button on every page, containing a link to the settings screen in addition to any other options that are contextually appropriate.

If they'd gone this route, it would not have harmed their "branding" at all. It would not look any less like "Instagram". In fact, the visual design of the app would be almost identical to what it is right now. The only thing that would change is that it would be easier to use, because buttons would conform to expected behaviour.

Perhaps this seems like a small issue. But the menu button is used on many, many apps. It is a very common form of interaction on Android. If Instagram is going to break it by making it behave in a non-standard way, this is a significant design flaw.

In some respects, the redesigned app is worse than the original. The original app had a more customised design, which made the appearance of non-standard interaction patterns less surprising. But the new app conforms much more closely to the visual side of the the Android design guidelines, which makes non-standard interaction patterns all the more jarring.