Snapchat: A Redesign and Dark Mode Case-Study
Introduction
Snapchat is a multimedia application that in recent years has cemented its market positioning as a more intimate social media platform, with a focus on interactions between friends as opposed to building a faceless base of followers. In their efforts to protect this corner of the market, they have fully embraced an interpersonal approach, and have even gone as far as building out a marketing campaign around the idea of hosting “real friend” interactions on the platform (a not-so subtle jab at Facebook). Snapchat has also continued to push its Discover platform which serves up both third-party content and Snapchat’s original curated shows. This Discover page has been around since 2015 and has been presented in multiple forms — but the latest iteration is arguably the worst. The Discover feature is now an uncomfortable mix of the stories feature, personal subscriptions and a “For You” recommendation section. It has become the least appealing portion of the application, and when compared to the messaging and photo sharing services, sees significantly less traffic and attention.
So, as a user who has watched the app take backward steps with every update, I decided to redesign the overall interface of Snapchat, as well as the discover page to help optimize traffic and regain user attention, all while implementing a “Dark Mode” feature that is becoming increasing popular across mobile app design.
Purpose
Going into the redesign, I will essentially be acting as a product designer, and as any product designer knows there are two main aspects to consider: the visual component and the product component. Snapchat is a highly visual platform, with components of the app blending together such that the offerings can be seen as homogenous. However, when you disaggregate these offerings, the numerous products packaged together become more apparent. This redesign aims to pinpoint which of these products are underperforming, and identify areas of improvement.
The visual aspect of the redesign will mainly be accomplished with the dark mode re-skin of the application. Dark Mode allows for improved visibility for users that are sensitive to bright light or have low vision. The product component is a little more tricky and will entail unboxing the application and rearranging its different ingredients for a more effective mix. The overall goal of this project is: to create a more user-friendly interface that optimizes for performance, traffic and user-retention.
Research
Before I began brainstorming, I created a survey to get a better idea of current user behaviour. The survey population was primarily composed of 18–25 year-olds who have used the app since its inception, and experienced the many updates that have occurred over the years. The survey consisted of the following three questions:
What feature do you primarily use on Snapchat?
What feature do you use the least on Snapchat
Would you be interested in a dark mode for snapchat?
Of the users that answered, 93% specified that the Messaging feature is what they primarily used the app for. On the other hand, 66% of the respondents said the Discover feature is the feature they used the least. The remaining 33% specified that the used the Maps feature the least. Finally, 87% of respondents said they would be interested in a dark mode for Snapchat.
What do these results mean?
Reflecting on these results, it is apparent that more traffic needs to be driven to the Maps page and even more importantly the Discover page. The reason why the Discover page takes more precedence as it enables Snapchat to deploy its ad platform and sell ad space to advertisers and sponsors. Therefore, creating a platform that optimizes user traffic and attention will generate more ad revenue and attract more partners. As for the Maps feature, there are two possible explanations for the poor utilization.
Issue A: Maps feature simply has poor accessibility and therefore doesn’t see that much attention.
Issue B: Maps feature is lacking purpose and is therefore neglected.
Regardless of which case each individual user might justify, it is clear that not only does the Maps feature need to be more accessible but its general purpose needs refinement. I will be tackling both of these issues by introducing greater accessibility and providing user-relevancy.
Wireframes
After reflecting on the data gathered from the survey, I began to build out wireframes to get a better idea of what I would be designing digitally. I focused on building out a bar interface that would make the pages of the app easier to navigate and make the Maps and Discover pages more accessible. I created an entirely separate page for the Discover feature which will feature a Recommendation section as well as a list of categories to make content more accessible.
Sketch Designs
I then brought the wireframes into Sketch and mocked them up digitally. I continued to tweak these mock ups and implement the features recommended in the user research. I built out a black themed mode and created a new interface for navigation. One that features five separate tabs and pulls out Maps and the Discover page.
Navigation Bar
Let’s first discuss this navigation bar. It was determined through the user research that the Maps and Discover feature are two of the least used features on the application. I determined this could be a result of lack of accessibility and therefore brought both features into the navigation bar. The Maps feature was originally packaged with the camera interface and the Discover page was hidden within the For You page. By providing both features with their own screen space, this will help to bring in more traffic to both features.
Discover Page
The Discover page is arguably the most important part of Snapchat’s application behind the camera interface. It is how Snapchat generates the majority of its revenue and therefore needs to maximize attention. I decided to implement a recommendation section for early content exposure and then built on a categories feature.
The categories feature needed to be presented in a way that was aligned with Snapchat’s visual branding. I created multiple different iterations of the category cards as can be seen below. The first two iterations were largely inspired by Spotify’s aesthetic and while they looked good within the application — they failed hold consistency with Snapchat’s branding. Therefore, I decided to go with the final iteration which I believe builds upon Snapchat’s existing visual aesthetic.
Social Page
The Social page was created as a result of unpacking the For You page. The Social page contains friend’s stories, group stories and personal subscriptions. It serves as the core of your personally relevant content aside from messaging.
Remaining Designs
The remaining designs can be seen below. I made a few changes to the camera screen as space had to be made for the different page icons. The profile page also got a new look as it needed to be re-skinned for dark mode.
Prototyping
After finalizing my designs, I then brought them into Figma and begun to prototype. It was my first time using Figma’s prototyping tools and it certainly had its difficulties (I highly suggest ensuring that your designs are the correct dimensions before trying to use a prototyping “device” — rookie mistake on my part), however, I was able to produce a working product with a few simple animations. The prototype can be seen below:
Reflections
I really enjoyed working on this mini-project and definitely look forward to working on similar projects in the future. I think it gave me a surface level understanding of how product designers and UI/UX designers go about their work. Hopefully, regardless of how the changes gets implemented, a dark mode will soon be coming to Snapchat and more importantly, the Discover feature will receive a much-needed face lift. I’d really appreciate any feedback or if you have any questions about the design process feel free to reach out. Happy Snapping and stay safe!
Also, shoutout to Tolu Olubode who took the time to talk to me through this project and introduced me to Figma’s prototyping tools.
