DESIGNER, PROTOTYPER, FOUNDER, STRATEGIST

Snapchat Profile Modal Redesign

So, I've been using Snapchat a lot more lately. So much that I rarely upload photos to my personal Instagram account (my business, now that's another story). 
In this exercise, I'll be iterating the profile modal that displays from the list table (accessible in  the Stories and Snapchat views).

The situation


When I have been added by people I may or may not know on Snapchat, I want to be able to vet the user before adding them back. Reason is, I post way more personal content on Snapchat than any other social media network. People adding me could be former coworkers or people I may not want to include in my personal circle. This is so I can best moderate the people and not the content I'm sharing with my connections.

The Problem

Snapchat's current implementation doesn't provide me with enough contextual information so to make the best decision as to who and who to not add. The hierarchy of actions, lack of labels and iconography make me have to guess when initially using the app, what those particular actions may mean. I've added a few more issues I have with the current implementation in the first screenshot below.

IMG_3041.PNG

CURRENTLY IN APP

The problem with this view are:

  • It's not quite clear which is the username (editable) or the user ID (not-editble).
  • The chat, snap, and menu icons could appear more actionable.
  • The number "751" doesn't really tell me  if these are points or something like an area code.
  • And perhaps the menu option (represented by the gear icon, which usually means settings🤔) could better inform me as a user by way of placement and iconography.

 

static1.squarespace.png

REDESIGN PASS ONE

This design is good to me for a few reasons:

  • You can now edit with a tap (no longer hidden behind the gear icon)
  • Emojis and Icons have been added for information context
  • The Snapchat ID (or handle) is now more distinguished from the Username (editable)
  • The actions appear more actionable
  • The menu icon (distinguish as secondary call to action from the chat and snap icons, our primary call to actions) has been added in place of the gear (aka settings) icon
  •  Changed the placement of the primary call to action buttons (I'm willing to guess people take more photos than text or message with Snapchat)
  • The thumbnails for the stories preview are just below the user profile content, which doesn't permit this modal from displaying on iPhone 4 screens.

*Note: This is not to replicate or overly rely on Snapchat's visual design.

static1.squarespace-6.png

REDESIGN PASS TWO

So far, I really dig the direction this is heading. Going to clean this up in another pass.

 

Final Pass

In this pass I explore labels instead of icons for the actions. Though I'm having a bit of fun (which is Snapchat's product inference), even "Nah, I'm Cool" gives me a direct access to the actions that were initially hidden behind the gear icon. To me, sending a nap or message is a secondary action after I've had a chance to vet them, and add them as a connection.

In closing, I think this is a much improved view with some respect to the situation I find myself in when I'm added by new connections. It would be great to see more contextually respectful improvements to the product experience as they continue to roll out updates in the future.