Snapchat Tune-Up

I avoided Snapchat for as long as I could, but finally joined in April 2016. While the content started to grow on me (what can I say? I have funny friends) the interface did not. There were a number of things that bothered me and alienated me as a new user.

Surely this wasn’t Snapchat’s intention, but I felt like they were toeing the line of discoverability in their attempt to create an interface that reflected the casual and spontaneous nature of the app’s content. I decided to explore some ways they could tune-up the interface, and practice some prototyping while I was at it.

My first step was to articulate the things that bothered me the most, so that I could think about how to address them.

 

Analysis

I found the layout of the camera controls to be inefficient. They weren’t grouped by function, with camera operations and navigation operations split across the top and bottom of the screen. This was especially problematic in one-handed usage, and I occasionally missed shots because I couldn't easily reach the front/back camera toggle in the upper right corner of the screen.

Camera controls vs. navigation controls.

Camera controls vs. navigation controls.

Poor iconography made certain things harder to learn. In particular, the symbols on the snaps page are nearly impossible to decipher and use color to indicate whether a snap contains audio. The reliance on color in this situation makes for poor learnability and accessibility, and could result in missing a snap’s audio because you accidentally opened it in a context where you couldn’t have the sound turned on.

All of the possible snap symbols. (Well, almost all of them.)

All of the possible snap symbols. (Well, almost all of them.)

The overall navigation lacked polish. I liked that you could swipe horizontally between the main pages of the app, but I felt that the two exceptions (the chat pages, which you reach by swiping on a user’s name on the snaps page, and the profile page, which you reach by vertically swiping from the camera page) weakened that navigation model. Many page transitions were also missing animations, leading to unclear spatial relationships.

 

Exploration

I knew that I wanted to tackle the navigation structure with my prototype, and that I could address the control layouts and iconography along the way in my mockups. I started by quickly sketching a number of different navigation possibilities. With each option, I tried to take a unique approach to the playful swiping interface.

I settled on the third sketch in the top row, a simple drop-down overlay to indicate your place in the app while horizontally swiping.

 
 

Mockups

After settling on a navigation style, I began putting together mockups. While working on the camera screens, I made adjustments to the control layout, moving all of the camera and editing controls to the bottom of the screen for easier one-handed operation. I also created clearer icons for the buttons linking to the snaps and stories pages.

 

On the snaps page, I tried to simplify and clarify the iconography, removing the reliance on color and using small icons to indicate when incoming snaps contained audio, or whether the most recent snap in a conversation was sent by you.

 
 

Prototypes

I used Flinto to prototype the flow through the camera screens. Flinto was perfect for animating the transitions between pages.

 

For the navigation prototype, I turned to Principle. Flinto is a little limited when it comes to elements that persist across multiple screens, but Principle handled this very well.

 
 

Retrospective

A few months after finishing this project, a couple interesting things happened. First, Snapchat made some small updates to their camera screen controls, improving the icons for snaps and stories, and introducing a transparent overlay to better communicate the navigational relationship between the camera, snaps, and stories screens. Part of me wishes they had gone a little farther, as I did in my prototype, but I had the luxury of not needing to worry about alienating millions of users. Their solution is focused on making an improvement without sacrificing familiarity.

Second, Instagram released their stories feature. I was pleased to see that, like my mockups, the controls for their camera are all on the bottom of the screen where they can be easily reached with one hand. I think this is a great decision. These apps aim to distinguish themselves in their ability to capture and share life's fleeting moments. It would be a shame to miss one because you were fumbling with your phone.