Two angled iPhone mockups of Justly app against a soft purple background.

Justly

In the summer of 2020, amidst the COVID-19 pandemic, racial justice and its influence on social media became prevalent due to the Black Lives Matter movement across the world. Along with these public cries for social justice reform, social media acted as another outlet for many to express their opinions and support. With renewed interest and empowerment in justice, many were looking for guidance in how to expand their understanding and critical knowledge of the world. Justly is an app that allows adults to engage in actionable activism with a focus on reliable education, self-reflection, and personal growth.

Role:

User Research, UIUX Design

Time:

Twelve Weeks (June - August 2020)

Team Members:

Alekhya Yallapragada, Nadia Anees, Elan You

Challenge

Busy and developing activists, at various levels of expertise, need a safe, encouraging, and efficient platform to access accurate resources regarding prevalent justice issues with a focus on self-reflection and personal growth.

Solution

We spent twelve weeks interviewing, researching, conceptualizing, and creating Justly, an app that provides resources to help people engage in personal activism in a sustainable and informational manner.

User Research

Surveys

We created a survey to better understand our users' backgrounds and needs. Beyond asking about their ages and stages of life, we also asked about their familiarity with racial injustice and activism, as well as their sources of education regarding these topics. The majority of respondents, out of a total of 51, were in their late teens and early 20s, which fits the college student demographic.

User Background & Information

Age distribution bar graph of survey takers
Survey question on which products are commonly used: Website, Mobile App, Chrome Extension
Survey takers interests on social media
Survey question on where they get information regarding racial inequity

Racial Injustice and Activism

Survey Question: How familiar are you with racial injustice?
Survey Question: What is your impression of activism?
Survey Question: Do you regularly shop Black-owned businesses?
Survey Question: How much time daily are you willing to spend learning about racial injustice?

User Interviews

Our team conducted 2-4 interviews each, resulting in a total of 12 user interviews. Our questions were broken down into three segments including general background information, activism, and digital activity. Our insights greatly helped us better understand our users before creating personas to reflect back on throughout the design process.

Application vs Chrome Extension

Since most of our users get their information online, we tried to asses which method would benefit our users the most. While many were familiar with Chrome Extensions through word of mouth or advertisements, they did not actively search or use the Chrome Web Store. Additionally, most of our users did not associate Chrome Extensions with progress or knowledge. Due to social media and news outlet contributions, our users expected knowledge to come from mobile or desktop applications. Twitter, Reddit, Google News, and Instagram were some of the top choices for activism information.

"A huge barrier to people using Chrome Extensions is simply that they don't know where to find them. Being part of the app generation means that we use social media and other apps to spread information and engage in conversation."

Advocacy

Users wanted to make a difference for racial equality and equity. How? 
Users suggested personal education, self-awareness, and respect for others, regardless of background. Many also pursued significant change by having difficult conversations confronting inequality and inequity, improving their workplace and personal relations, and petitioning.

"I strive to educate myself and others through discussions, events, and research. I make sure to address friends and families to help explain this point of view with facts and reliable resources. I'm working on uplifting others in my classes and workplace as well." 

Passive Activism

Users were not engaging in activism as much as they hoped to be. Passive activism was much more prevalent. Why?
Some barriers like COVID-19 were temporarily preventing physical participation, but many users said money and time were in short supply. Researching is very time-consuming and dauting considering there are few accessible roadmaps for specific justice topics, and many of the younger users were not making enough income to make significant contributions to aid funds. Another issue was sustainable activism to prevent burnout.

"Scouring the Internet to hunt for information isn't as high on my list of priorities as personal and professional development. I'm also worried about burnout so I limit exposure to a certain extent, which I acknowledge is a huge privilege. I haven't been able to participate in protests due to familial situations and COVID-19."

Preferred Methods of Learning

Users preferred articles, videos, and podcasts for online learning. When given articles, they wanted easy accessibility through summaries or clear snippets, and emphasized reliability for sources.

Persona

Meet our user, Amanda the Activist.

Through the surveys and user interviews, we chose our persona as a female college student between the ages of 18 and 25, who uses online resources like social media, articles, and news outlets to take part in activism and raise awareness. She is both interested and dedicated to learning more about justice issues around the world.

Persona Description Image

Ideation

Affinity Mapping

After finishing our user research, we used Figma to create a set of virtual post-it notes using the "How Might We" method to conceptualize and prioritize our insights. We collected and categorized these ideas into We each made a set of "post-its" using the "How Might We" method and then shared our ideas. Next, we collected these ideas into six categories, including Accessibility, Personalization, Sustainable Activism, UI, Education, and Content. Based on these categories, we then cast three votes each to prioritize our insights and goals.

Pain Points

From our affinity mapping we were able to prioritize insights and gather specific pain points from our user research. A few important issues that came up include: 

1. Activist Burnout

As can be seen from our user research, activist burnout was a worry amongst users, especially since many more entertainment platforms were being used to raise awareness on justice issues. A great way to prevent this is to emphasize an easy integration of activism in users' daily lives. By displaying information in digestable pieces on an intuitive platform, users will be able to educate themselves in a much more sustainable manner. A user-friendly and personalized experience will combat information overload and provide a safe space for users to grow.

2. Limited Time for Self-Guided Research

