fabernovel loader

Sep 17, 2014 | 4 min read

Design

App Makeover - Snapchat

Marine Pichard

Head of Design


FABERNOVEL TECHNOLOGIES
Our design team chose to rethink the interface of the sharing ephemeral media application known as Snapchat.
Snapchat was launched in 2011 and now has over 82 million monthly active users, meaning more than 760 million photos and videos exchanged every month on the network.

Behind this success lies a simple and innovative concept of capturing and sharing media. If you’re not already familiar with the application, the peculiarity of Snapchat is its treatment of objects sent. Once the picture is taken, the user determines a playback time which limites the playing time of the Snap, before making it unavailable.

Our position

While the application offers a host of features such as chat, video conference, add photos filters, “story” (video and / or photo searchable for 24h), we only focused on sharing photos.
In this stylish exercise we propose to take a critical look at some ergonomic and graphic aspects.

The app

Navigation

Our first analysis aimed at the navigational elements of the main screens : home, my snaps, my friends.
On the illustration below we present the sensitive points.

Current Application : My Snaps, Home and My Friends screens

The two icons at the bottom of the homepage are schematic representations of the main navigation elements. This strong graphic bias implies to the first manipulation an against-productive action for the novice user : click to open and understand the screen behind. While they should allow a quick understanding of the action hidden behind this symbol.

On the pages “my snaps” and “friends”, the native back button is replaced by a camera icon. The idea makes sense because this one returns to the home page (shooting).
Nevertheless, when it comes to the transition from “My snaps” to “Home” screens, this shows inconsistency as the button is positioned opposite to the suggested translation (see animation below).

Animation of the 3 main application screens

Result

We present below our proposal next to the current application (version 7.0.5).

Log In / Sign Up

Log In / Sign Up screens

As it stands, the login screen requires two pages to connect to the application. We have chosen to combine these screens into one to quickly benefit from the application.

Home

Home page

Considering the following use case : capture and share an event to friends, starting with the camera is an absolute necessity to take a shot instantly. Therefore, it seems that the ergonomics of this screen is fully examined.

Unlikely to the current version where the most important elements were located at the bottom of the screen (“my snaps,” “shooting,” “my friends”), we suggest a different approach. It seems more appropriate to operate grouped by typology, with on the one hand navigational elements and on the other hand shooting tools.
Using the native components offered by the platform, user can spot himself easily. We propose to re-exploit the space allocated to the navigation bar to use it in that position and so to the top of the screen, entries “my snaps” and “my friends.”

My snaps

My snaps

We reworked the pictograms very sketchy for media sending and reception, in a more literal manner.

Then, to facilitate the browsing, we dimmed the snaps already seen, it brings out those untreated. Finally, we have shown the response to a snap with an arrow in the cell.

Viewing a snap

Viewing a snap

Currently, the user has to keep his finger on the screen to view the snap received ; however, the picture may be partially hidden. We propose a different approach : the “one click” more common in the case of use to get information, it offers at the same time to fully enjoy of the media. We illustrated the countdown with a progress bar that also serves as a button “quick response.”

Customizing a snap

Customizing a snap

Once the picture is taken, the user can customize his snap with some text, color and choose the display time.

Again, we wanted to classify the different elements by typology : 3 editing tools in the tool bar, and the two actions “cancel” (quit) and “send” (go to the next step) in the navigation bar.

Customizing a snap – Time, Colors, Text

Our work here :

  • a simplification of the timer, we avoid the swipe of the picker by offering a “one click” selection
  • the color selection tool was difficult to use : too small relative to the size of a finger. We simplify to 5 colors in hues of the application
  • the “text” feature works well, we keep the formatting as the current application proposes
Customizing a snap – Summary before sending

Send to…

Send to…

We standardize all the navigation bars of the application in green to keep consistency between the different screens.

We propose a layout a bit different, especially using profile pictures for contacts in order to give a more personal side to “friends.”

Recap

According to its popularity, it seemed interesting to us to study this application and to offer a different and efficient in-house version. We hope “Snapchaters” would appreciate our work and love to hear their feed-back on the topic.

logo business unit

FABERNOVEL TECHNOLOGIES

150 talents to face technological challenges of digital transformation

next read