re-design:
snapchat
OVERVIEW
Challenge
Snapchat is a social media platform for sharing “snaps” of images and video with friends, with other features like news and live video from current events. For the project course in Human Computer Interaction, my team challenge was to redesign features on an existing mobile app to be more user-friendly, without introducing new features. Our goal was to research, suggest, and evaluate a set of recommended changes while retaining the unique qualities Snapchat is known for.
Action
Based on extensive qualitative user feedback, here are the major points of the Snapchat user experience that need a solution:
-
Drawing on Snaps
-
Stories and Snaps
-
Advanced Features (Snap Screen)
-
Chat Functionality
Goals
Improve the UX.
Address user needs based on data.
Respect the existing design.
My Role
As a team we conducted research, user interviews, user surveys, usability tests, heuristic evaluations and a cognitive walkthrough. We created personas based on our research. I created several proposed design sketches, as well as the final mockups for the Snap Edit screen and the magic eraser icon.
Project Duration
This was a ten week course for the class Project in Human Computer Interaction, with iterative and agile approach to teamwork.
COMPETITOR ANALYSIS
As the first step in conducting a redesign proposal for Snapchat, we examined competitors in the social media market. The most significant competitor we identified was Instagram, which would later be mentioned in multiple user interviews as well. Instagram is a mobile photo-sharing application that competes via the camera feature. Similar to Snapchat, Instagram gives users the option to add to their “Stories.” However, Instagram images do not have the "disappearing" feature that Snapchat is famous for, where images and messages vanish from Snapchat after they've been opened by the recipient.
Product Comparison Table
USER RESEARCH
Method 1: Interviews
Each team member conducted 2 face-to-face interviews with self-described active Snapchat users. The interviews were semi-structured, starting with list of questions the team had created as an interview protocol.
Method 2: Survey
To expand user reach, we created an online survey with questions aimed on identifying the primary use cases of Snapchat. I gained insight into their user experience with the goal of determining pain points.
Method 3: Affinity Diagram
The affinity diagram created from the survey was especially useful as a collaborative exercise that helped our team evaluate pros & cons of usability. The largest categories were"Snapchat vs competitors" (namely Instagram) and "Chat Problems.
Key Findings
Typical Snapchat user:
-
is a millennial or younger (under 35)
-
values personal communication with friends & family
-
makes use of privacy options
The opinion of advertisements on the app ranges from “bothersome” to “tolerable”, but worsened after the February 2018 interface update. Following the update, many users expressed disappointment with the lack of accessibility for previously simple features. A common user complaint is that they can’t watch their friend’s snap stories without multiple ads showing up in between. Additionally, the act of finding and watching their friend’s snap stories or their own is much more difficult than before. Overall, these issues have combined to create an unhappy user experience for most new and longtime users.
“It is very confusing and it's hard to separate viewing someone's 'story' and getting in contact with them.”
- User Interview Response
USABILITY ASSESSMENT
Usability Test
The tasks selected for the usability test were simple, in keeping with the intended usage of Snapchat as a social media and multimedia messaging application. After the gathering initial screening information, participants were asked to open their Snapchat application and perform one task at a time. Participants were instructed to use the “think out-loud” protocol and narrate what they were doing and thinking as they performed each task.
Test Participants: 6 volunteer users
Usability Test Tasks: 8
Cognitive Walkthrough
Walkthrough Participants: 6 team members
Walkthrough Tasks: 4
The walkthrough methodology included breaking down each task into smaller subtasks, and evaluating the subtasks according to the following questions:
-
What is the user's goal at this point?
-
Are the necessary actions obviously available in the interface?
-
Once users see the control, will they recognize that it does what they want?
-
After action taken, is feedback appropriate? Will user understand it so they can move on to the next action with confidence?
The team's walkthrough protocol was based on the principles outlined in the Interaction Design Foundation article How to Conduct a Cognitive Walkthrough. Although this method is detail-intensive, it helps to illustrate exactly when key events happen, as well as where the notable gaps appear in the UX process.
Identify the User Experience Redesign Target Points
After UX evaluation methods, and incorporating user research, 4 pain points of the Snapchat user experience stood out:
-
Drawing on Snaps
-
Stories and Snaps
-
Advanced Edit Features (Snap Screen)
-
Chat Functionality
SOLUTIONS
Spotlight: Expandable Labels for the Snap Screen Edit Features
The issue: On snap screen, users are unsure how to use some tool icons, and so avoid them.
My solution: Make the affordances of the image editing features more apparent to viewers upon a glance. Increase visibility by adding a slight shadow backdrop to the icons, implement a “drawer” tab to pull out and display the labels of each tool, and modify the magic eraser icon within advanced edit menu. My sketches and high-fidelity mockups illustrate how this improvement would look.
On the snap screen, it's not apparent what each icon should be used for, and users expressed that they sometimes neglect options because they don't know what will happen.
The effect of the drawer is that if the user wants to know what each tool does, they can swipe or tap the pull tab. This expands the menu to make its use clearer. It can also be collapsed again and ignored by the user entirely, if they should choose.
Solutions for Target Areas
Hover over the boxes below to read a summary of our proposed solutions to the pain points we identified through step-by-step user research and usability testing.
#1 drawing on snaps
solution
Target Area: Drawing
on Snaps
When users draw on their snaps using the marker tool, changing the size of the brush is a pinching gesture. Despite the tools simplicity, several usability problems are present within the current design. When the toolbox is expanded, the user cannot start drawing in the areas where the toolbox is displayed. This could be solved if the interface provided the user the functionality to hide the toolbox before they started drawing. When adjusting the size of the brush, a reference point is drawn to the screen which displays the size of the brush as they are adjusting it. However, once they lift their fingers off the screen, the point disappears. As the user makes the brush smaller, it becomes impossible to see the reference point because the user’s fingers are covering it. This tool is only introduced on the app's first run, so users often forget the feature is there. Some users assumed size could not be changed.
We propose to flow of events for modifying the brush by providing an interface which supports more advanced features. To access the brush’s options, the user simply clicks on the brush tool, which then displays an overlay with a color selection wheel, previously used colors, and a sliders to change size. User can then hide the toolbox by double tapping on the marker icon.
#2 stories and snaps
solution
Target Area: Stories & Snaps
The 2018 major Snapchat update created a large UX problem in the way that stories are viewed. Instead of being together with the news features and official stories (stories by celebrities or verified Snapchatters), all of the user’s stories are coupled together within the same tab as the chats and recent snaps. Other popular accounts are now shown on the Discovery page, with ads. The chats or last snaps feature is no longer chronologically displayed. The issue is that people don't like how the new interface mixes their direct snaps and stories; it messes up the presumed chronological order of incoming content, and it can lead users to be confused as to whether a friend has sent them a specific message or simply posted a story. This major revision was likely done by Snapchat for a purpose, and some users did report that they like it.
To resolve this, we put a drop-down option in the corner: a switch between All, Snaps, or Stories. “All” just shows the screen like it is now in the 2018 update. Selecting "Snaps" shows only snaps, like the classic UI, and "Stories" just shows only stories, again like the classic UI. This creates the best of both worlds, but the starting default is set to "All" to reflect Snapchat's current UI intentions.
#3 snap screen: Edit Features
solution
Target Area: Snap Screen,
Advanced Edit Features
The solution is to create a “drawer” for the tools to hide and show their labels. Initially, it would not display on the screen as to not obscure the snap. But there would be a way to “slide out” the toolbar to reveal a drawer with labels for each of the features. This would help users understand what each one actually does. A slight outward bump in the middle of the vertical toolbar would indicate to the user that it can be pulled left (outward), which addresses one of the concerns from users that there isn’t enough indicators that further actions or features are available.
To address the dilemma of icon symbols being hard to see on white/light images, we added a partial-opacity background area (box for the toolbar/drawer and the bottom, then a circle for the exit on the top left). This should give minimal interference with the ability to view the photo, but still highlight the icons enough to be seen. On the main editing toolbar (and sub menu toolbars) this same partial-overlay area constitutes the “drawer” that pulls out. We also modified the “magic eraser” icon to be more indicative of its purpose. We kept the stars, which are a recognizable symbol for ‘magic’ tools, but changed the big star to an eraser design. This makes it immediately clear to the user that this is both an eraser tool and a magic tool.
#4 Chat Functionality
solution
Target Area: Chat
Functionality
One key usability complaint was how unintuitive it is to tap on each chat message to save it. The real problem here is that the user has to save the chat in the first place! The solution is to let the default chat behavior mimic the group chat behavior. In group chats, a chat message stays for 24 hours before disappearing. This will mostly alleviate the issue. There can also be a setting to change the default chat settings to "always save [x] days", with a 7 day maximum, and thereby let users dictate their control of their chat history.
The second key pain point in the chat experience was the “accidentally calling people” issue. There were multiple reports of how users would press the call button when trying to type a chat message. To solve this, we decided that pressing the audio or video call would require a confirmation (e.g. “Are you sure you want to call John Smith?”). Although generally it is bad practice to add extra steps to an action, the call feature was not commonly used in our sample data. The benefits of adding the extra step to reduce unwanted calls outweigh the risks of adding an extra step. Additionally, these options (video call, audio call, etc.) would not show up while typing, further reducing the amount of accidental presses.