What is Social Savvy?
SavvySocial is an interactive mobile application that provides users with tools to develop and test their media literacy skills. Along the way, they learn strategies for being more savvy, active consumers of social media content.
Context
Originally, I intended for this application to be a web application for desktop/mobile/tablet users. However, during preliminary market research, I learned that the most common means of accessing social media in North America is via mobile phone, and that mobile devices are more popular, globally, than desktop applications. So, I decided to pivot to a mobile-only app to more effectively replicate the experience users have in real-world situations.
The basic idea I began with was that the platform should include learning modules with videos, quizzes, and interactive, realistic “social media feed” activities that guide users through curated content and help them to think more critically about the way information is presented, shared, and monetized online.
My Role
UI/UX Designer
Associated Course
CSCI E-55: Designing Educational Media
Technology Used
Figma
Timeframe
Fall 2022
Also, please note, the prototype version of this app was intended to mimic Twitter-like interfaces. The content was becoming rapidly out of date as I was building the prototype, due to the acquisition of Twitter and subsequent changes to verification badges, misinformation policies, etc. So, the content is likely VERY out of date by the time you are reading this.
Audience
The primary audience for this app is adults (aged 25-55) with basic familiarity of how to use social media networks, but no formal education in media literacy. The secondary audiences are other people (16+) interested in learning how to identify misinformation/disinformation, learn about how social media networks work, or learning how to think more critically about online content.
Focus Group
Once I had a general target audience in mind, I recruited people for a focus group. My primary motivations were to 1) figure out how familiar people were with media literacy and other adjacent concepts, 2) learn about people's media consumption habits, and 3) learn what mediums people preferred for learning new skills.
Before we started, I sent out a survey to collect demographic information. My focus group consisted of 3 people:
- Participant #1 was a Caucasian male between the ages of 36-55.
- Participant #2 was another Caucasian male between the ages of 36-55.
- Participant #3 was a Caucasian female between the ages of 25-35.
A full report, including the full list of the questions asked can be supplied on request, however, here were the main takeaways:
- All of the participants had a passable idea of what “media literacy” was.
- Most of the participants made the most use of Reddit and podcasts for collecting information. One was a bigger consumer of traditional TV news media.
- They had different strategies for verifying information. The majority agreed that “recognizable brands” were their main sources of trustworthy information. The other said they compared information from multiple outlets and relied on conversations with friends and family to uncover the truth.
- They all agreed that the way companies monetized media content influenced what they saw online, but argued it did so in different ways.
Personas
Since the primary and secondary audiences for this product span a pretty wide variety of people, I wanted to include several personas of different age groups and backgrounds that could reflect various different motivations for learning media literacy skills. These archetypes were very much influenced by the focus group participants, as well. Full personas available on request.
"I think I’m pretty social media savvy. Every day my team is using digital media to connect with people. So, I know a lot about the art of online persuasion and engagement."
25
Marketer
Single
Lifestyle Blogs
"As a CS nerd, I was convinced that all of this new tech would be for the better. The reality has been a lot more complicated. What do you do when people you trust share fake news?"
32
Software Dev
Married
Trivia
“I’m only now starting to get into social media, but I notice some patterns in what I see in my feeds, and want to learn more about how platforms decide what to show me and my kids.”
48
Librarian
Married
Karaoke
Learning Objectives
Since this is an educational product, it was imperative that I applied the principles of Backwards Design. This gist is to start the design process by identifying the terminal objectives of the curriculum: what should the user be able to do by the end of the course? What experiences should they walk away with? And how can the designer or instructor evaluate learning has occurred?
In order to catalog these goals, I created a list of terminal and enabling objectives for the product. As aforementioned, the terminal objectives are the end-goals, but the enabling ones are specific activities that will be done to reinforce learning in service of the terminal objective. The enabling objectives are not included in the table below, but I can provide them on request.
Means of Evaluation
This objective is taught and evaluated through the “Fake News Watch” interactive activity in the “Practice” section of the app. The prototype only includes 3 posts, but in a final implementation there would be somewhere between 5-10 for the student to classify. After finishing, the user would receive feedback and a score.
Means of Evaluation
The quiz at the end of the authorship module tests for retention of these details from the reading and introductory video.
Means of Evaluation
This objective is also taught and evaluated through both the
“Authorship” learning module and the “Fake News Watch”
interactive activity. A question regarding spoofing/phishing is included in the module quiz. The concepts of verification badges and URL analysis are introduced in the text part of the module, and assessed in the “Fake News Watch” activity.
Pedagogy
The main learning theories that informed the design of SocialSavvy were behaviorism, cognitivism, and constructivism.
Because some of the most basic principles underlying media literacy topics are things that simply need to be memorized, like definitions for terms users may not have encountered before, the behaviorist approach made the most sense for those things. I included some very simple quiz questions that ask learners to define terms as a quick drill to check recall of those facts.
There was a lot of care put into how to chunk the content in a way that made sense logically, and produce real-world examples for users to connect to. The goal of that is to provide context and information that can be used to make deeper mental connections from a cognitivist perspective. If I ever returned to this project, I'd expand this even more by providing additional feedback as to why a quiz answer or classification in the activity was right or wrong as a user goes through the module.
In the course's readings about constructivism, one of the major takeaways was the importance of situating abstract concepts and “tasks in real world contexts” with “use of examples” as much as possible. So, from the beginning, I knew that I wanted to include, as a learning activity of some sort, the ability to interact with a realistic social media feed. I also included more visual examples inside of the readings, to further contextualize the material.
User Testing
With these personas and the aforementioned learning objectives and theories in mind, I generated two batches of greyscale wireframes for user testing. I did not do A/B testing with these, but instead did two separate "rounds" of user testing (via one-on-one interviews and independent survey) on the wireframes, and then developed the final prototype based on that feedback. In total, I had fourteen surveyees, and 3 live testers. Some of the takeaways from the live tests are as follows:
After integrating some of the solutions to problems exposed during live testing, I developed a new set of wireframes. This new set had slightly more content, as well, based on some of the things discussed. With this new set of mockups, I did a second round of user tests, which were independently conducted by users with the assistance of a survey. The main takeaways from this test were the following:
Potential Solution
Do not present the “I’m Done” button until all of the activities in the module have been completed.
Potential Solution
The wireframes at this phase were greyscale (so obvious solution is to add color), but the importance of high contrast for readability needs to be taken into account in the branding phase. Also, be careful when using grey in final color scheme; users associate it with disabled things.
Potential Solution
Increase text size in places where it is small to make it easier to read.
Brand and Aesthetic
With that (mostly) finalized layout complete, the next step was to develop and execute a unique brand identity. Here are a few slides from a course presentation I did on the branding and aesthetic choices I made for the app:
Last Round of Feedback
With the branding assets in place, and an initial high-fidelity, color mockup complete, I collected additional feedback from my classmates in the form of class forum posts and one-on-one conversations. Here are some of the final takeaways I took from their feedback:
Potential Solution
Updated the logo's colors to use a neutral (white) and brand color (disco), instead of two brand colors.
Potential Solution
Use bulleted lists, images, and interactives when possible to break up big paragraphs. Keep text as short as possible -> offload to video.
Final Prototype
After recieving my final round of feedback, I made the final set of changes to the prototype, and compiled my final report for the course. Watch a demo of me walking through the app below.