Code for America Alpha Website

Code for America made a new website. It’s almost done, and we’d like to show it off!

homepage_screenshot-2014-01-16

We’re doing something a little different with this one, by releasing it at alpha.codeforamerica.org for community feedback before replacing the current site. Last week, we shared this new URL with the a small portion of CfA community: staff members, current and former fellows, and Brigade Captains. Our goal was to solicit feedback on the content, asking for input on people’s bios, the story of each city partner, and write-ups about the apps and code we’ve worked on in the past. Today, we’re sharing the pre-release version of the site with the public for broader feedback. Have a look, poke around, and tell us what you think by opening an issue or pull request on the GitHub repository at codeforamerica/codeforamerica.org.

Our old site is a fairly standard non-profit site describing our programs and inviting people to contribute to the cause. We designed the new site to engage more of our community members more quickly: specifically to bring citizen-coders and government representatives to a place where they can *do* something — where they can start coding for America — as soon as possible.

At the same time, we wanted the site to express certain core design values that have to do with who we are:

  • Openness: the idea that this is an accessible, welcoming place that shares its secret sauce.
  • Currency: our commitment that the site is up to date both in terms of its content and how it actually works.
  • Optimism: this is fundamental to Code for America — we believe that citizens and governments can work together to make things better.

The site is a collaboration between our internal tech and communications teams and the UK agency ClearLeft. Most of the internal work was done by myself, Dana Oshiro, and Cyd Harrell — and there was a lot of internal work. We intentionally used the skillsets we had in house to reduce the scope of the work we contracted out. Specifically, we did user research, created explicit design goals, wrote a v1 information architecture, prepared our content for migration by culling hundreds of out-of-date pages on the old site, provided rough page sketches for top-level pages, and made key technical decisions up-front.

While I’d met some of the ClearLeft team before, the rest of us were strangers separated by an ocean and nine timezones. We chose to work with ClearLeft because they develop a pattern portfolio  (a pattern/style library) which would allow us to scale our work to our Brigades. This unique approach has aligned perfectly with our work style and decentralized organizational structure.

From the beginning, we all agreed that working in an agile way was going to get the best results. Up-front polished wireframes and detailed IA documentation was skipped in favor of rough sketches, content tested on the current website, and an iron-clad daily check-in meeting first thing in the morning for SF and last thing in the evening for Brighton. In the end, we were billed zero project management hours, normally a quarter or more of a design project budget. We made the absolute most of our contract expense by “buying” only those capabilities we did not have on staff and by structuring an extremely focused engagement. The total external money spent did not reach six figures.

We’ll have lots more to say about the work in the coming weeks as we approach a complete launch. Our design partners at Clearleft in Brighton, UK will talk a bit about the transatlantic development process of site markup and visual design. We’ll describe some of the technical decisions to use tools like Git and Jekyll to run the new site, and why those might be appropriate for our local government partners to adopt. We’ll run through the markup and style pattern portfolio that lets us release an alpha site with a gold master look.

We’ll also talk about work that came before before the design, including UX research that informed the goals of the site, the visual interface guide effort that gives it a consistent brand, and the agile content development process that made our existing website an important component of the design of the new one. This release is a foundation for our future online presence, which will evolve as we grow. Getting to this point has involved many people in the Code for America community through interviews, pull requests, or just doing what they do in public where we can understand it. Thanks to all of you.

For now, visit the new alpha and tell us what you think by opening an issue or pull request on the Github repository at codeforamerica/codeforamerica.org.

 


 

Questions? Comments? Hit us up @codeforamerica.