Advocating against gang enhancement laws
Project tags
Data Visualization
Non-Profit
Low-code
Framer
AI
Core TEAM
Me: Design Lead, Development Lead
Lesley Huang: Development Support
Sam Vickars: Design and Development Support
Dr. Denzel Shabazz: Client Lead, Research and Copywriting
tools
Overview
A non-profit project powered by Campaign Zero, Labeled for Life spotlights the impact of gang enhancement laws, where across 37 states and the District of Columbia, anyone can spend decades in prison for who police say they are.
Tasked with crafting the story around this eye-opening data and compelling narrative, I designed an impactful Framer website showcasing the impact and consequences of these laws.
Client goals include presenting this site and accompanying data to legislators to work towards eliminating these laws across the United States as well as building up public awareness about this persistent issue.
Process
I always start in writing, mapping out the different sections and key points of information. This campaign was very copy-heavy, so breaking out the different sections into easy to digest ways was paramount.
Next was the data. I investigated the Airtable that the client provided. I broke it down into what was most relevant for people to understand the problem being brought to light. How could we personalize the experience to make it feel topical for anyone viewing it?
In Figma, I laid out screenshots from the relevant Airtable data and my preliminary hand sketches. From that, I wrote out three outlines taking the copy from the client's Google documents and distilled it into the different sections of the website. I had weekly check ins with the client to map out requirements and content flow.
From there, I created these initial wireframes for team alignment. We ended up making some changes to the final flow; opting to remove the explainer video, and making a few versions of the quiz and results page until we reached a consensus.
Impactful intro
We opted to start with a quiz to highlight the impact of this legislation and how anyone could be labeled as a gang member.
Data storytelling
We broke down the various statistical data into digestible cards that could be flipped through and interacted with.
data literacy
We presented the raw data with an interactive map that people could explore, with a color scale showing the impact of these laws on a jurisdictional basis.
Map modes allow users to view the map showing a cloropeth of each state's harm score on a scale of 10 to 17, or by where gang enhancement laws exist or don't exist. The default map is the harm score, as it was the more visually impactful at a glance. You can see which states have the worst gang enhancement criteria quickly and guide action among legislators and the public.
Challenges
There was a lot of complexity in the data; dense, sensitive, and verbose. I was tasked with simplifying the way the data was being presented, balancing narrative pacing, historical information, and exploration.
Although the design aesthetic was solid, presenting the exploratory data proved to be the most difficult. We went through several iterations on the harm scorecard within the interactive map. There were changes to the copy to make it more understandable for both legislators and every day people viewing the site. There were also data changes to mitigate that happened in real time as the site was being designed and built. Balancing the constraints the client had on a tight timeline with many internal stakeholders was a true balancing act.
This was also my first time building a site in Framer and there was a learning curve in getting used to its technical paradigms. My team and I used AI tools such as Claude and ChatGPT to create code overrides to achieve more complex interactive elements that did not work with Framer out of the box. Augmenting my skills with AI positively impacted what I was able to achieve and filled gaps in my knowledge when needed. The interactive map was achieved using code embeds utilizing Svelte and d3.js.
Results
Campaign Zero successfully launched this campaign in April 2026 and has become a top initiative in their fight to end gang enhancements and get people involved. They’ve launched a Substack article detailing this and are actively promoting the site on Instagram. As time progresses, the ultimate positive results would be successfully getting states to drop their gang enhancement laws. Overall, the client was pleased with the design aesthetic and details.
Want to work together?
I’m looking for my next opportunity. Currently open to hybrid or remote full-time and contract roles.
© 2026 Aria Todd | Made with Framer
Advocating against gang enhancement laws
Project tags
Data Visualization
Non-Profit
Low-code
Framer
AI
Core TEAM
Me: Design Lead, Development Lead
Lesley Huang: Development Support
Sam Vickars: Design and Development Support
Dr. Denzel Shabazz: Client Lead, Research and Copywriting
tools
Overview
A non-profit project powered by Campaign Zero, Labeled for Life spotlights the impact of gang enhancement laws, where across 37 states and the District of Columbia, anyone can spend decades in prison for who police say they are.
Tasked with crafting the story around this eye-opening data and compelling narrative, I designed an impactful Framer website showcasing the impact and consequences of these laws.
Client goals include presenting this site and accompanying data to legislators to work towards eliminating these laws across the United States as well as building up public awareness about this persistent issue.
Process
I always start in writing, mapping out the different sections and key points of information. This campaign was very copy-heavy, so breaking out the different sections into easy to digest ways was paramount.
Next was the data. I investigated the Airtable that the client provided. I broke it down into what was most relevant for people to understand the problem being brought to light. How could we personalize the experience to make it feel topical for anyone viewing it?
In Figma, I laid out screenshots from the relevant Airtable data and my preliminary hand sketches. From that, I wrote out three outlines taking the copy from the client's Google documents and distilled it into the different sections of the website. I had weekly check ins with the client to map out requirements and content flow.
From there, I created these initial wireframes for team alignment. We ended up making some changes to the final flow; opting to remove the explainer video, and making a few versions of the quiz and results page until we reached a consensus.
Impactful intro
We opted to start with a quiz to highlight the impact of this legislation and how anyone could be labeled as a gang member.
Data storytelling
We broke down the various statistical data into digestible cards that could be flipped through and interacted with.
data literacy
We presented the raw data with an interactive map that people could explore, with a color scale showing the impact of these laws on a jurisdictional basis.
Map modes allow users to view the map showing a cloropeth of each state's harm score on a scale of 10 to 17, or by where gang enhancement laws exist or don't exist. The default map is the harm score, as it was the more visually impactful at a glance. You can see which states have the worst gang enhancement criteria quickly and guide action among legislators and the public.
Challenges
There was a lot of complexity in the data; dense, sensitive, and verbose. I was tasked with simplifying the way the data was being presented, balancing narrative pacing, historical information, and exploration.
Although the design aesthetic was solid, presenting the exploratory data proved to be the most difficult. We went through several iterations on the harm scorecard within the interactive map. There were changes to the copy to make it more understandable for both legislators and every day people viewing the site. There were also data changes to mitigate that happened in real time as the site was being designed and built. Balancing the constraints the client had on a tight timeline with many internal stakeholders was a true balancing act.
This was also my first time building a site in Framer and there was a learning curve in getting used to its technical paradigms. My team and I used AI tools such as Claude and ChatGPT to create code overrides to achieve more complex interactive elements that did not work with Framer out of the box. Augmenting my skills with AI positively impacted what I was able to achieve and filled gaps in my knowledge when needed. The interactive map was achieved using code embeds utilizing Svelte and d3.js.
Results
Campaign Zero successfully launched this campaign in April 2026 and has become a top initiative in their fight to end gang enhancements and get people involved. They’ve launched a Substack article detailing this and are actively promoting the site on Instagram. As time progresses, the ultimate positive results would be successfully getting states to drop their gang enhancement laws. Overall, the client was pleased with the design aesthetic and details.
Want to work together?
I’m looking for my next opportunity. Currently open to hybrid or remote full-time and contract roles.
© 2026 Aria Todd | Made with Framer
Advocating against gang enhancement laws
Project tags
Data Visualization
Non-Profit
Low-code
Framer
AI
Core TEAM
Me: Design Lead, Development Lead
Lesley Huang: Development Support
Sam Vickars: Design and Development Support
Dr. Denzel Shabazz: Client Lead, Research and Copywriting
tools
Overview
A non-profit project powered by Campaign Zero, Labeled for Life spotlights the impact of gang enhancement laws, where across 37 states and the District of Columbia, anyone can spend decades in prison for who police say they are.
Tasked with crafting the story around this eye-opening data and compelling narrative, I designed an impactful Framer website showcasing the impact and consequences of these laws.
Client goals include presenting this site and accompanying data to legislators to work towards eliminating these laws across the United States as well as building up public awareness about this persistent issue.
Process
I always start in writing, mapping out the different sections and key points of information. This campaign was very copy-heavy, so breaking out the different sections into easy to digest ways was paramount.
Next was the data. I investigated the Airtable that the client provided. I broke it down into what was most relevant for people to understand the problem being brought to light. How could we personalize the experience to make it feel topical for anyone viewing it?
In Figma, I laid out screenshots from the relevant Airtable data and my preliminary hand sketches. From that, I wrote out three outlines taking the copy from the client's Google documents and distilled it into the different sections of the website. I had weekly check ins with the client to map out requirements and content flow.
From there, I created these initial wireframes for team alignment. We ended up making some changes to the final flow; opting to remove the explainer video, and making a few versions of the quiz and results page until we reached a consensus.
Impactful intro
We opted to start with a quiz to highlight the impact of this legislation and how anyone could be labeled as a gang member.
Data storytelling
We broke down the various statistical data into digestible cards that could be flipped through and interacted with.
data literacy
We presented the raw data with an interactive map that people could explore, with a color scale showing the impact of these laws on a jurisdictional basis.
Map modes allow users to view the map showing a cloropeth of each state's harm score on a scale of 10 to 17, or by where gang enhancement laws exist or don't exist. The default map is the harm score, as it was the more visually impactful at a glance. You can see which states have the worst gang enhancement criteria quickly and guide action among legislators and the public.
Challenges
There was a lot of complexity in the data; dense, sensitive, and verbose. I was tasked with simplifying the way the data was being presented, balancing narrative pacing, historical information, and exploration.
Although the design aesthetic was solid, presenting the exploratory data proved to be the most difficult. We went through several iterations on the harm scorecard within the interactive map. There were changes to the copy to make it more understandable for both legislators and every day people viewing the site. There were also data changes to mitigate that happened in real time as the site was being designed and built. Balancing the constraints the client had on a tight timeline with many internal stakeholders was a true balancing act.
This was also my first time building a site in Framer and there was a learning curve in getting used to its technical paradigms. My team and I used AI tools such as Claude and ChatGPT to create code overrides to achieve more complex interactive elements that did not work with Framer out of the box. Augmenting my skills with AI positively impacted what I was able to achieve and filled gaps in my knowledge when needed. The interactive map was achieved using code embeds utilizing Svelte and d3.js.
Results
Campaign Zero successfully launched this campaign in April 2026 and has become a top initiative in their fight to end gang enhancements and get people involved. They’ve launched a Substack article detailing this and are actively promoting the site on Instagram. As time progresses, the ultimate positive results would be successfully getting states to drop their gang enhancement laws. Overall, the client was pleased with the design aesthetic and details.
Want to work together?
I’m looking for my next opportunity. Currently open to hybrid or remote full-time and contract roles.
© 2026 Aria Todd | Made with Framer