Blog

Redesigning Instagram

I love Instagram. Many of us do. However, is the current Instagram look, feel and user interface the optimal experience? Why not challenge the existing Instagram app as well as its brand and propose a new user interface, a new visual style as well as a new feature?

Starting point

I made a moodboard of interfaces from dark to light, realistic to minimal to get inspired. I questioned the current version of Instagram and formulated my answers to design decisions on a sketch pad. This was essential to avoid me getting lost staring into a Photoshop document. As an Illustrator guy, I barely knew how to use Photoshop until this point, so the Icon Resource course helped me in a big way. The ustwo™ PPP handbook was (of course) always on my Finder sidebar for quick access.

5-555x342

The dark, flat, professional interface

Rather than restricting myself to the existing look and feel of Instagram, I approached this brief as a reimagining of Instagram for more serious photographers on the Instagram network. Like the contrast between iPhoto and Aperture, the proposed theme is professional, dark and detailed. A complete opposite of the current style.

2-555x531

The photo feed is the core of the application and for that reason it takes center stage on this redesign. By doing a bit of user research, I reached the conclusion that only a few users take photos from within the Instagram app. The large majority use SLRs, the native iOS app or Camera+ and then import the photos into Instagram.

However, the camera button is still presented as the primary call for action. It’s always visible on the nav bar and is given special visual treatment. The strong orange contrasts with everything else on the interface, bringing just the right percentage of vibrancy to a neat and subtle interface.

You may notice the tab bar gone as well as the Like, Comment and More buttons missing from underneath the photos. All these actions and sections are hidden one layer deeper: you swipe a photo to the right to reveal a user profile preview and swipe to the left to Like, Comment or Share that photo.

61-555x342

Scrolling beyond the top of the feed will reveal a menu with search button, a toggle for photos and news, and a button to access your profile. By removing UI clutter in this way we can give more of a focus to the content.

5-555x342

I wanted to introduce a new feature to Instagram, and thought viewing your feed through a time-based map view was intriguing. I consulted with peers about this and got good feedback. The most interesting part was discussing how a user would navigate through the feed on a map, how photos appear, how many photos appear at a time and how to make it easy to understand.

To get to this new feature, the user taps the map icon to flip the feed to a map view. When in the map view, the user is given a roller at the bottom of the screen that allows them to navigate through the feed while they're viewing the map.

6-555x342

Feedback

At this stage I built a prototype to gather some feedback on the App’s interface and functionality. You can open the prototype with your iPhone with this link (bit.ly/VvLzEM). Make sure you save it on your home screen. The prototype is a bespoke HTML5 web app.

The feedback from people using the prototype was that the map icon that it was too dark, hard to understand and out of tune with other icons. The text and inline icons could be slightly bigger and the Like / Comment / Share buttons could be spaced further apart. The type size was 12px and should be increased to at least 14px as per the Apple HIG (pdf). The contrast of the body text against the background colour should be increased and measured using a colour contrast checker for accessibility purposes.

11-555x203

Originally, I had intended that tapping on the search icon would display the search bar next to it. This proved to be confusing and hard to implement as a search in the feed implies that it searches through the feed. To solve that, I moved the search above the nav bar in order to represent an app-wide search. The filters are extra functionality and help convey this message.

12-555x555

The camera button was also too distracting while browsing the feed. I worked on several treatments of this button, but achieved not a single one that I was satisfied with. After reading a blog post calling for a pull-to-create behaviour on apps and the Facebook Camera app including the camera button as an element of the feed, implementing the camera button directly into the feed stated making sense.

Pull for Camera

This gesture feels very natural and intuitive. It certainly needs to be easy to discover, so it might need a help pop-up on first use to tell the user the camera is hidden away. But it seems to work well and in conveying the meaning of adding a photo straight to your feed. I made a short video to demonstrate the functionality of this.

The Play-Doh interface

In parallel, I explored a second visual route. This “play-doh” styled design is fun and energetic, a complete opposite to the previous version. It conveys the feeling of sharing photos on Instagram. With this version I didn’t work so much on the application architecture, I focused mainly in conveying a feeling through the visual language.

17-555x342

I built another prototype which you can view on this link (bit.ly/XJWyER)and again, remember to save it on your home screen.

I don’t feel the more flat and minimal route works with this style. But the colours on the tab bar create a special feeling. I tweaked these colours to be stronger and made the rest of the UI in a warm shade of grey.

These colours look stunning on the iPhone. You might also notice a slight change in the camera icon. I wanted to continue the colour spectrum motif from the tab bar through to the camera icon. The shades of colours you see on the icon are designed to be an animation that plays according to the movement of your phone, detected using the accelerometer, to simulate light refraction projected on the icon.

21

On top of this, I made a profile view to give the interface a more consistent feel.

23-555x531

Let me know your thoughts about this project in the comments below, or simply say if you have a favourite out of the two styles.

The source code can also be downloaded below.

Download Prototype A (Dark) Source Code

Download Prototype B (Play-Doh) Source Code