FireScout

Motivating online activists in supporting global movements & enacting real-world change.

About the Project

DESCRIPTION

ABOUT THE PROJECT

ROLES

TOOLS

FireScout is an app that helps online activists learn about global movements, how they can help, and which news stories are a reliable source of information. Users can follow specific topics and receive updates so activist movements aren't lost in the news & social media cycle.

FireScout is a 10-week capstone project that spanned from July 2020 — September 2020 as part of the Brainstation UX Design Program.

UX Researcher, Information Architecture, Wireframing, User Testing, Prototyping, UI Design, Branding

Sketch, Figma, InVision, Adobe Illustrator, Marvel

It's 2020, and the world is on fire.

This year alone has seen alarming rates of police brutality, rising fascist regimes, climate disasters, and more. For a long time, activists across the world have been fighting for a multitude of social issues. Statistics show that social media encourages 53% of users to engage in political activity, with 65% of users agreeing that it gives a voice to unrepresented issues. During the COVID-19 crisis, young political activists are choosing to make a change from a safe, social distance.

Yet, “Slacktivism” — a token display of support without tangible, real-world action — persists. One study found that providing positive reinforcement, a compelling story, and a sense of urgency to users drove them to action. Another study encourages using new digital methods to engage online activists. Current solutions do not adhere to these recommendations, causing many movements to lose steam.

How might we motivate social media users to keep track of and support global movements in order to encourage consistent real-world action?

Market Research

My primary competitors were change.org and a combination of social media and carrd.co. Both options allowed activists to compile resources to encourage others to continue taking action. change.org had the ability to send supporters new updates on the issues and it categorized different social movements on its platform. However, it didn't have a transparent donation model with many activists warning that funds sent to change.org went to the platform and not the movement.

A mix of social media & one-page websites made from carrd.co emerged to fill the space. These mini webpages aggregated a number of resources across different topics and social media users would share these sites with their followers. However, this tool was not made for this type of use. Users depended on one person to update the resources & were only limited to a set amount of links.

This led me to my hypothesis. I believe that internet activists need access to reliable, up-to-date education & contribution resources. I will know this is right when I see the following feedback from the market: There is a need to find news on online movements, but users cannot find a consistent news source, thus are unmotivated to continue supporting them.

User Research

After analyzing the problem space, I wanted to reach out to young, social media users aged 19-35 that have participated in online activism. My goal was to identify their pain points & frustrations, their methods of supporting movements, and the digital solutions they hoped to see. I conducted 5 interviews over Zoom calls, and I found that each of my participants had taken action with different types of social issues.

"There are so many layers to these societal issues. I keep reading information and it feels like there’s no end."

- Interview Participant

Interview Insights

Persona

After my research, I created my persona that combined the pain points, motivations, and frustrations of my interviewees. During my time at Brainstation, I was taught that personas were the most extreme use cases for the product or the person who would find the most use. I built this product for the activist whose government system continues to fail them, but they can't sit idly by for change anymore.

Meet Amelia Thomas — a 24-year-old vocal, human rights activist. She’s educated in American social movements and some international movements. She wants to stay updated on global movements but struggled to find reliable news sources. She also wants to encourage her peers to take action, but her resource sites aren't up to date.

Taskflow

It was time to translate my findings into a solution. I created a task flow for "finding & taking action on a social issue". Users can easily find issues relevant to them by exploring categories. After, they can continue learning about the issue through external resources and incentive reading goals. They can also find links to donate, sign petitions, email protest & more to support the movement.

Sketches & Wireframes

After building my task flow, I started sketching out low fidelity wireframes. My first round of sketches centered on staying updated with news articles. Although, once I finished, I found it didn't speak to the insights of my research. I wanted to encourage users to both learn and take action. My second round of sketches reflected my new goal.

From there, I built my greyscale wireframes.

User Testing

After finalizing my first prototype, I conducted two rounds of usability testing each with 5 users. Every round of testing brought new improvements to the app. These interviews were conducted remotely over Zoom. I also A/B tested action buttons with my participants. I wanted to discover which one users would click first to better sort the cards.

The user was tasked to do the following steps:

1.  The user navigates through categories for Race Relations topics.
2. The user selects the issue card titled “Justice for Breonna Taylor”.
3. The user learns more about the topic in the Summary tab.
4. The user selects a reading resource.
5. The user selects one of the action buttons to donate, sign petitions, or send emails to government officials.

