Designing Hatemap.io: Accessible UX for Complex, Credible, and Community-Focused Data
Role
Account Manager, UX Designer, UX Researcher, Strategist
Duration
14 Weeks
Tools
Figma, FigJam, Figma Slides, Zoom
Team Members
Lillian MacGuire - Account Manager
Rohan Boda - Strategy Lead
Manjot Kaur - Project Manager
Jeffrey Delacruz - Design Lead
The Khalifa Ihler Institute is a global peace-building organization dedicated to fostering inclusive communities and addressing critical issues through targeted efforts. Their website features various initiatives, including The Hate Map, an online resource that tracks and visualizes hate crimes worldwide with interactive maps and dynamic data displays.
For this project, my team focused on improving The Hate Map by identifying usability challenges, addressing gaps, and proposing enhancements to better serve its diverse audience. Our final deliverables included a Figma prototype, a design system, and a presentation detailing our design decisions.
Executive Summary
The Hate Map project aims to shed light on the drivers, perpetrators, and victims of hate-driven incidents while fostering prevention and protection. Our goal was to redesign the user experience and improve communication and media collaborations to make the platform more accessible, user-friendly, and impactful.
During our kickoff meeting with Bjørn Ihler, he emphasized that while the primary audience includes anti-terrorism professionals—such as researchers, journalists, and data visualization experts—the redesign should broaden its reach to casual users and effectively convey the global impact of terrorism.
Project Initiation and Goal Alignment
Figure 1: Kickoff Meeting with Bjørn Ihler
The original design (Figure 2) featured a simple page with a focus on map visualization but faced key issues:
No primary navigation bar, leading to poor information architecture.
Lack of additional pages, limiting content exploration.
An unoptimized footer layout, creating usability challenges.
Weak visual hierarchy, making navigation and content prioritization difficult.
After our meeting, we were able to establish a How Might We statement, and identified 3 key goals.
Evaluating the Initial Website Design
Figure 2: Original Hate Map Website Design
Formulating Our Core Design Question
We created the following how might we statement to refer back to over the course of our research and design creation:
How might we create a more usable, accessible, and engaging hate map website for professionals/communities to spread awareness of the connectedness and pervasiveness of terror incidents around the globe?”
Make the data accessible and engaging while exploring ways to tell complex stories
Keeping in mind that we have a broad user base on the site
Improve the user experience of the site, and encourage community building/engagement
Keeping in mind that community-based content needs moderation
Revise the map to keep users actively engaged and interested
Keeping in mind we have limited data available
Defining Project Objectives
Understanding Goals, Users, and Existing Solutions
We found that the current Hatemap.io website provides limited information about the organization and the data represented on the map. Additionally, the site offers minimal community support.
To gain deeper insights, we analyzed various websites using two research techniques: heuristic analysis (Figure 3) and competitive analysis (Figure 4). In our heuristic analysis, we examined The Hate Map, Khalifa Ihler’s website, and other visualization-based sites covering similar topics. This helped us identify best practices, shortcomings, and key elements of effective data visualization. We used Jakob’s Ten Usability Heuristics for this exercise.
Figure 3: Snapshot from our heuristic analysis - this was us analyzing The Global Peace Index
For our competitive analysis, we studied similar websites, focusing on their structure to inform the potential redesign of Hatemap.io. Through these research methods, we assessed how websites organize and present large datasets, evaluated their usability, and explored strategies for fostering community engagement.
Figure 4: Competitive analysis exercise, locating key elements across websites
Industry Perspectives on Data Visualization
As UX students, we had limited experience working with complex datasets, particularly ones as sensitive as terrorism data. Hence, we reviewed existing literature to understand how blogs and publications represent sensitive topics.
We also interviewed research professionals (Figure 5) and internal stakeholders to understand their research process and expectations when interacting with visualizations and websites.
We created scripts for these interviews to guide the conversations and optimize time.
Figure 5: Demographics of research professional interviewees
After interviewing both users and stakeholders, we conducted an affinity mapping exercise (Figure 6) to distill our findings into meaningful insights.
We then synthesized these insights alongside our competitive analysis, heuristic evaluation, and literature review to identify the following key insights which shaped our design approach:
We can empower users and boost engagement by simplifying data.
We can foster inclusivity and trust by supporting all user expertise levels.
We can build a thriving community by enhancing engagement, collaboration, and communication.
Synthesizing Research Findings
Figure 6: Snapshot of our FigJam affinity mapping exercise
After completing our research collection and synthesis, we felt it was time to start building the structure of the website. We structured the site to have 5 main pages:
A welcoming homepage
An about us page detailing background about the organization
A data page, allowing researchers easy access to data materials
A community page that could help bring people together in the fight against terrorism
A stories page to detail personal stories from those affected by terrorism and an articles page to display the latest news.
We originally thought it would be best to have the stories and articles page shared, but after discussing it with our client Bjørn, he felt stories fit better within the home and community pages.
Applying our Findings
Figure 7: Site map
Design Strategy and Practical Application
These insights lead to the following strategy:
Establish Khalifa Ihler/HateMap.io as a welcoming, trusted, and accessible information hub.
We accomplished this by using the following guiding principles:
Creating a usable website that simplifies data
Highlighting key insights and statistics
Fostering inclusivity among users
Enhancing engagement through clear communication channels
Keeping this strategy in mind, the team began drafting wireframes for the website. These were reviewed and iterated on in an in-person workshop. We decided to use whiteboards at this phase to make designs feel less final and easier to revise.
Figure 8: Wireframe brainstorming workshop
Meeting Client Goals and Expectations
After brainstorming and wireframing, we realized we weren’t entirely sure what content each page needed. To clarify this, we scheduled a meeting with our client, Bjørn, to review our progress and collaborate on defining section headings and page titles.
During the discussion, we also gathered valuable feedback on which content blocks to include on each page. By the end of the meeting, we had a clear, shared understanding of what our final designs should include, ensuring alignment between our vision and the client’s expectations.
Figure 9: Wireframe drafts of the website
Final Designs - Translating Strategy to Screens
Since Hatemap.io was an incomplete site when we embarked on this project, we expanded the site to have more pages. These pages include:
Home
Data (Including a Trend Finder)
About Us
Community
Articles
We also made sure to incorporate our strategy into our design mockups:
Establish Khalifa Ihler/HateMap.io as a welcoming, trusted, and accessible information hub.
Homepage
Be Welcoming
Included a Contact Us banner to encourage users to reach out and tell their stories.
Be Trusted
Highted key data points, provided background on The Hate Map and those who sponsor the project, and detailed how The Hate Map date is verified.
Be Accessible
Redesigned The Hate Map itself, including data filtering tools and more details about each terror event present on the map, giving users more flexibility. A map legend was added as well
Added a navigation bar for easy access to other pages,
Linked social media accounts to make it easier for users to stay connected.
Data
Be Welcoming
Included a banner to invite researchers to collaborate with The Hate Map team.
Be Trusted
Added an option to cite The Hate Map when using data exportation tools.
Included a data dictionary for transparency, and to promote understanding of the terminology used in the visualization
Be Accessible
Added data exportation tools for researchers who may favor working with raw data over using the visualization.
Added a trend finder tool to make it easier to compare events on the map.
Included the map on the data page as well as the homepage, giving users multiple channels of access.
Articles
Be Welcoming
Included a Contact Us banner encouraging users to reach out.
A sidebar featuring the stories section of the website, where users can share their experiences with terror incidents.
Be Trusted
Included authors in the articles section so users know who wrote each entry.
Be Accessible
Added a search bar and filtering tools to allow users to access more specific articles rather than just sorting by what is most recent.
Community
Be Welcoming
Outlined all channels of contact users can utilize to reach out to The Hate Map team.
Included social media handles, encouraging users to get connected and join the movement.
Be Trusted
Included the stories section to give users a voice - this content would be moderated and verified by The Hate Map team, ensuring its credibility.
Be Accessible
Added a list of resources that users can reach out to if they have been affected by a terror incident.
Filtering options are available based on location, affected group, the type of resource needed, etc. to ensure users can get the tailored help they’re seeking.
About Us
Be Welcoming
Included a Contact Us banner to encourage users to reach out and tell their stories, as well as a social media banner to encourage users to stay connected.
Be Trusted
Added a section providing background about Hatemap.io, as well as the organizations who sponsor the project. This helps build transparency.
Outlined The Hate Map mission, allowing users to see if their goals align with their own.
Included a team section to give a face to the people who make The Hate Map project possible. For those who wish to stay anonymous, their role is described without compromising their privacy.
Highlighted notable impacts of The Hate Map to build their credibility as an institution.
Be Accessible
Easy access to contact information and social media handles allows users to quickly contact the team with any questions.
Handoff - Final Client Review and Response
We pitched our final designs to our client, Bjørn Ihler, remotely.
In Figure x you will see a LinkedIn post Bjørn made once receiving his deliverables, stating:
“In the new year I’m excited to begin implementing the designs developed by the team, as well as the strategy to build community around the map, the data, and the global challenge it represents.”
This design will aid him in fundraising to bring the website to life.
Figure 10: LinkedIn post from Bjørn Ihler, our client
Room for Further Exploration and Refinement
If we had more time, we would have implemented the following, but instead recommended these as the next steps for the project:
Mobile Design: Many people, especially those in terror-stricken nations, only have access to phones and do not have computers. Creating a mobile version of the site would ensure accessibility to everyone in need.
Map tutorial: Step-by-step instructions would aid new or less experienced users explore The Hate Map.
The Trend Finder: For this project, we created a static mockup of the trend finder. Implementing this feature would grant users greater flexibility when interacting with the dataset.
The Hate Map: We were given a limited dataset for our mockups, with which we wanted to represent how even large amounts of data could be visualized.
This project was both challenging and incredibly rewarding. It was my first time managing a client with minimal professor oversight, which came with a learning curve. However, once I established a routine, everything started to fall into place.
Great Collaboration = Great Work
After some less-than-ideal group project experiences, I was initially nervous about tackling such a big project with a team of new collaborators. However, this turned out to be an amazing experience. My team met twice a week and worked closely together—sometimes even just co-working silently on Zoom—to keep things moving forward.A Deeper Understanding of Data Visualizations
Coming from a psychology background, my experience with visualizations was mostly limited to graphs and charts in Sheets or Excel. Through interviews with data visualization experts, analyzing other examples, and gaining a deeper understanding of The Hate Map’s data, I developed a real appreciation for what makes a visualization effective.Designing for Diverse Users
HateMap.io had a unique challenge: serving both professionals in the field and engaging novice users to take action against hate. Balancing these audiences required multiple iterations, but the effort was well worth it.