Case Study : Redesigning Snapchat (pt. 2- wireframing)
Wireframes and UI of the Snapchat App
As described in Part 1, many issues emerged in the heuristic evaluation of the Snapchat app. In order to address these, the following changes per preposed.
- Declutter the camera screen
- Increases the clarity of the messaging icons.
Declutter the “Home” screen.
When opening Snapchat, the first screen that the user is confronted with is the Camera. This is to facilitate Snapchat’s main function: snapping & chatting!
The problem with this is that the navigation from the main-page is not consistent with the gamified swipe navigation.
Current swipe navigation:
Swiping on the main camera screen from
- bottom to top (swipe up), brings the “Memories screen”.
- Top to bottom (swipe down) reveals a friend search function
- Left to Right (Swipe right) enters the chat screen
- Right to Left (Swipe Left) enters the community page with stories from friends and posts from creators etc.
Revised swipe navigation:
- bottom to top (swipe up), brings the “camera settings”. This allows for descriptions and quick access for pro-users. Hidden features, like the “scan”, are now visible and accesible. This aligns with Heuristic value 2 “User control & freedom”.
- Top to bottom (swipe down) now acceses the profile. Here, you can add friends, show your QR code to be added, change your Bitmoji etc.
- Left to Right (Swipe right) enters the chat screen. Memories with friends can be accessed here and may motivate users to chat about these memories. The chat icons have been overhauled to create cleared system visibility and comprehension.
- Right to Left (Swipe Left) enters the community page with stories from friends and posts from creators etc. — no changes were made here as this is closely linked to Snapchat’s business model.
The Main Camera
Reduced the confusing camera options & inconsistent navigation from the Home-Camera Screen was the main focus.
Camera Settings
Originally in the sidebar, the settings can now also be accessed by swiping up. This increases the reachability and comprehension of more complex settings.
For example, did you know that Snapchat can scan winebottles, recognize music and even do math problems?
The “Scan” feature can only be accessed by holding on the screen in the camera-home-screen.
Now, there is a clear option to iniate users into these advanced functions!
The Chat Page:
The original chat page uses a confusing system of symbols that is not familiar to any non-snapchat-users.
Icon color coding was kept in order to promote recognition rather than recall. After recieving chats, the user should be able to enter the chat with this user without opening the snap and vise versa.
Memories were moved here to promote chatting with friends about past experiences. Memories are more likely to be seen on this page than on the swipe-up screen.
Finally, the chat streaks have been gamified further by adding a “highscore”.
Next steps:
In order to determine if the heuristic issues had been lifted, I conducted usability testing. Participants were given the following tasks to complete in the hi-fi wireframe & observed to identify where and when they struggled.
- Take an Image
- Add a friend
- Open an image your friend sent you
- Select music to play during your video
- find the oldest person in your chat
- access your memories
Feel free to try it out yourself!
Some confusion was still present but can be summed up in the following points:
- the Community Page: The navigation icon indicates “contacts” to most tested users.
- Camera Options: On the camera options page, the swipe down option may be hidden on the Iphone x or similar thanks to the notch.
- The Navigation Bar: The camera icon indicates to some users that this is where they take pictures.
- Main Camera: The current options : camera switch, flash, duel camera and timer may need to be changed to more used options.
- The color pallet is not consistent and the primary brand color should not be used in the app.
