top of page
Black Lives Matter Redesign
Project Length: 3 Weeks
Collaborators: UX/UI: Lisa Le, UX/UI: Susie Żurawiecka, UX/UI: Diego Stevens
Year: 2020
Task: Redesign the current BLM-Canada webpage
Tools: Figma, Zoom, Google Workspace, Miro, Optimal Workshop, UsabilityHub, Google Forms
Overview
What is Black Lives Matter Canada-Toronto
Black Lives Matter (BLM) is a global organization, whose mission is to actively dismantle all forms of anti-Black racism and white supremacy. BLM aims to build local power to intervene in violence inflicted on Black communities.
Problem
The problem was to redesign Black Lives Matter Canada's current website layout into a more modern and cohesive collection of information.
Solution
To optimize the hierarchy, organization, usability, design and layout of the website, specifically, the homepage, donate page and resources page.
​
We wanted to provide BLM Canada with a more credible website, and an intuitive donations process, and organize the information to help educate the masses on the systemic racism within our society.
Research
Heursitc Evaluations
Many layout and design problems were found, such as small text and inconsistent colour schemes and alignment. Bigger problems arose from the usability and organization, such as no universal search bar on the site, illegible and scattered content and broken links on certain pages.
There were certain positive aspects we would incorporate into our future design, such as meaningful imagery, keeping important information above the fold, a good use of breadcrumbs, and making sure contact information was easy to find.
BLM Canada vs. Other Global Branches of BLM
Pros:
Cons:
Pros:
Cons:
Survey Data
We asked users a survey centered around what would not make them want to donate to a charity or non- profit organization. Some of the responses were:
-
If it was unethical, if it wasn’t transparent
-
Not sharing the same beliefs and values as me
-
If the money I was donating was not going towards the cause that they identified themselves with.
-
Sketchy organizations/websites
-
A lack of transparency around spending, ridiculous overhead, backlash from community, affiliation with other orgs I don’t like, white saviourism, discrimination towards marginalized people
-
Unclear objectives
-
Sketchy/scammy people running or operating within the charity
The majority of users believe that the layout of a site is crucial to its credibility. We needed to make sure that our redesign was clean and accurate.
How does the layout/content of a website reflect the organization's credibility? (1-Never 5 Always)
User Testing Previous Site
BLM- Canada is an organization that receives a lot of traffic, so we wanted to see how people reacted to the site itself. The main reason for the usability testing was to see how the organization of the site could be improved and what the pain points were when navigating through the site.
We asked the user to complete three tasks while navigating the website:
-
Make a donation in honor of an individual and then return to the homepage,
-
Find if a specific demand has been met or not and,
-
Find the search bar and use it
The usability test results showed that users liked the simplicity, imagery and colours of the page. The main issue with the navigation was that finding information in a timely manner was not possible because there is no universal search bar.
Users found the wording to be overwhelming, the layout to be inconsistent, and the hierarchy and organization to be scattered.
User Persona
Based on our user research and findings we were able to create our user persona which allows us to centralize the key pain points and needs of our end users.
Definition & Ideation
Storyboard
.png)
Card Sorting
Ours users had an issue with the hierarchy and organization. To address that we conducted a hybrid card sorting sessions with 10 participants to improve upon our information architecture.
Sitemap
We first made our sitemap and then conducted the testing to further iterate. After completing our hybrid card sorting sessions we found that some users had different views on some of the categories. We found that slightly more users felt “Requesting A Speaker” makes more sense to be put in the Resources category instead of the Community category so we made adjustments to our sitemap. The improvements involved the reorganization of some subcategories and addition to the utilities of the site.
Mid-Fidelity Wireframe
During the mid-fi design, we focused primarily on usability, navigation, and hierarchy. Of course, we didn’t want to forget about Sarah and her needs. The main challenge was organizing the information to avoid Sarah feeling overwhelmed. A lot of young adults will be visiting the site, so we wanted to ensure the redesign was modern, professional, and credible so we took what we thought our user persona would be drawn towards.
Establishing Design Patterns
Finally, we established design patterns (a.k.a. component libraries) to create prototypes by compiling components and maintaining consistent visual language throughout the screens. Our idea with typography wanted to keep the bold strong font that BLM is known for but add a more modern and cleaner feel to it. The colors scheme represents the Pan-American flag.
Prototyping & Testing
Preference Test
.png)
.png)
Before we conducted our usability test we did a preference test to see which design users leaned towards. Mixed results and feedback was given, so the decision to merge the two designs was taken. We simplified the B design by having the user decide if they wanted to see the donation box or not, giving them full control.
User Testing
Purpose: To inform design decisions and identify usability issues by revealing areas of confusion and uncover opportunities to improve the overall user experience.
Testing Plan:
Conducted 4 user testing and had them complete 3 tasks:
-
Donate $25 in honour of someone
-
Find information related to carding
-
Locate their social media links.
.png)
15
Responses from our preference test
4
Usability Test
We continued by organized the data on a feature prioritization matrix to determine the level of importance of these suggested changes or pain points. Taking all that information and internal iteration into consideration we move into creating our final hi-fi prototype.
Conclusion & Takeaways
Finding Statistics: From our research, we realized that it was important for people to have full transparency with the allocation of their donations. Unfortunately, we were unable to find statistics or data relating to BLM-Canada online. To further develop this project, it’s critical to know where the money is being allocated for transparency to donors in order to achieve success.
Taking Feedback Seriously: As we completed the heuristic evaluation and proceeded to the testing, we realized it was difficult to not be biased on the redesign. However, we made a very conscious effort to to take all feedback into consideration and in our design.
Stakeholder Contact: After many attempts, we were unable to contact the stakeholders of BLM-Canada. This would have been extremely helpful in developing our case study with full facts. Hopefully in the future, we can establish a contact with them in order to further develop this project. We would love to send them our redesign and show them the research that was conducted on their behalf.
Next Steps: To elevate this project, we would like to contact BLM-Canada to get an understanding of how they allocate their funds. We would also like to create a mobile version for responsive design. Developing the other links is also on the list of things to accomplish (Resources, Community, FAQ, Contact Us, etc) to complete the prototype.
bottom of page