top of page

EQUALITY PROJECT

Landing page, split into two sections. The left side is used for educational research, while the right is personal research.

SITE GOALS

The purpose of this project was to create a website or application that addressed a social justice issue within the United States. I choose a topic that has been popularized by social and traditional media sources: Systemic Racism. The main goals of my site were as follows:

Encourage users to further educate and involve themselves in fighting systemic racism by connecting them to social media accounts, podcasts, and other related sources.

1. 

2.

Educate High school to Graduate school aged students about systematic racism and its effects on people of color in America.

3.

Provide engaging educational content about systematic racism and related topics, for all

types of learners. Including auditory, visual, reading, and kinesthetic.

DESIGN QUESTION: How might I engage students, with all types of learning preferences, in an educational experience based on the topic of systemic racism while simultaneously connecting them to related educational opportunities encouraging them to continue combating systemic racism and related topics.

RESEARCH 

RESEARCH QUESTIONS:

1. How do users currently educate themselves on systematic racism?

2. What challenges do users face when trying to learn about systematic racism in America?

3. How easily are users able to continue their education by connecting to related educational sources (social media accounts, journals, charities, volunteer opportunities, Ted Talks, podcasts, blogs, etc.)?

4. What types of learners (auditory, visual, reading, kinesthetic, etc) need to be accounted for?

5. What form of information do users want to use when learning about systematic racism?

6. What devices do users use when researching systemic racism?

7. What is a user's primary purpose for researching systemic racism (school, work, personal)?

HYPOTHESIS:

I hypothesize that the target audience will require a diverse set of educational material in order to get the best experience. I also hypothesize that the target audience will have a basic knowledge of systemic racism in America, and that they will require more in-depth educational material. Lastly, I hypothesize that the target audience will primarily utilize personal computers to enter the website.

STRATEGY

In order to conduct user research, I utilized a survey as well as a focus group. I created the survey based off of my research and design questions. In order to get a random sample, I sent my survey to a JMU group chat, my social media accounts, as well as to older family and friends. My social media accounts feature a variety of age groups and educational statuses, allowing me to get the best survey results. The survey I created featured a number of multiple choice, check all that apply, and short answer questions. I chose to utilize these forms of questions, in order to get the most accurate, in-depth results. 

 

Knowing that a survey will only provide a certain level of depth, I choose to conduct a focus group to further my user research. The focus group contained six members of different genders and age groups within my my target audience age restrictions (fourteen-years-old to twenty-two years-old). Prior to the focus group I created a set of questions based off of my survey responses. I broke the session into two time blocks and recored the session as I moderated. The focus group provided me with a detailed level of analysis, as I was able to hear the personal accounts and struggles of each member. This method of research also provided me with the opportunity to ask subsequent questions that were not on my list, allowing me to gain insight into problems I had not even considered.

KEY FINDINGS

PRIMARY DEVICES USED:

Mobile Device

40%

Personal Computer

60%

RESEARCH CHALLENGES
Lengthy Articles
Bias
Restricted Access
PURPOSE FOR RESEARCH

School

50%

Personal

50%

DESIRED OPPORTUNITIES TO CONNECT FURTHER
Social Media
Ted Talks
Journals
Podcasts
Charities/
Organizations
INFORMATION FORMAT DESIRED
Articles
Charts/Graphs
Personal Statements
Videos
Podcasts

100%

100% OF USERS WANTED TO LEARN MORE ABOUT SYSTEMIC RACISM

DESIGN REQUIRMENTS

1. This website should feature two main segments, an educational side and a personal research side, because 50% of users research systemic racism for school purposes and 50% for personal research.

2. This website should include “Further your knowledge” sidebar recommendations linking to social media accounts, ted talks, journals, podcasts, blogs and organizational opportunities because these platforms were most desired by users in order to further their education.

3. This website should be mostly desktop and secondarily mobile friendly, because 60% of users utilize personal computers, and 40% utilize mobile devices.

4. This website should feature an equal amount of articles and visuals (including graphs, charts, and videos) with some podcasts because the majority of users desire reading-based or visual-based material.

5. This website should provide icons next to all information sources demonstrating where that information came from (what media source), because users want to know the information is coming from reputable sources.

6. This website should provide icons next to information sources demonstrating whether or not the piece may be biased, because users want to know these sources are unbiased.

FURTHER ANALYSIS OF KEY FINDINGS

After conducting my research, I found that many of my hypothesis's were correct.My target audience did have a basic knowledge of systemic racism, they do need a diverse set of educational material formats, and they do typically use personal computers (although more users used mobile devices than I anticipated). My research, however, provided me with more information than I anticipated. I Learned about the challenges my users face when researching systemic racism, among other topics, the specific educational material formats they desire, the purpose for their research, theIR learning types, opportunities they wish to see, and much more.

PERSONAS 

I decided to create my personas based off of the types of users projected to use the website. The primary persona is a 21-year-old college aged student who is conducting research for her own personal reasons utilizing a personal computer. She is a visual learner and wants to continue to educate herself by connecting to Ted Talks and scholarly journals. This persona was based off of my research, and more specifically, my key findings showing that most users utilize personal computers (60%), they are visual learners (90%), they are students (78%), and they want to connect to Ted Talks and Scholarly Journals (77%). I made lengthy articles a frustration of this persona, as that is a primary pain point of my users.

The secondary persona is a 16-year-old high school student who is conducting research for school purposes utilizing a personal computer. He is a reading learner and wants to continue to educate himself by connecting to social media users. This persona was also based off of my key findings as users are reading learners (5%) and they want to connect to social media accounts (66%). I also made restricted access a frustration for this persona, as that is a pain point faced by my users.

