Published on | Prototyping: From UX to Front End — Medium Lianne Yun

This is Part 3 of this series. Click here to read Part 1 and here to read Part 2.

It’s no secret that sketching intimidates me. Even before I started this UX/UI bootcamp, I knew it would be an obstacle for me. However, wireframing from scratch on Sketch is super unproductive and frustrating for me. So, I had no choice but to grab my favorite Staedtler Triplus Fineliner black pen and a stack of paper and get down to business.

If I could ideate as well as Li Shang can smash clay pots, I’d be the greatest sketcher the UX world has seen.

For my ideation phase, I chose to do some Crazy 8’s. Crazy 8’s is a core sprint method that pushes you beyond the scope of your first idea, which is frequently not the most innovative. It generates a plethora of solutions to your project, and I find it the most effective for finding bits and pieces of a solution to later combine. I personally love Crazy 8’s because I’m forced to shed my extreme Type A perfectionism and quite frankly, no one gives a crap how beautiful your Crazy 8’s look. All in all, it’s not only a good sketching exercise, but also an exercise to push past my comfort zone. I was able to iterate through several repetitions of the exercise until my flow eventually took shape.

Next up was my main user flow. For this, I decided to explore the current app and see all the possible flows I could take from each screen. What resulted was nothing short of a nightmare. I found that from the main landing page (the camera), there are FIVE possible flows you could take. Now that in itself isn’t bad, but what makes it confusing are the following:

There isn’t a consistent gesture to access each screen
Each screen leads to more or less the same screens
The Search bar at the top does slightly different things, albeit looking the exact same on each screen

There is a lot of unnecessary repetition, and the app is completely saturated in content. The information architecture in the app is also confusing. For example, why are the trending stories the first thing that pop up when you press the search bar in Chat? Shouldn’t the content be related to your chats? Additionally, there are a whopping SIX ways to complete the simple task of adding a new friend — something that could definitely be streamlined. This short analysis was enough for me to know I had my work cut out for me.

As I set out to complete my wireframe, I knew the three main pain points that I wanted to address with my redesign.

1. CLARITY

No matter how cool or beautiful an interface looks, it doesn’t matter if its usability isn’t up to par. This is the case with Snapchat, as it has some of the most novel features of any social media app of our time, yet still can’t manage to retain its users. From my user research, I found it more often than not that users would download the app, but would lose interest within a week due to the confusing nature of the platform. Thus, my solution for this pain point was to make the app more accessible. And what screams accessibility more than a navigation bar?

Current Screen | Wireframe | High-fidelity Mockup

As you can see, I immediately went for a bottom navigation bar. Although the items on that bar slightly changed in my final version, the idea stayed the same — keep the camera function in the middle, since that’s what makes Snapchat unique, and then spread everything else around it. I also stripped the top half of the screen and only included the typical camera functions on top. No more hidden Search bar, and no more accessing your profile from the top — the top of the screen is more difficult to reach since most users hold their phones with one hand, so I definitely wanted to limit what I put up there. One of the most confusing parts about Snapchat (and something my parents constantly ask me about) is how to get the fun dog-ears and other miscellaneous filters to show up. Currently, Snapchat forces you to hold down on the screen — something that’s always made no sense to me. As you can see in my final version, I put an icon in the middle of the flash and flip camera icons. This way, it’s a simple tap for users to access all the fun filters that made Snapchat so popular in the first place.

The editing features once you take a photo or video on Snapchat are also very confusing. To start off, they’re all over the place. The “save” and “add to story” buttons are on the bottom left of the screen, while the others are vertically aligned on the top right hand of the screen. How Snapchat decided to distinguish the categories of these icons, I cannot tell you. But what I can tell you, is that they’re not in the most accessible positions.

Current Screen | Wireframe | High-fidelity Mockup

Following in the footsteps of my bottom navigation bar, I decided to position all the editing features at the bottom as well. But, I ran into some issues with distinguishing the main navigation bar from the editing bar (as seen in my wireframe above). After lots of user testing, I finally took inspiration from Pinterest’s radial menu style (thanks to my colleague Rebecca!) and implemented a static radial menu that was slightly translucent so that it didn’t get in the way of the photo, but was easily noticeable for users.

2. CONTENT

