Coyote
Revolutionary tool that aims to combat misinformation by making it a fun and challenging experience and a way to socialize and learn
Overview
Scope: User Research, UI/UX Design, Human Centered Design
Tools: Figma
Team: Gabriel Aganon, Lara Canonizado, Brianna Fredeluces, Alia Ibrahim, Anand Suresh
Duration: March 2021-June 2021
Background
The invention of the Internet has enabled billions of people to communicate with each other, share information, and created new industries in the span of twenty five years. Social media gave rise to a new way of sharing people's lives for the whole world to see, and people could gossip and chat about anything on online forums. However, with the convenience and seeming veil of anonymity, came an increasing issue of misinformation. More and more stories on the Internet were now being fact-checked and found to be fabricated, either for personal or political use. It was a problem that needed a solution quickly, or the public's trust in the new information age could be jeopardized.
Problem Space
We set out to look for ideas for a possible solution to this rampant problem. We first had to decide the scope that our final product would cover. What about misinformation could we attempt to solve? The motivation? Being able to detect and remove characteristics of misinformation? Prevent the spread of posts and comments which are inappropriate?
​
We decided that it was too wide of a scope, and thought of using contextual inquiry to single in on a specific group of stakeholders for our designing focus.
Contextual Inquiry
\
With most social media users being young millennials, it made sense to choose young people between the age of 20 to 23 as our group of focus for this project. We set out to figure out how they liked to use social media on a daily basis through contextual inquiry, such as synchronous screen sharing/shadowing and asynchronous diary entries. After collecting the data, we analyzed how our stakeholders we interviewed would view different posts on social media naturally and contrast it with them describing their patterns and criteria for interacting with posts.
​
We actually found that an overwhelming majority of people preferred seeing entertainment posts such as celebrity news and memes instead of stories about breaking news or politics. They would often scroll past "social-justice", infographics, and reposts of the same story across multiple accounts. This meant that our stakeholders became desensitized to such posts.
The Actual Problem
With our analysis of asynchronous and synchronous observational data, we could conclude that our stakeholders generally preferred more graphics-intensive and positive posts than those which required them to navigate to their web browser or another app to fact-check or otherwise verify that the information in the posts were true. This prompted us to rethink the true problem to misinformation:
​
How can we simplify the process of fact-checking of news posts in general in order to reduce the barrier of entry into independent verification, and helping users find news from a variety of sources?
Personas
Rebecca:
-
Uses Facebook, Instagram, and Twitter
-
Participates in student activism by searching through posts on these social media sites
-
Has a habit of reposting information and stories that are aesthetically pleasing
-
Looks at sources of posts unless she is burnt out
Simon:
-
Mainly uses Twitter and Instagram
-
Browses through blogs and news sites besides social media
-
Just wants to find entertainment, and thinks stories like murder trials boring compared to memes
Samuel:
-
Uses Instagram, Twitter, and Facebook everyday
-
Likes to skim through posts and stories, and looks at the "For You" page on Instagram, which include food, pets, and memes
-
He has no opinion to most content that is shown to him
-
Forms a perspective of a user who does not not scroll through social media for a long time
Lucy:
-
Deals with impact of news daily
-
Aware of techniques that people use to promote the posts
-
Worried about the types of news that goes viral or gets shared much more
Storyboards
This storyboard shows that a browser-extension based fact-checking solution would impact teachers and other working professionals, streamlining their workflow and allowing them to responsibly cater to the numberous individuals relying on them.
This storyboard highlights the theme of "otherness" in terms of misinformation and how that can steer users away from using social media, due to the negative and targeted agendas towards a certain sociocultural group.
This storyboard depicts someone who wants to simply use social media (one of the prominent sources of information our stakeholders use) for entertainment. After all, taxes, work, and study are just a pain to him and he would rather kick back and relax. Unfortunately, this comes with a dark side: he wants to relax so much, he does not want to spend time fact-checking (thus the 4th panel). So, the “Standard Board” arrives, which compiles all the platforms he uses to make comparing information (a critical step in the fact-checking process we found with our stakeholders) easier.
Paper Prototypes
Prototype 1
This prototype consists of a focus of three ideas: ‘grow a tree’, competition based reward system, and game based reward system. In the grow a tree design users would be able to grow a tree based on the total time spent utilizing different platforms that all have common keywords or themes. The first page is a visual representation of the reward being tree, the second page comprises the different platforms used and the common keywords between them, the third page is the total time spent on each of those pages and the number of days completing the task. The second sketch is a competition based reward system where a user can compete with their friends or social group on who has cross-checked the most resources, where one can scan a QR code to share their profile with others and the scoreboard will appear based on their friends activity. The next sketches are ideas for social media compiling apps, which could be dual screen, multi social media platform compiler (similar to GOG) or a hyperlink idea where a user could click on a source that appears on another platform and will redirect them to the original post.
Prototype 2
For my prototype sketches, there are 5 main pages which are home, search, profile, notifications and settings. 2 pages are an expansion of two pages (search -> searched article, settings -> appearance). The home page displays common topics that users have seen and clicked on throughout their social media platforms with their current achievements at the bottom. The search page is meant for users to copy and paste an article link or name within the search bar which then takes them to the article in question, with a check mark indicating that it is fact checked. Following the search, there would be recommendations based on the news source shown in the search page. There are also filters that can help users view new articles from the same news source. Next, the profile page shows the user’s name, bio, and their stats (how many articles they have read, any new achievements that can unlock customizations for the application, and how many hours they have read). The notifications page would show the user any new achievement they have received and any updates to articles they have read but have not been fact checked. Lastly, the settings page has the typical features of an application plus the personalization that we would like users to have when viewing news compared to other applications that mainly only have light and dark mode. The feature that would be specific to our application is the ability to have custom text and background colors best suited for the user giving them more freedom.
Iterations 2-4
After completing the paper prototypes, we moved on to designing on Figma, where would devise a high-fidelity prototype, give it to our stakeholders to test, and then improve upon their opinions. We performed three iterations of this exercise to further refine our feedback so that our final deliverable will satisfy all of our stakeholders. To this end, here are the iterations:
Iteration 2
This iteration focused on bringing the core functionalities of the application, where the home page simply has notifications or quests related to defeating the coyote. The social page shows friends that stakeholders can add in order to defeat a coyote. To the right of the coyote page is a progress page which shows them what they have done to the coyote, as well as how they can better deal with it. This app still felt like that it was deviated from what they were used to on social media. The settings portion of the prototype's navigation bar would be a profile button on a platform like Instagram. Notifications on the homepage of the app also did not seem organized. Moreover, accessing one's friends through the app was not done through a search feature Stakeholders also felt that other aspects of the application were lacking, such as showing a graph for progress.
Iteration 3
In this iteration, the settings portion is completely removed, and is replaced with the profile page. Our stakeholders can see achievements as well as a leveling system: as they defeat the coyote and complete quests, they would receive achievements and level up. By doing so, it further makes the app feel reminiscent of social media.
​
In the home page, instead of just giving notifications, we would do them in an organized manner, separating it according to time sent and whether them were from a friend. We also revised the progress page to be more in line with what our stakeholders suggested. For example, tips would now be provided by a user, his/her friends, and/or the app itself... Additionally, there is a dedicated portion just so that a user can create a tip for himself/herself and/or his/her friends
​
Most of the feedback from our stakeholders were positive for this iteration, except for the style and coloring, hence our last iteration would be to add these details.
Iteration 4
This is an actual Figma prototype. The grayscale aesthetic is removed in favor of an earth-like color scheme that we thought would make the app very soothing on the eyes. Unlike the third prototype, the settings page returns, but on the top-right corner as opposed to where the profile page is. Interactions would also be implemented on this fourth prototype, making it functional.
​
For the most part, feedback from our stakeholders were positive. We made sure that each page of this iteration has the basic functionalities, as well as correct styling and visuals.
Final Prototype
Reflection
This project greatly highlighted the importance of designing with intentionality and deviating away from creating a design that was personal to our needs, truly understanding the importance of not designing ‘from the I’. In other words, we developed a habit to do a 2 step process: 1) asking questions starting with why regarding various matters; 2) intentionally developing a design to address these questions. From this process, we could finally put on different lenses and see the world we are familiar with become more unfamiliar. While challenging to decipher, this unfamiliarity is what makes the process so intriguing for us.
​
As our project already addresses misinformation in the context of utilizing a common platform for information (social media and news outlets), this project still greatly applies to contexts beyond the current pandemic. Despite working in a remote format, we still found ways to interact with our stakeholders and allow them to behave in their usual ways as they navigate pages on the internet. For instance, during our contextual inquiry and prototype testing, we had our stakeholders navigate a page during an interview and even requested at one point for them to record diaries of their routines. As such, our project can be easily applied from both in the current pandemic and to a time without it.
​
​
Personal takeaways:
​
After taking a few design courses, I can say that I have built upon my previous experiences and improved so much from when I first started my design career. Considering that this course somewhat relies on knowing parts of the design process, I felt that I was able to actually stick to what we planned due to the clearly written milestones. I was able to learn more about the human-centered design process and how important it is to step back from the designer point of view and rely on what the consumers want in a product.
I also felt more comfortable in asking questions about “why” we should go through with a feature because of my previous knowledge on using applications and from being in various teams. I did feel like I would get bothered when something does not go as planned as compared to when we would discuss it since things could go wrong if something either does not get done on time or someone does not do their part. For the most part, I enjoyed working with my team and seeing from different perspectives. I definitely think designing with intentionality was also a key thing I learned because I noticed sometimes members of our team would mention a feature but not explain why that feature would be useful in our application and comparing it to inspirations we had.