Skip to content

Moms Demand Action

Demanding smarter gun laws for everyone.

In a world where mass shootings are startlingly normal and progress towards reasonable action feels enragingly slow, one organization and their nearly six million supporters offer a glimmer of hope. Founded in 2012—one day after Sandy Hook—Moms Demand Action has become the largest grassroots movement working to end gun violence in America. They are moms, dads, students, survivors, and everyday Americans who are donating their time, money, and energy to demand smarter gun laws for everyone. We were honored and thrilled to apply our skills as designers and engineers to this cause.

What We Did

  • Strategy
  • UX design system
  • Web development
  • App development

Live Site

momsdemandaction.org

iOS & Android Apps

iPhone | Android
Moms Demand Action volunteers in their trademark red shirts.
Moms Demand Action volunteers in their trademark red shirts.
Brush stroke texture
01

A clearer path to action

We built both a website and a set of apps for Moms Demand Action. The website helps new volunteers sign up and get started while the app keeps them engaged over time. In both cases, joining the movement needed to be effortless and taking action needed to feel immediate.

The site makes it easy for volunteers to take urgent actions (like signing a petition) and demonstrates how those actions level up to larger initiatives. We made key mechanics like donating, event sign-up, and connecting with your local chapter much easier too.

The app is a path to action for new volunteers and seasoned leaders alike. Actions depend on your volunteer level and the priorities for the day. We also built one-tap RSVP-ing for events, which drastically reduces registration time.

Together, we will end gun violence.
An example of an urgent action on the website.
The form to become a volunteer on the website.
An example of a regular action on the website.
02

Building a design system in an existing brand family

Moms Demand Action is the grassroots arm of Everytown for Gun Safety, which also includes Mayors Against Illegal Guns and Everytown Research, along with a host of other branded campaigns. Our design system for Moms Demand Action needed to sit seamlessly within this nesting doll of brands.

A diagram of the Everytown brand ecosystem.

We upgraded the brand to better reflect the Moms Demand Action mission, and we pushed their aesthetics to be more authentic, hopeful, and welcoming, with a touch of grassroots-y fire. These updates retained existing brand equity and made it faster to build new digital features.

Before Vinyl
Sample of Vinyl typeface
After Circular
Sample of Circular typeface
Open Sans
Sample of Open Sans typeface
National 2
Sample of National 2 typeface
Archivo Black
Sample of Archivo Black typeface
A new way to use Vinyl
Sample of Vinyl typeface on an angle
Old colors
Old Moms Demand Action color palette
New colors
New Moms Demand Action color palette
Brush stroke texture

The design system includes a re-usable set of UI elements that work across platforms. The website and app each have their own requirements, but their features were built up from a shared visual foundation and strategy.

Moms Demand Action red shirt
'Keep Going' button
Moms Demand Action logo
Take Action button
Calendar date style.
Brush strokes
Checkmark style
Action card
'Donate' type treatment
Dropcap style
'New here?' button style
'Outlined button style
Brush strokes
Calendar date style.
Take Action button
Moms Demand Action logo
'Keep Going' button
Moms Demand Action red shirt
'Outlined button style
'New here?' button style
Dropcap style
'Donate' type treatment
Action card
Checkmark style
'Donate' type treatment
Dropcap style
'New here?' button style
'Outlined button style
Moms Demand Action red shirt
'Keep Going' button
Moms Demand Action logo
Take Action button
Calendar date style.
Brush strokes
Checkmark style
Action card
A page from our design system guide
A page from our design system guide
A page from our design system guide
03

Creating an empathetic experience

By interviewing volunteers, attending a local chapter meeting, surveying existing site users, and auditing content and analytics, we were able to immerse ourselves in the Moms Demand Action universe. Through this research, we identified key accessibility, performance, and usability improvements that would best serve the greatest number of Moms Demand Action volunteers.

Toggling between an accessible color mode for the website

The site can be flipped into an accessible color mode for users who need enhanced contrast.

A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app
A screenshot of the Moms Demand Action app

The app fosters a sense of community and brings the magic of in-person interactions onto the small screen. It helps volunteers keep track of their work and stay up to date on issues, events, and campaigns.

A screenshot of the Moms Demand Action app admin UI
A screenshot of the Moms Demand Action app admin navigation
04

Under the hood

For the app, we are using NativeScript-Vue, which let us build fully featured Android and iPhone apps with a framework we already know and love: Vue and Vuex. We also built a web-based admin tool (in Vue) for the Moms Demand Action team to be able to manage and publish app content. A Node.js API with Express powers both the mobile app and the admin tool.

If you’d like to learn more about how we built this app, take a look at how we’re handling data management and how we’re using generator functions.

05

Impact

The weekend after we launched the site, a gunman killed 22 people in El Paso, Texas. The next day another 9 people were killed in Dayton, Ohio. We were stunned to see our “rapid response” tools needed so immediately. As a direct result of the new system, Moms Demand Action was able to raise almost $150,000 in three days. And our new homepage tooling prompted over 11,000 people to sign an urgent petition. These numbers far outpaced the capabilities of the previous website.

The custom app admin lets staff push and prioritize content for leaders. Those leaders can then distribute content to volunteers and students.

A screenshot of the Moms Demand Action app admin
A screenshot of the Moms Demand Action homepage right after a mass shooting

Up Next: