Why Snapchat Totally Fails —The Design Perspective

Sahiba Johar
The Design Perspective
5 min readAug 8, 2016

Think back to early June when Snapchat pushed a design update for their increasingly popular photo/video application. How confusing was it to find everything? All of a sudden, the navigation iconography was different, sponsored stories by companies changed their shape, colors that meant something before now meant something else. Lost is the word you’re probably looking for. But what exactly about the design sucks?

Snapchat Chat Icon

Let’s start with the screen that they’ve now titled “Chat”. The blue header at the top is incredibly misleading because they previously used that color to represent text based chats (see image to the left). This screen doesn’t only have messaging, it also has photos and videos that people directly send to you. For those, they use a purple or red indicator. The fact that they chose to label this page with the same blue banner as the 1:1 chat icon is incredibly misleading mainly because of all the other content found on this page. I also never associated sending photos or videos to individual people as sending a chat. Instead, I associated chat with sending simple text based messages. So the fact that this entire page is now called, “Chat”, boggles my mind.

Navigation on chat and story screen

Next, the navigation buttons on the bottom look disabled on the chat and stories screen because of the color used here — gray (see image above). On the main camera page, the icons are white which frankly makes more sense to me. On top of the already confusing navigation, the icons animate when swiping from screen to screen. For example, when a user is on the camera screen, the shutter icon is relatively larger than the chat and stories icons on either side. When a user swipes from the camera to the chats page, the shutter icon in the middle shrinks and a line appears below the chat icon. It seems logical to assume that because you are swiping to the chat screen, the chat icon’s size would now increase, but it doesn’t. When you move from the chat screen back to the camera screen, the shutter icon returns to its larger size. The animations completely lack consistency thus they serve no purpose. I guess if tiny, inconsequential animations really give you that “moment of delight”, then sure, the animation totally changes my life (not really though). A better alternative would be to increase the icon of the screen you are on and add color to it while shrinking the other icons. This way, you wouldn’t need to put a bar below anything because it would be very clear to the user where they are in the app.

Navigation on Camera Screen

Not strange enough for you yet? Just wait. A new, smaller circle appears below the shutter icon (see above). This new icon represents your saved stories, or memories. But wait a second, I thought the navigation at the bottom was global. So why did another icon randomly appear below it only on one screen? The confusion continues. It just makes more sense if the memories icon was placed at the top along with the other camera functions that appear on this page. Wait… I take that back. If those are stories and snaps that I have saved, shouldn’t they appear on the stories page???? Someone help me figure this app out already!

To add the the persistent theme of confusion, things scroll behind the navigation icons creating an odd blur effect going on at the bottom. I’m not visual designer but that looks pretty terrible. It makes me feel like there is a smudge on my screen. And if you’re wondering, Yes, I did try to wipe my screen a million times to clear up what I thought was a smudge.

Stories Icon

Let’s move on to the “Stories” screen. Same grayed out navigation problem here, but I already ranted about that so you get my beef with it. The main problem with this screen is the chaotic organization. Right under my story, there is a carousel of what? Posts by companies? Why didn’t they give it a label when they gave Recent Updates, Live, Subscription and All Stories a label? They’ve given an unusually large amount of real estate to the live section. Why did they break away from their grid and throw in a collage instead? Chaos again. They also didn’t organize their groups in a very intuitive way. I do like the carousel they used for the company updates and I would’ve argued that they should’ve used the same style for the recent updates. Currently, I have 16 recent updates from friends and because of them, the live feed is super buried and I have to scroll so far down the screen in order to find it. If they had used the carousel, this wouldn’t have happened.

Stories Page

Last but not least, where on earth did the rightmost “Discover” screen come from? Why isn’t it on the bottom global navigation? If it slides over with the exact same gesture as the other screens, it should be down there. It also doesn’t make sense that they placed the discover icon for that screen next to search. It would’ve made more sense if they used the same pull down animation as the on the QR code scanner on the camera screen.

I haven’t even talked about the settings, add friends and search functions yet but you get the idea of how inconsistent the design is. I’m sure you think I hate the app. You’re wrong, I love it. So what is Snapchat doing right? You’ll have to wait till my next article to find out.

A quick recap:

1. Color affects the interaction of a product. It’s not just used to make things look pretty.

2. Where you put shit matters!

3. Animation ALSO affects the interaction of a product. Moments of delight exist only with the correct use of it.

4. Global navigation needs to remain exactly that — Global.

5. Grids are a thing. Use them.

6. Be Consistent!!

--

--