SNAPCHat redesign 2021
This project was a group final for an upper division course, "COGS 187A", taken at the University of California, San Diego. This project was completed by Eva Kuang, Christian Malki, Sherry Zeng, and myself.
Introduction
Why did we choose Snapchat?:
-
It's one of the most widely used social media apps by young adults.
-
The UI on the app is cluttered and we are interested in seeing what how users perform in a usability study.
Who are the appropriate users and are there any limitations (biases) your user selection may have?
-
The appropriate users are those who are already familiar with mobile application usage and are technologically literate. This will eliminate any issues with non-tech users who may struggle with basic functions such as swiping or knowing how to utilize a search bar.
-
A bias users could have is that they may have used other social media apps and their interactions with the Snapchat app may be based on their knowledge of those other apps. Our usability studies can also be affected if some already know how to use Snapchat, while it may be a brand new app to others.
Our interview plan
Usability tasks for our four users:
-
Where would you go to add a new friend?
-
Search for the profile of a current friend.
-
Find the spotlight reels and see what’s trending.
-
Find your memories based on location.
-
Send a “Discover” story to a friend.
-
Find the game “Pizza Cat”.
-
Change your bitmoji outfit.
How we will capture users' answers:
-
In person: We will videotape the user’s hands and the phone screen while they’re interacting with the app. They will narrate aloud exactly what they’re doing. Simultaneously, the note taker will be documenting what they're observing and will reference the video later to document any actions that were missed initially.
-
Remotely: We will record our Zoom session with the user as they narrate aloud exactly what they’re doing. In this case, it will be more difficult to see where the user is tapping and looking, so we will ask them to be extra descriptive. Additionally, we will review the recording afterwards and trace through the steps they were taking on our own Snapchat apps so we can see exactly what they were looking at at the time they were using it.
USER TESTING: ROUND 1
Our analysis of the results of our user testing: What worked, what did not, and a description of the top three usability errors for each user.
USER 1
Hayley (Interviewer) + Christian (Note Taker)
User background: User 1 is 20 years old and a second year student in community college who is transferring to UCLA in the fall. She has used Snapchat for years since it’s a large source for her to connect with her friends and socialize. She is an iPhone user which can have small differences in the layout as opposed to other smartphone devices like Android and Samsung.
USAbility TASKS
Task 1
Where would you go to add a new friend?
Went to the top right corner where the plus sign is in order to add a friend.
Task 3
Find the spotlight reels and see what’s trending.
She has never used the spotlight reels but assumed they were in the bottom right corner where the arrow is located. She was not sure how to see what was trending.
Task 5
Send a “Discover” story to a friend.
Went to the stories tab, clicked a story and selected the arrow to send it to somebody.
Task 7
Task 2
Search for the profile of a current friend.
Selected the left corner where the magnifying glass is and held down on a friend.
Task 4
Find your memories based on location.
She could not find them but tried to look at the memories by sliding up from the camera screen which did not show her the location-based memories.
Task 6
Find the game “Pizza Cat”.
Held her finger on the camera screen in order to open up the games by moving to the left however never found specifically the game Pizza Cat.
Change your bitmoji outfit.
Clicked on your profile in the top left corner and selected the clothing hanger in order to change the outfit.
USer 1 analysis
ANALYSIS:
The user was familiar with each of the standard tasks such as adding a friend and searching for profiles. However, when it came to different features such as using the reels or finding memories based on location, she wasn’t sure. She mentioned that there were multiple ways to perform some of the tasks and that she hesitated to make certain selections because of it. These can make the app seem inconsistent due to the variability of each option.
TOP 3 Usability errors:
-
Did not know where to find certain features
-
Being unsure if different features did a similar thing
-
Did not know the search could be used to look up things she did not know about
USER 2
Eva (Interviewer) + Sherry (Note taker)
User background: User 2 is a 20-year-old girl who goes to UCSD, majoring in Cognitive Science. She has in-depth experience with social medias such as Instagram and Facebook, but isn't too familiar with Snapchat. She describes herself to be someone who “relies on social media”. She has been an iPhone user for years.
USAbility TASKS
Task 1
Where would you go to add a new friend?
Clicked on the magnifying glass, typed the username in search bar or used the camera and hold for scanning function to scan the QR code of the name page.
Task 3
Find the spotlight reels and see what’s trending.
User was not sure what spotlight reels meant.
Task 5
Send a “Discover” story to a friend.
Was confused for some time wondering what a “Discover” story is. Went to send a normal story. Took a while to find the discover channel and send out a discover snap.
Task 2
Search for the profile of a current friend.
From the friend list: scrolled down to find the friend’s name and then click on it to go to the profile page.
Task 4
Find your memories based on location.
Knew where memories are but have trouble finding location-based memories.
Task 6
Find the game “Pizza Cat”.
Did not know that there are games on Snapchat. Tried to type in the name “Pizza Cat” in the search bar and found several of them. Then went back to the filters to see if there was one.
Task 7
Change your bitmoji outfit.
Went to the profile page, clicked on the bitmoji on the top to change. Stated that she was familiar with the function because she had just done it a few days ago.
USer 2
analysis
ANALYSIS:
Overall the user was not familiar with most of the functions on Snapchat. She stated that she hasn’t been using Snapchat that often and therefore, was occasionally confused by the page design. She has only used the chatting/snapping feature to communicate with some of her friends. She had problems with figuring out what several terms meant when we asked her questions. In this testing, we found that the user had difficulty knowing whether different words, situations, or actions meant the same thing.
TOP 3 Usability errors:
-
Consistency and standards
-
User control and freedom
-
Flexibility and efficiency of use
USER 3
Christian (Interviewer) + Hayley (Note taker)
User background: User 3 is a 20 year old male who goes to SDSU. He has used social media such as Snapchat and Instagram since middle school and started using Facebook and TikTok in college. This user uses Snapchat daily and is very familiar with the app. He is someone who relies on social media to stay informed and in touch with his friends.
USAbility TASKS
Task 1
Where would you go to add a new friend?
Tapped on the magnifying glass, stated that you can either type username in search bar or use quick add to add people.
Task 3
Find the spotlight reels and see what’s trending.
Swiped to the right, stated that there’s all the spotlight reels all on display and that you can just click on them to watch them.
Task 5
Send a “Discover” story to a friend.
Swiped to right, clicked on discover story, clicked on arrow on bottom right, gave him option to click on someone’s profile, clicked on bottom right to send.
Task 7
Task 2
Search for the profile of a current friend.
Tapped on magnifying glass and typed in someone’s name.
Task 4
Find your memories based on location.
Tapped on the rectangles in the bottom left corner, ended up in memories but didn’t know how to find based on location. Could only find them organized by date.
Task 6
Find the game “Pizza Cat”.
Tapped on face because he thought it was a filter, scrolled through filters all the way to the right, went to the search filters option at the end and searched up new filters. Typed in “Pizza Cat” and found that there were multiple “Pizza Cats”
Change your bitmoji outfit.
Tapped on bitmoji on top left corner, looked for the button that says edit, couldn’t find it, clicked on bitmoji at the top and then it gave him the option to change the outfit or background.
USer 3
analysis
ANALYSIS:
One thing that we found during this user testing was that there are many different ways to get to the same thing. When asking the user to add a new friend or search for a current friend on their friends list, they used the magnifying glass icon to do both. We felt that the multiple different ways to get to the same place violated the “Consistency and Standards” usability heuristic because this heuristic says that the user shouldn’t have to wonder whether different words, actions, or situations meant the same thing. We also observed the usability error of "match between system and real world". This usability error was seen when the user was asked to find the spotlight reels. In order to find the actual spotlight reels, you need to press on the “play” button in the bottom right corner, but this user swiped to the right and thought that the “Discover” stories were the same thing as the spotlight reels. Here, they automatically assumed that these two things were the same because their concepts are extremely similar and didn’t know the difference between these two phrases. “Spotlight reels” is a phrase only used by Snapchat (and maybe Instagram), so it’s hard for a new user to even comprehend what that means. When there is another category called “Discover” which means “to find something”, one might look in that section to find all the “reels” that are on display, or “spotlighted” for them to discover. The use of this internal jargon leads to confusion among the users.
TOP 3 Usability errors:
-
Consistency and Standards
-
Match between system and real world
-
Aesthetic and minimalist design
USER 4
Sherry (Interviewer) + Eva (Note taker)
User background: User 4 is a 23 year old with a Bachelors degree and currently works as an office associate (constantly using a computer). He has used Snapchat before and other forms of social media daily.
**Person being interviewed originally used Snapchat on a Samsung while the usability tasks were written based on the iPhone interface. There were inconsistencies between the Samsung and iPhone interfaces which could have prompted mistakes that one normally would not make.
USAbility TASKS
Task 1
Where would you go to add a new friend?
User was able to find the add friend button right away from the home screen.
Task 3
Find the spotlight reels and see what’s trending.
User did not have a clear understanding of what spotlight reels were (even though the user is a weekly user of snapchat). Initially swiped down and back after not finding spotlight reels. User clicked on their own profile and found where they can add to their spotlight but not view it. After swiping back to the home page and scrolling through stories, the user finally swiped all the way to the right to find spotlight reels.
Task 5
Send a “Discover” story to a friend.
Attempted to send a Subscription story instead. Then, scrolled down to the Discover section and tried to send the whole channel instead of a specific story. User clicked on the channel and was able to send the discover snap.
Task 7
Task 2
Search for the profile of a current friend.
First swiped left to chat logs to open a chat. From the chat, user clicked on their profile on their icon from chat.
Task 4
Find your memories based on location.
Clicked on the memories icon from the home page but could not find out where to sort by location. Swiped to the map section and tried to look through memories by the search bar. User notices the same memory icon on the home page and presses on that to view memories on location.
Task 6
Find the game “Pizza Cat”.
User stated they were not aware that Snapchat even had games. First, swiped to the right section and scrolled down in each to find any indication of any games. Then, they tried to open a chat with a friend to open a game (User stated that it could be similar to iMessage where games can be played between friends in chat). Found games but it was only co-op and you could not search through games either. Found Pizza Cat game through the search bar.
Change your bitmoji outfit.
Clicked on own profile and click on “Shop Bitmoji Merch” (in person merchandise to buy and not actually for your bitmoji avatar). Exited out and scrolled through profile to find anything related to Bitmoji. Had to scroll slightly up to uncover Bitmoji hiding under the UI and tapped on the avatar to change.
USer 4
analysis
ANALYSIS:
The icons in Snapchat were helpful as it gave an idea for the user where to click. However, it can be confusing for those who are not familiar with these icons for new users and can cause extra errors in clicking when accessing the wrong one (stories tab vs spotlight tab), etc.). Overall, the biggest issue in using the application was the navigation to different features.
TOP 3 Usability errors:
-
Navigation between sections. There were multiple ways to get to a specific section (such as profiles, finding games) or there would be a very specific route (such as finding memories location)
-
Icons for sections could be misleading. The stories tab and the spotlight reel tab had similar meaning icons, causing the user to search through each section unsure where the feature was.
-
Sections would often not include all features expected. For example, the memory section could not have sorted by location - instead you had to go to Maps instead. The game section in chat did not display all games nor offered a search function to do so (co-op games only) - leading the user to only believe such a game does not exist or having to search in the other games section.
competitive analysis
We performed a competitive analysis with three other social media apps: Instagram, TikTok, and Facebook.
Brainstorm: Four ways snapchat can be redesigned
We created digital and hand-drawn wireframes to brainstorm different solutions for Snapchat's navigation issues.
Two high-fidelity interactive prototypes:
USER TESTING: ROUND 2
We had four new users test our two different redesigns of the Snapchat App.
USER 5
Hayley (Interviewer) + Christian (Note Taker)
User background: User 5 is a 20 year old student at UCSD studying bio-med and is in their 4th year. She has used Snapchat for years and is very familiar with the app and its functionality. She typically uses Snapchat in order to keep in touch with her friends that she usually doesn’t see in person in order to keep in touch with them.
USAbility TASKS
Task 1
Where would you go to add a new friend?
-
Flow 2: Went to the search screen and pointed out the search and quick add options available.
-
Flow 3: From the camera screen, she selected the add friend icon which took her to that screen.
Task 3
Find your memories based on location.
-
Flow 2: Went to the memories icon on the camera page and noticed the snap memories location and selected that.
-
Flow 3: Selected the location tab and clicked on the map in order to see the memories based on their location.
Task 5
Find the game “Battleship”.
-
Flow 2: Went back from the “Discover” story screen and saw “Battleship” under the “Games & Minis” Section.
-
Flow 3: From the same play screen, she noticed the “Play Games” icon at the top right corner of the screen and found “Battleship” from there.
Task 2
Find the spotlight reels and see what’s trending.
-
Flow 2: Took a second but found the reels under the home tab.
-
Flow 3: The user went to the locations screen before selecting the play button on the bottom row. Found the spotlight reels at the bottom of the screen.
Task 4
Send a “Discover” story to a friend.
-
Flow 2: Went to the search tab since she noticed earlier that it had the “Discover” stories on it. Selected the first story and pressed the bottom left arrow as it is on Snapchat normally to send to a friend.
-
Flow 3: Went back to the play tab and located the “Discover” section. Once there, she chose a story and followed along with sending it to a friend.
Task 6
Change your bitmoji outfit.
-
Flow 2: Went to the profile tab and selected the clothes hanger to edit the bitmoji outfit.
-
Flow 3: Selected the profile tab and pressed on the “Update Bitmoji” icon which is in blue. Then she was taken to the screen where she could change her outfit.
USER 6
Eva (Interviewer) + Sherry (Note taker)
User background: User 6 is a 20 year old male UCSD student, majoring in Data Science. Has a great amount of experience in social media and smartphones. Had experience but was not a regular user of Snapchat. Used Instagram a lot.
USAbility TASKS
Task 1
Where would you go to add a new friend?
-
Flow 2: Clicked on the search tab on the bottom of the screen, tried to type in the name of the new friend in the search bar.
-
Flow 3: From the camera page, found the “Add Friends” icon on the top. Clicked on it to go to the “Add a Friend” page. Later found the same icon on the “Chat” page. Was able to know that the same icon on the same location of the two pages meant the same thing.
Task 3
Find your memories based on location.
-
Flow 2: Went to the map on the home page first, and then tried the memory icon on the camera page. Was able to find the memories based on location after that.
-
Flow 3: Went to the “Map” page, clicked on the map and was able to see memories based on location. Later found that this function is also available on the profile page.
Task 5
Find the game “Battleship”.
-
Flow 2: From the search page went to “Games & Minis” part. Found the “Battleship” tab and clicked on it.
-
Flow 3: From the “Play” page, went to the highlighted “Play Games'' icon. Battleship game showed up. Said was expecting more options other than the Battleship.
Task 2
Find the spotlight reels and see what’s trending.
-
Flow 2: Went to the search screen first and then went to the home page. Was able to find spotlights on the home page.
-
Flow 3: Went to the “Play” page by clicking on the fourth button on the bottom. Was able to find the “Spotlight” part of the page.
Task 4
Send a “Discover” story to a friend.
-
Flow 2: Had memories of the Discover part on the search page, went to that page, and then clicked on the Discover part. Was able to find the “send” button and successfully sent it to a friend from that page.
-
Flow 3: Went to the “Play” page and clicked on the Discover part. Was able to find the “Send” icon on the bottom and clicked on it to send to a friend.
Task 6
Change your bitmoji outfit.
-
Flow 2: Went to the profile page. Tried to click on the bitmoji headshot, and then took a minute to find the clothes hanger icon.
-
Flow 3: Went to the profile page and clicked on the “Update Bitmoji” tab.
USER 7
Hayley (Interviewer) + Christian (Note Taker)
User background: User 7 is a 20 year old male who goes to SDSU. He uses social media such as Snapchat and Instagram frequently and started using Facebook and TikTok recently. This user frequently uses Snapchat and is familiar with the app.
USAbility TASKS
Task 1
Where would you go to add a new friend?
-
Flow 2: Clicked on search button in bottom middle left, clicked on search.
-
Flow 3: Clicked on search bar at the top, also clicked on add friend button at the top, had trouble going back home after that.
Task 3
Find your memories based on location.
-
Flow 2: Clicked on memories, showed memories based on location.
-
Flow 3: Clicked on location button on the left, didn’t find anything, went to profile on the bottom right and found memories, could search by location or date.
Task 5
Find the game “Battleship”.
-
Flow 2: Clicked on filters, said he’s used to using Snapchat the way it is so that’s where he wanted to look. Clicked on search and immediately found games and minis.
-
Flow 3: Clicked on profile in bottom right, couldn’t find it, clicked on play button and it said “play games”.
Task 2
Find the spotlight reels and see what’s trending.
-
Flow 2: Clicked on home icon, spotlight was at the bottom.
-
Flow 3: Clicked on play button in bottom middle right, found spotlight reels.
Task 4
Send a “Discover” story to a friend.
-
Flow 2: Wasn’t sure what “Discover” meant, went home first and only saw stories, subscriptions, & snap maps. Clicked on search and immediately found “Discover” stories.
-
Flow 3: Clicked on play button, clicked on Discover stories, clicked send snap.
Task 6
Change your bitmoji outfit.
-
Flow 2: Clicked on profile in bottom right, clicked on the hanger/wardrobe button to change outfit.
-
Flow 3: Clicked on profile button in bottom right, had the option to update bitmoji or shop merchandise.
USER 8
Hayley (Interviewer) + Christian (Note Taker)
User background: User 8 is a 21 year old female UCSD student who used to be an avid Snapchat user years ago (now only checks when received a message). User is an avid Instagram and TikTok user.
USAbility TASKS
Task 1
Where would you go to add a new friend?
-
Flow 2: The user initially went to Chat and tried to select the “create New Chat” icon to try to add them through a message. Then they went to the search icon to add a friend.
-
Flow 3: User located the add new friend bottom from the Camera Page.
Task 2
Find the spotlight reels and see what’s trending.
-
Flow 2: User was able to find Spotlight reels from the Home Page
-
Flow 3: User clicked on the Content Page and found spotlight by scrolling down.
Task 4
Send a “Discover” story to a friend.
Task 3
Find your memories based on location.
-
Flow 2: User initially was already at the Home Page and tried to see the overall Snap Maps which does not include personal memories. Then, user went back to profile to see if personal memories were saved there (Thought process verbatim: “I think memories would be personal so maybe it’s on my own profile"). User recalled prior snapchat design and found memories in the camera page and could locate it much quicker.
-
Flow 3: User went to Snapmaps but realized Snapmaps was only for seeing friends. User then went to Profile Page and saw the memory section and opened the Memory Map
Task 5
Find the game “Battleship”.
-
Flow 2: First went to the home page but saw that there were no discover. Then went to search bar and located discover stories quickly to share.
-
Flow 3: User clicked on the Content Page and located the Discover stories and clicked on one. User was able to send to a friend.
Task 6
Change your bitmoji outfit.
-
Flow 2: User was able to find Battleship immediately by going to the search page.
-
Flow 3: User tried to enter Battleship into the search bar (search bar not implemented yet to make sure users are still able to find what they are looking for on their own). Then she went to Content Page and tapped on the “Play Games icon” to find Battleship.
-
Flow 2: User was able to find Battleship immediately by going to the search page.
-
Flow : User tried to enter Battleship into the search bar (search bar not implemented yet to make sure users are still able to find what they are looking for on their own). Then she went to Content Page and tapped on the “Play Games icon” to find Battleship.
FINAL ANALYSIS
LESSONS LEARNED:
-
Snapchat doesn’t need swipe navigation when their tap navigation already exists and has so many options. Having both ways of navigation can be very confusing to users. Sometimes it might even cause wrong navigation by accidental swiping or tapping.
-
Simple instructions of how the tabs and icons should be used are rather helpful, especially to new users who are not familiar with the app.
-
Combining unfamiliar features into one page can help users to distinguish them and save them time exploring on the app.
-
There should be several different routes leading to one important feature of the app (e.g, Discover stories). In this way, the user would be able to use this feature whenever they want.
recommendation of final design
Our redesign of Snapchat focused on navigation of the app, which we found to be the most confusing component during our first round of the user testing.
-
We made use of icons that most users found to be familiar with based on their experience of using smartphones and other social media. What’s more, instead of just giving the users simple icons that they might not be familiar with, we added simple instructions on some of the unusual tabs so that users would be able to navigate through the app because they can recognize all the functions rather than having to learn and recall them. This improved the UX as shown in the tasks of finding a specific game in the app and changing the outfit of the Bitmoji, which were exclusive to Snapchat.
-
By eliminating the “swiping” navigation from the original design of Snapchat and replacing it with “clicking”, users would find it easier to navigate through the app, preventing accidental “swipe” actions which might lead them to wrong pages while they are in the middle of chatting with a friend or looking for features on the “Map” page.
-
Snapchat originally had “Spotlight”, “Discover”, and “Subscriptions” on separate pages, which turned out to be confusing especially for the new users. As a result, we solved this problem by combining all these three features into one page. Users will be able to scroll on one page and see all three of them at the same time, notifying the difference.