The tertiary persona is a 48-year-old high school optometrist who is conducting research for personal reasons utilizing a phone. she is an auditory learner and wants to continue to educate himself by connecting to podcasts and volunteer opportunities. This persona was also based off of my key findings as fewer users utilize mobile devices (40%), they are auditory learners (5%) , they are not students (22%) and they want to connect to podcasts and volunteer opportunities (55%). I also made bias a frustration for this persona, as that is a pain point faced by my users.

CONCLUSION

Primary Persona: Marley a 21-year old female college student from Boise, Idaho.
Jaden, a 16-year-old high school student from Denver, Colorado.
Stephanie, a 48-year-old Accountant from Louisville, Kentucky.

DESIGN AND FEATURE INSPIRATION

The tertiary persona is a 48-year-old high school optometrist who is conducting research for personal reasons utilizing a phone. she is an auditory learner and wants to continue to educate himself by connecting to podcasts and volunteer opportunities. This persona was also based off of my key findings as fewer users utilize mobile devices (40%), they are auditory learners (5%) , they are not students (22%) and they want to connect to podcasts and volunteer opportunities (55%). I also made bias a frustration for this persona, as that is a pain point faced by my users.

CARDS
image (4).png

This card feature is one which I wish to use in my website in order to display articles related to systemic racism. Visually, the cards are pleasing, while not overwhelming the users with a plethora of text. Cards also allow users to read a short expert about the source, before clicking on it and reading all the way through. The card layout will also provide an easy opportunity to display symbols showing article bias as well as where the article came from.

SPLIT PAGE
image (2).png

This website features four main sections that users can enter to learn about different information. I want to utilize something similar to this, featuring a "personal research" and a "school research" section. This will break my website into the two main categories required by my target audience. The school section will feature peer reviewed, non-biased, school-safe informational content, while the personal side will feature what is provided in the school side as well as more personal annecdotes, accounts, and blogs.

SIDEBAR
image (3).png

This sidebar feature is one that I wish to utilize in my website. I wish to use a sidebar with further connection opportunities such as social media, ted talk, and podcast follow options, as well as buttons linking to volunteer opportunities, further articles, and weekly scholarly journals. I like the card style, where users can choose a category, click the card, and have connection call-to-actions.

ICONS
image.png

Similar to the little social media icons at the top of these articles, I wish to feature icons at the top of my informational content, in order to signify where the new source came from (Washington post, NY Times, Etc.), as well as whether or not the source may contain bias. I think small symbols, will help my users determine whether or not the information source is for them, without having to view the content first.

SITE MAP/MOCKUPS

I created the sitemap using Adobe XD. This site map displays the layout of my site on a navigational level. 

Sitemap.png

MOCKUPS

SPLIT PAGE

As stated earlier, I chose to split the landing page into two segments with two primary calls to action. Splitting the database site based on use cases targets both the education-oriented and general user markets without overcomplicating the site. The simplified design, provides for a quick, filtered educational experience. Users are also able to create personal accounts, storing their previous data, or enter the site without having to provide login credentials. This allows one-time users the ability to access the content without creating an arbitrary account, as well as provides a customized experience for users who will use the database more intensively and frequently.   

Captstone landing page@2x.png
Cards/Icons

upon entering the "Educational Research" side of the database, users land on this homepage. The page is split into sections based on content type (i.e charts and graphics, podcasts, videos, etc.). I chose to use this layout, as it allows users to quickly differentiate between resource categories, as well as filter content more easily. The card layout also provides users with a quick summary or snapshot of the resource content, creating a more streamlined experience. One of the main pain points brought to the surface through my user research, was sorting through lengthy content to find relevant information. The layout of my database, allows users to quickly sift through content, to determine if it will be useful or not, without having to read through the entire source. I also utilize icons which allow users to visually determine whether the content is biased and or peer reviewed or not. This visual differentiation between types of content further aids users in their journey to find educational resources that fit their needs.  

HOMEPAGE – 2@2x.png
Filter/Favorites

I chose to use a filter feature, to provide users with the ability to filter their content based on their needs. Filters are a simple way to reduce the time it takes to search for relevant content. In addition to a filter, I chose to incorporate a favorites folder, where account holding users are able to find their favorited content. In order to "favorite" resources, the user only has to select the star icon on each card or next to the content title upon card selection. This simple method for saving resources, is simple yet powerful in providing a customized experience for returning users. In order to favorite content, users do need to create an account, so any user attempting to favorite a resource without an account will receive a popup modal requesting account creation.

HOMEPAGE – 3@2x.png
Sidebar

As determined through my research, users wanted to see content related to the resources that they were currently exploring. They wanted to view and connect to related resources such as social media accounts, ted talks, podcast, charities, and scholarly journals. In order to provide this opportunity, I utilized a sidebar dropdown. The dropdown provides users with a categorized way to scan and view related resources by category. Instead of having a long vertical scroll and having to sift through various types of content, users are able to select the content category they wish to explore, and follow or view the related material. In terms of social media, uses are able to quickly select "follow" and upon signing into their respective social media accounts, they will have followed that account. Users are also able to view more related content within their desired category by selecting the tertiary "View all related accounts" button. 

Videos @2x.png
Navigation

I chose to use a slide-out hamburger menu, as it works well with responsive web design. As determined through my user research 40% of users will be accessing the site via their mobile device, creating an even greater need for response design. 

Navigation@2x.png
bottom of page