Visual Design

Now that the wireframes were adjusted. It was time to think about how my brand colors would incorporate into my app. I wanted to convey a message of unity, hope, justice & knowledge. It’s easy for activists to lose hope and I wanted this product to be a beacon of light to inspire people to rise up. The brand’s goal is to inform users about global issues and empower them to take action.

As for my colors, my brand used a fiery bright red balanced with cool tones. Red is associated with passionate feelings, with brighter tones showing the energy of activist movements. Dark blues symbolize strength, reliability & responsibility. Finally, a secondary orange — or red-orange — symbolizes friendliness & excitement.

Wordmark & Logo

I wanted to use a short, symbolic name that represented activism, sharing the news, and shining a light on underrepresented issues. FireScout was inspired by the app’s ability to scout for tragedies happening in the world, which I had dubbed as “dumpster fires” in a presentation. It was also inspired by the indie game: Firewatch — a story of a fire lookout uncovering a mystery in the Wyoming wilderness.

After deciding on the brand name, I explored different fire-related images. The logo with the fire and binoculars made the best sense with the brand name. It communicated the name clearly, didn’t have an overly-complicated silhouette, and matched the moodboard & brand values the best. I decided on a sans serif wordmark but chose a bolder font to give it more impact. A sans serif font was most commonly used with activist brands and Poppins' rounded letters matched the logo’s curves. I also played around with the spacing to match the logo better.

Meet FireScout

Discover issues around the world or closest to you.

FireScout tracks everything from local campaigns to international movements. The Discover page is divided into two sections. On the Discover News page, Amelia can follow a range of issues based on what's trending or on her preferences. There are also success stories at the bottom to remind her that her actions do make an impact.

Amelia can also explore issues based on categories. She can currently see all the categories she is subscribed to. Issues are not constrained to one category. 

All the latest information right at your fingertips.

The issue page is the heart of the app. At the top, Amelia can get a brief description of the issue with the option to educate herself. Below it, are all the different ways she can lend her support. After, she can read fact-checked news sources help her stay updated. For transparency, there is an option to learn about the organizer at the bottom.

Become a more informed supporter.

When Amelia clicks the Educate Yourself she is directed to a page with a comprehensive timeline of events. It is important for activists to be informed before taking action. The Resources tab will provide her a recommended reading list vetted by moderators to give her a look at the bigger picture. A progress bar serves as an incentive for Amelia to keep learning.

Find new ways to take real-world action.

FireScout's biggest feature is its ability to aggregate all the different ways activists can lend their support. Amelia now has one place to find all the ways she can make a change from petitions to emailing government officials to donation links and more. FireScout also uses an email template generator so that activists like Amelia can quickly send protest letters to local government.

Future Considerations

FireScout was built on tight deadlines thus requiring me to build the minimum viable product. I am proud that I was able to build its core use — learning about social issues and taking action. I was limited to the activist perspective of my persona, but I would love to discover how this product would apply to the casual social media user. Another component of the app was how it was moderated by a team and accepts resource submissions from the community. This is another user perspective that could also be built upon. Finally, I would also like to build the screens for the updates and favorites screen since these are the screens that seasoned app users would use the most.

What I Learned

When in doubt, remember your project goals

Many times during the design process, I would run into decisions that threw me in a loop. Whether it be a research decision, a feature in my app, or the branding, I always went back to my How Might We. It is important to bring all your decisions back to your user and their problems. User experience design is about bringing a solution to the problem, not forcing the problem into your design.

You are not your user

I entered into this problem space with my own preconceptions of what activists want. After user interviews, secondary research, and user testing, I learned that there were needs I would not have known had I built without consulting other people. The feedback I received helped me grow my prototype, make my designs clearer & truly empathize with my core user.

Embrace the Ambiguity

This was a core lesson taught to me in my program and I felt this the most during my capstone project. At first, I didn't feel like I was worthy enough to take on this problem space. I was not the most knowledgeable or experienced in activism & protests. I was afraid that this would not address the ideal user and instead make light of their needs. Yet, I wanted to dedicate my capstone to something that didn't have the digital solution that it deserved. Over time, my product improved from research, listening & empathizing. I became a better designer and also a better person.

Let's chat! You can reach me at

hello@tiffanycyap.com

Check out my social media pages