The current state of racial tension in America as a result of police brutality has fueled a massive influx of information about the Black Lives Matter movement. A number of these essential resources have been distributed via social media graphics and Google Docs master lists. While useful, it can be difficult for audiences to navigate, source, and relocate.
For audiences of all ages looking to educate themselves on the state of the Black Lives Matter Movement, blmresource.com creates a centralized platform to clarify the influx of informational resources for easy navigation and access.
Role: UX/UI Designer - User Research, UX/UI Design, Visual Design
Time: Six weeks (June - July 2020)
Team: 2 UX Designers, 1 Product manager, 3 Developers
Awards: Best Problem Statement, Best Overall Presentation
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 find ways to help or educate themselves.
This project helped me understand the design process better and why each step is critical to a user-centric product. Before beginning this project, I was someone who was interested in design but couldn’t really dive deep into learning-based projects. During this six-week internship, I gained vital UX/UI design and UX research knowledge, and understood how to incorporate user research results into product designs.
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.
The goal of this project is to explore different ways people can easily access pertinent information regarding the BLM movement and black entertainment.
solution preview
landing page
The user can choose to take different sets of actions or to learn about the BLM movement/black history from different mediums.
listen
Users can listen to previews of podcasts about Black history straight from the website and have the option to choose to listen further on Spotify’s site.
user research
I created a survey to determine issues people were struggling with in finding and sourcing BLM information. Three main issues I found were:
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 is difficult
Users do not know when or where protests are happening until it’s too late
To address the issues of decentralized resources and difficulty obtaining protest information, the site was divided into two sections: “action” and “learn”.
In the “action” section, subcategories expressed different methods of actively participating and supporting the BLM movement, including donating to organizations, signing petitions, and contacting elected local and federal officials.
Subcategories in the “learn” section provided compilations of resources that allow users to educate themselves, including listening to podcasts, reading books, watching film all on black history, and supporting black entertainment. The subcategory labeled “protest” provided instructions on how to better find local protests and information on protest safety.
Unfortunately, due to time constraints, we were not able to address and find a solution to the issue of source credibility though it was an expressed concern for the majority of users.
wireframes
Note: The final site design did not use the “X”-ed out version of the ‘listen’ frame because it made for easier navigation as users would not have to scroll for a long time just to see podcasts or other streaming links. Instead, the ‘listen’ page of the website reflected the wireframe on the right.
visual design (color palette)
I had quite some difficulty coming up with a color palette that wasn't too dull or too bright or had contrast issues for readability. I ended up choosing these colors because they characterized the different skin tones of black skin. I believe the color palette chosen for the site was beneficial, for it was inclusive for users with sensitive eyes due to its muted contrast and also gave a deeper meaning to the site.
final site
Welcome to blmresource.com!
for the future?
When the internship was over, I played around with the idea of adding another section to the landing page: “support”. This would have directed 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 providing resources to alleviate the distress a user may face would benefit them.
reflections
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 were facing regarding the influx of information, thus creating even stronger designs.
Though the project leader had her own 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 recognize that there is still so much to learn in my UX journey.This project was my first project that focused on specific users and their problems. While this project has room for more iteration, I learned to consider issues from a user’s perspective and focus on solutions that actually benefit the user and not what I, the designer, would like to see.
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.
For the future of this project, I would love to implement a search bar for easier navigation and a user login to create some form of user authentication where users can save information that they’ve gotten off of the site. I would like to add a “support” section to offer resources for users who may be in distress about these challenging civil issues. Finally, 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.