Role
UX/UI Designer

Team
2 UX Designers, 1 Product manager, 3 Developers

Timeline
6 weeks, 2020

Skills
UX/UI design, UX research, research analysis, information architecture, wireframing

Awards
Best Problem Statement, Best Overall Presentation

 

Challenge

People of all ages are affected by severe civil and political unrest regarding black lives in America, and they want to gather resources to stay aware and informed.

How can people easily access pertinent information regarding the Black Lives Matter movement and black entertainment?

Solution

My team and I spent six weeks creating, researching, coding, and iterating the concept for blmresource.com: a website that enables users to access and immediately educate themselves or help the movement.

background

The state of racial tension in the United States in 2020, as a result of police brutality, fueled a massive influx of information about the Black Lives Matter movement. A number of these essential resources had been distributed via social media graphics and Google Docs master lists. While useful, it was difficult for audiences to navigate, source, and relocate.

For audiences of all ages seeking to educate themselves on the current state of the Black Lives Matter Movement, BLMresource.com has created a centralized platform to clarify the abundance of informational resources, facilitating easy navigation and access.

ReSEARCH

56 respondents took a survey that helped me determine how they struggled to find and access information related to the BLM movement. Survey participants shared insights regarding their knowledge of the movement, how they searched for resources, and how they kept track of the information they discovered.

Key insights

🚀

Credibility of sources 
Users are constantly fact-checking each source because they do not know if the information they have received is reliable.

Users worry about being misinformed and the bias of the data being presented.

🚀

Information is not centralized
Due to an overload of resources, users find it difficult to keep track of all the information they are consuming.

There is a lack of clarity in how information is being presented.

🚀

Obscure protest information
Users cannot find a constant flow of information regarding protests.

Locating resources for local protests proves difficult.

Users do not know when or where protests are happening until it’s too late.

Brainstorming & Ideation

To address the issues of decentralized resources and difficulty obtaining protest information, I developed the idea to organize the website’s content into two main categories: Learn and Action. Due to time constraints, we were unable to address the issue of source credibility.

Learn

This section was designed for users to explore subcategories focused on education.

This included well-known and lesser-known Black history facts to media-recommended books and articles (both educational and by Black authors), as well as documentaries, films, TV shows, and podcasts that highlight and uplift Black stories and voices.

Action

This section was designed for users seeking to engage more actively in the Black Lives Matter movement.

It included resources for donating to verified crowdfunding platforms supporting Black individuals affected by racial injustice, links to petitions aligned with the cause, protest support and safety tips, and guidance on contacting government representatives.

Visual Design

Initially, it was difficult to visualize a color palette that wasn't too dull or too bright or had contrast issues.

I chose this color palette to represent the diverse range of Black skin tones. The muted tones not only gave the site a deeper symbolic meaning but also made it more accessible for users with visual impairments.

Mid-fi Wireframes

I applied the color palette to create the mid-fi wireframes.

Solution

The final solution was a centralized website that allowed users to easily explore a wide range of resources related to the Black Lives Matter movement, Black history, Black creatives and authors, films, and more, all in one place.

While blmresource.com is no longer active, you can still explore the site on the Wayback Machine!

if you want to Learn…

 

if you want to take action…

 

For the future?

Support

This would direct users to resources regarding mental, physical, and emotional help. Civil and political issues can have negative effects on a person’s mental, emotional, and physical health, so I thought it would be important to provide resources that could alleviate the distress a user may face.

I would love to implement a search bar for easier website navigation and user login credentials.

 
 

Reflection 💡

What did I learn? What would I have done differently?

Personally…

  • One major difficulty I faced was leading the UX research. I wish I had produced better thought-provoking questions in the research survey, as it may have led to a deeper insight into the issues users faced regarding the influx of information.

  • Though the project leader had her input on the site design, I was the major influence on the site’s UX. I ran my designs by experienced mentors who were volunteering their time to help the interns. Working with mentors made me realize that there is still so much to learn in my UX journey.

Overall…

  • I truly enjoyed working with my team as we all had different areas of expertise; I was able to explain prototyping in Figma to the website developers and they were able to explain a little bit of how React and JavaScript worked. Together, we were able to create a final product that highlighted each of our skills.

  • Our team decided to use a framework that was new to most of our team. This presented both a challenge and an opportunity for us to learn a new framework quickly and utilize it immediately.

  • In the future, I would like to redesign this website in an effort to cater to the source-validation worries of the users as that was the number one issue users expressed.