With such busy schedules and rampant misinformation, our users weren't able to spend as much time on activism and justice as they wanted to. By providing reliable resources for both quick and deep learning, we can encourage a well-rounded education with less time spent searching for reliable sources. In this way, users will have easy access to learning and an improved experience participating in topics they truly care about.

Sketches

After collecting our user insights and prioritizing our goals, we each made sketches of a mobile application that highlighted and addressed the user pain points. We analyzed each of our sketches by discussing what we liked, what we did not like, trade-offs, ideas for improvements, and any other general notes. This helped us consolidate our visions into a more cohesive result.

Elan

Alekhya

Nadia

Mine

Wireframing

By discussing our sketches, we were able to get a better understanding of which features were most important and how to structure our information. This led us to the wireframing stage, where we used the information architecture to start displaying the most important characteristics of the application in user-friendly layouts.

Features

1. Navigation

Since the main goals of this application include allowing adults to explore and learn at their own pace, we created four distinct tabs in the Navigation bar. The first, with a home icon, is for the Dashboard, which displays recently visited items and trends. Next we have the Explore tab with a magnifying glass icon, and the Learn tab with a book icon. The fourth tab is so that the user can easily access their profile and settings.

2. Journaling & Bookmarks

We included a journaling and bookmarks feature to foster self-reflection, more casual interest in activism, and prevent users from feeling overwhelmed or burnt out.

3. Learn Section: News and Education

The learn section has both news and education resources so users can stay up to date and receive reliable information from a trusted source and have a collection of resources at their fingertips to better understand complex issues. We also broke the specific topics down into categories called Read, Listen, Watch, and Quick Finds to allow for different methods of learning with various time commitments to provide users with a well-rounded education.

4. Combining Personal and Justice Interests

By being able to select both justice topics and interests, users will have a more personal experience with an easier and smoother integration into their daily lives. The explore tab promotes businesses and activists related to the interests that the user cares about, which should encourage more time spent on activism as a whole.

Lo Fi

Mid Fi

User Testing

With Mid Fi wireframes completed, we each conducted two user tests to gather feedback on our current structure and how well we were addressing our users' needs. This first iteration of these designs helped us understand that the main goal of a personal growth app for activism, free of social pressure, should place justice topics at a higher importance than interests. As such, the explore page should lose the trending section and replace interests with the chosen justice topics.

Our Solution

1. Onboarding

The onboarding includes a simple and highly visual grid so users can select their interests and justice topics with ease. The justice topics are automatically added to the Learn page, while the interests are used in the Explore page and added to the Profile page. This allows for a more personalized experience, encouraging users to learn and grow.

2. Dashboard

We created a clear landing page that acts as a summary and invitation to users. User testing led to the progress bar for stronger motivation to complete tasks and limitation to three sections to prevent information overload. The second section connects to the Explore page, combining justice and personal interests, while the last section contains trending news with listed sources to keep users up-to-date.

3. Explore

The Explore page involves users in activism by introducing businesses, non-profit organizations, and other activists based on users' interests, separated by topic. The goal of this section is to expose users to organizations and people that support the users' justice topics and interests. This will encourage users to participate in activism in tangible ways, like changing their spending and viewing choices.

4. Bookmarks

We included a bookmarks feature to allow users to return to non-profit organizations, businesses, and people that they liked from the explore page. This allows users to work around their busy schedules while still maintaining an activist lifestyle.

5. News

We created a divided Learn page to allow for daily news updates and focused education on specific justice topics. The News section provides both trending articles based on popularity and urgency to ensure users stay up to date. As one of the user needs is to limit time spent searching for resources, we also added three articles per justice topic to allow for quick and specific updates.

6. Education

The Education section within the Learn page is dedicated to providing users with resources to gain a better understanding of largely historic issues. Our user tests indicated that the trending buttons at the top were confusing and the user journey to resources needed to be shorter. We tried to make the app as accessible as possible by appealing to different methods of learning.

7. Profile and Journaling

The Profile page contains bookmarks, personal interests, and a journaling section for quick access to saved material and interest changes. Through testing, we learned that users highly enjoyed the aspect of a journal to decompress from activism and share any insights they might have gained while researching. This appealed to the user need for personal growth in education without social pressure and to alleviate potential burnout.

Welcome to Justly

Final Prototype

Reflection

Future Improvements

  • I'd like to continue iterating on this project with more user tests and other insights. I'm sure there are more possibilities and features to strengthen the design and create an even better user experience.
  • Since this app is so resource-heavy, I'd like to see if there are more bite-sized, interactive learning methods that can be included. As of right now, our users are directed to third-party articles and resources.
  • I believe there can be other ways to personalize the experience beyond interests and a profile page, such as customizing other viewing modes. I'd like to look into a dark mode version of the application as well.

Takeaways

  • As this project was completed during the COVID-19 pandemic, our team had to communicate and work remotely. While we expected possible problems with user research and testing, we planned well in advance and chose effective methods, such as virtual sticky notes for affinity mapping.
  • Working within a team with different backgrounds and experiences led to some differences in opinion, but we always focused on best design practices for our users. By explicitly and repeatedly circling back to our goals and the users' needs, we were able to easily consolidate many ideas.
  • I learned a lot in regards to visual design, wireframing, and prototyping. Figma is an amazing tool with various plugins and support system, helping us create an aesthetic and strong user experience.