Case studies Ally.Guide / ProgramEquity
Ally.Guide: a brand and service refresh for civic action
Refreshing a volunteer-built civic-action site so people could quickly understand an issue and mail their local representatives. The work was later adopted by GitHub for internal community programs.
Context
Ally.Guide started as a volunteer project during the height of the Black Lives Matter protests to share information about racial injustice and the civic actions people could take in their communities.
With limited resources, the team had to be operational before the next voting cycle. I had two tasks: redesign Ally.Guide’s user experience into a presentable first iteration for the public, with accessible, trustworthy content design and user flow; and manage the creation and redesign of the first iteration of a civic action service to locate and mail your state representative.
The initiative was later picked up by GitHub (Microsoft) and evolved into ProgramEquity and its Amplify program.
The work
-
Process, collaborators, and challenges
I audited the existing content, researched competitive spaces (civic action websites), and made recommendations, marked as priority or as needed, through documentation, pull requests, or wireframes. I met with stakeholders on user personas and flow mapping, design and mockup options, low-code versus no-code versus in-house development, deadlines and owners, and overall scope and success metrics, then created a roadmap with check-ins. I was the Content Designer and Project Manager, working with front-end and back-end (sometimes full-stack) developers, a graphic designer, and a product and service manager. The hurdles: little volunteer time and few resources, no concrete data (everything was an assumption), and a scope that was too large.
-
Before and after
The first iteration of Ally.Guide was built before I joined. I updated the taxonomy and site map, then redesigned it: a cleaner design with vector assets for approachability, and navigation and a flow of information that focus on a particular civic action (learn, amplify, or give). I also added a footer for quick links and easier navigation. Footers are easy to take for granted, but they can make or break a simple experience.
-
Mockups before Figma was everywhere
I wireframed the page structure and annotated layout mockups to give developers clear direction on the name and menu placement, padding, subtitles, navigation, and footer content. Part of managing the site design was collaborating with methods and tools that volunteers could easily understand.
-
UX writing and the letter-mailing flow
As part of Ally.Guide, “Pass the Policy” let people choose a cause, then locate and mail a state representative a letter to support or share concerns, starting with the BREATHE Act. I worked with a developer to make the experience smooth and secure, since it involved monetary donations. The new design, wireframed in Figma, “looks and feels” trustworthy, which matters for this audience, and numbered steps (review the letter, sign your name, send the letter) show visitors where they are in the process.
-
From Ally.Guide to ProgramEquity and Amplify
GitHub (Microsoft) picked up and funded the program, and it evolved into ProgramEquity: hackathon enablement with community-informed design, connecting tech schools to accelerate campaigns for social justice. Its Amplify program brought in participating companies such as Slack, Stripe, Vercel, Red Hat, GitHub, Google, and MetLife.
Outcomes
- Fundedpicked up and funded by GitHub (Microsoft)
- More usemore people used the service, which showed the program’s credibility
- MVPa roadmap for future iterations, scoped to priority items
Looking back
Questions and takeaways I’d bring to the next project like this:
- People want to take civic action, but they strongly prefer to stay anonymous or reduce the chance of being identified.
- What would the program look like if it had the resources to go to market as it is?
- How do you track and review the causes you’ve engaged with?