If there’s an example to describe the pivoting that the fictional company Pied Piper does in HBO’s Silicon Valley, it’s Instagram. Originally intended to be a vocational app, the photo-sharing app (and now platform) is infamous. Instagram grew so big that they were bought out by Facebook…and that’s when their UI plateaued.
Facebook has an issue of always having a very cluttered design with their products. I attribute this to Facebook trying to be a “one-size-fits-all” company. They try to do every single imaginable thing for every single user.
While working on a redesign for Facebook, I started looking at Instagram and decided to try my hand at redesigning and making a concept for Instagram.
The Build Up
If you’ve ever seen a mockup of mine that’s software related, I like my designs to look as close to stock as possible. I like to have lots of translucency (especially in iOS) and also bring back the company’s history in to the design. While designing this concept, I looked back at the old Instagram app.
Stories were added as way to steal users from Snapchat. Albums came to Instagram making it more akin to its older brother, Facebook. These features really changed the way Instagram is used, but the User Interface hasn’t really been updated that well. This is part 1 in a 2 part article series addressing Instagram and showing off my new concept. This article shows off the new Feed Screen and the new Add Screen.
The new Feed is now in the form of cards since iOS and Android both seem to be moving towards an interface made up of cards.
At first I wanted to make cards swipe-able and have the user swipe one way for comments and the other for repost, but on second glance, that seemed to be a huge departure from the way Instagram works on a core level and I wanted this interface to feel familiar and go back to it’s roots while giving it a facelift at the same time.
The full image is shown, but users can now tap to have the picture take up the full screen. Clicking the comments button allows the user to be taken to a new screen that shows off the picture at the top with comments right below it.
The Instagram logo at the top has been slightly modified to be the original blue color they launched with that was prevalent throughout the entire app.
The Feed tab is meant to feel familiar. There weren’t many things that really needed be redesigned. I felt the card interface is justified for the following reasons.
Instagram would be nothing without users sharing pictures. The current way to do this looks messy. Instagram added the ability to post videos, then post regular sized pictures, then add to stories, and finally albums. That’s a lot of things to add while trying to retain a similar layout.
All of this has been redone and rethought for this concept. I went back to basics and adopted the old design for the top of the screen but changed photo to add.
I brought essentials to the new screen such as a Zoom Slider.
Finally, I implemented a similar bar like on the default iOS camera app where you can swipe between modes or tap to switch. I made the bar translucent with the same tint of blue used in the old app.
The camera no longer defaults you to a square image. It takes full advantage of the screen to give you a beautiful viewfinder. After a picture is taken, users can adjust the picture with cropping or filters.
If a video under 10 seconds is taken, Boomerang functionality is available from within the Instagram app. There’s also a switch on the video tab that allows the user to go live.
Everything except the Zoom slider is now on the bottom bar, for ease with one-handed use. The slider is right on the side so the user can just swipe with their thumb.
Social media apps sell themselves on allowing users to really express who they are on the inside, and I thought it would only be fitting if the Instagram app actually allowed the user to show who they are without any extra effort on their part.
People on Instagram post pictures or videos about stuff or with people they care about. They feel so passionate about certain things or people, they feel they should share it on the social networking platform.
So the new profile page gets a facelift. We start off by rethinking where all of the import information is. We reorganize it and center all of the information.
Then a little color is added to the profile page by taking the most liked picture on someone’s Instagram page, giving it a slight blur, and setting that as the header.
Originally, I posted this on Reddit. Some people gave me great feedback. Others tried to insult me. #ThanksInternet
u/rawrtiger had this to say:
This, and everything on your website, looks very amateur.
I legitimately cannot tell if you’re trolling or just an idiot.
One user made a point though that I didn’t really check with anyone. I wanted to clear that up. I showed my designs before I posted to Reddit and after I posted, I showed more people. The people I showed loved the new designs. They liked the new look, especially of the Profile and Add screens. They thought the card interface felt fresh and they loved having the ability to finally see photos in full screen.
For more concepts or to contact me, visit my website — www.rajaprem.ga