People hate ads. That’s a fact. OK, maybe the Superbowl ads are an exception (sorry to bring out the onions). What makes ads bearable though, is if they’re targeted to their audience. Currently on Snapchat, I swipe past dozens of ads for makeup, fashion (brands I can’t even afford to look at), candy, etc. Do they know that I have zero interest in these trends? Probably not, since they never asked me what my interests are. But put an ad about dog toys with cute puppies in my feed? In no time you’ll see me buying yet another Kong for my furry friends. From my surveys, I found that one of the main reasons non-Snapchat users don’t like social media, is the flood of ads and content that they are bombarded with. I went about my solution two-fold: an option to customize interests when onboarding new users, and a “Suggested For You” feature, akin to Instagram’s “Videos You Might Like.”

Current Screen | Wireframe | High-fidelity Mockup

As you can see from my final mockup, I highlighted three categories in the “Discover” section. I wanted to have the “Around You,” which draws similarities to the City Stories and Campus Stories that Snapchat has. However, now you can access them in two taps, rather than a few taps and a couple swipes. Because we’re all social climbers, I also included a “Trending,” which again, Snapchat already has, but isn’t very accessible (I only found that feature three days before starting this project). And last but not least, is another feature that’ll make procrastinating even easier. The “Suggested For You” is personalized, curated content that stems directly from the interests that you select during the onboarding process. Of course, if your interests change, you can always go back and add or remove topics. This will keep users on Snapchat longer than the current average daily time (~20 minutes), since they’ll have content that they’re interested in spending time to watch.

3. COMMUNICATION

The reason users come back to their beloved Snapchat is the rapid-fire pace of communication with which they can send photos and text. That being said, it can still be streamlined and made even easier with some slight changes. An interesting insight I found in my research is that Snapchat users send photos/texts to the same 5–10 friends. Keeping that range in mind, I focused on how I could make it easier to communicate with those 5–10 friends. One way was to configure the chats screen differently. Clearly, there had to be something done if there’s a whole Emojipedia on Snapchat. All the different symbols — the square, triangle, etc — are confusing enough that there are several pages worth of Google searches that walk you through what each of them mean. In the wireframe, I toyed with separating the photos you send from the texts you send (with the intent to solve the pain point of not remembering the chat you sent to your friend 4 hours ago), but it proved to be inefficient and if anything, made it even more confusing. Separating the photos and chats wasn’t necessary since users used them equally to communicate with one another. I knew that they should all be on one page, but displaying all the content proved to be a bit of a challenge.

Current Screen | Wireframe | High-fidelity Mockup

Focusing on the point that users typically contact the same 5–10 friends, I chose to highlight the six most recent people you’ve communicated with by creating a little grid at the top of the screen for them. The little circle color indicators show what kind of message you haven’t opened yet (text, photo, or video), and how many of each type.

Finally, I wanted to streamline the process of sending a photo to your friends. For an app that’s loved for the speediness of sending a photo, it’s actually not quite that efficient. Snapchat made it a little better with their updates that added “Best Friends” and “Recents” — yet it only seems to make the process of finding the name easier, not the actual action of sending the photo. Currently in the app, you have to individually add every single person you want to send the photo to. I first tried adding an “All” button at the top of the screen (see wireframe below), but during user testing, all my testers either (a) didn’t see it or (b) said they’d never use it. So back to the drawing board I went.

Current Screen | Wireframe | High-fidelity Mockup

This was a situation where the solution proved to be the addition of a single button. Literally, that’s all it took. After allllll that ideating and testing. But alas, the joys and pains of UX. In this case, adding a circle button that automatically populates the checkboxes of all your best friends with one single tap was the golden ticket answer.

My mom’s the real MVP for facilitating my nightly FaceTimes with my dogs back home.

Two weeks to redesign Snapchat. I originally set out to focus on a single feature, but as I got more engrossed in the project I couldn’t help but get my hands dirty with other areas of the app. It was simultaneously the fastest and slowest two weeks — there were some days that dragged and others that flew by. Now that it’s over, I almost wish I had carried a video recorder around with me and captured the whole process. And not just mine — my colleagues, our incredibly patient mentors, and the office staff that had to deal with all of us sprawled all around the building — I’m sure we would all have a good laugh about it…someday. For now, I think we all need two weeks’ worth of sleep and a lifetime’s supply of black pens and Post-it’s.

PS. I’ll include a full interactive prototype on this post as soon as I transfer my interactions from Flinto to Marvel!

Saving Snapchat: A Case Study (Part 3) was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Saving Snapchat: A Case Study (Part 3)

Cool stuff, every week

More Articles