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.
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.
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.
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.
BeforeVinyl
AfterCircular
BeforeOpen Sans
AfterNational 2
BeforeArchivo Black
AfterA new way to use Vinyl
Old colors
New colors
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.
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.
The site can be flipped into an accessible color mode for users who need enhanced contrast.
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.
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.
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.
