The redesign process for Occupy Sandy

Occupy Sandy was one of the most inspiring humanitarian efforts I’ve ever seen. Volunteers self-organizing in rapid response to a terrible crisis — a breath of energy in a sea of economism. And it was more effective than the major relief organizations!

I volunteered to redesign the front page, just to organize the valuable information a bit more clearly. It turned into an entire site redesign, completed in six days. I could barely eat or sleep, it was so exciting. Solid adrenaline.

I couldn’t believe how smoothly and quickly it went, so I’m writing it up as a tutorial for others working in crisis situations. Transparency = education!

Wednesday afternoon: Discussion

The first step was to talk to the current web team. Devin, an organizer in the TechOps group I’m part of, had connected me with the web team at Interoccupy (Michael, Andrea, Jackrabbit). They’d set up the existing site as part of their Wordpress multisite network, and were working to consolidate location details into one Google Fusion Table (a spreadsheet that can power a map or a directory). Drew, another TechOps organizer, scheduled a Google Hangout, and we talked about design needs with various tech teams. We logged meeting notes in an Etherpad setup; follow-up discussions happened in the #occupysandynyc IRC channel. (Sam gave me a whirlwind tour of the IRC bots crawling all the relief/aid feeds, with volunteers sorting/dispatching the requests. I felt like I was teleporting, it’s pretty amazing.)

Thursday afternoon: Mini project

Sougwen, who’d organized the Fusion Table, asked if I could first design the “cards” for the locations page. It was a good small exercise for me to start with, and calmed my nerves; even if I completely flubbed the rest of the site, the cards looked better and that was something. I did Illustrator mockups, revised w/the group, and then wrote the HTML/CSS version so that Charles could start writing the FusionTable/Wordpress/Isotope plugin. (Primary rule of productivity: Don’t be the bottleneck.)

Thursday night: Information hierarchy

I wanted group consensus on the site’s priorities before I started laying anything out. So I wrote an information hierarchy in a Google Doc, based on the ideas in this Responsive Comping article. This simple numbered list focused the feedback on content: what we had or didn’t have, and its appropriate prominence in the visitor’s experience.

Friday evening: Site map

Next I wanted agreement on the arrangement of the information. So I created a site map with lo-fi content blocks in Omnigraffle. It showed a revised sidebar, separate updates/locations pages, a new FAQ page, and a new local navigation to easily get to these pages. I put these in our shared Google Drive folder for review. Meanwhile Gregg, the Wordpress volunteer, could start researching themes to use as the base. (He chose the Foghorn theme, a simple and responsive base.)

Friday night: HTML prototype

I expected much more feedback once people started clicking on the site, and I wanted to get those comments as soon as possible. So I built an HTML prototype, which let me copy/paste all the pieces of content from the existing site into their new homes, and write the text that didn’t exist yet. It went pretty fast since I used LESS, Codekit, a lot of code clips from my library, and started trying Emmet (a CSS-like shorthand for code). I used semantic.gs for a basic grid system, since it keeps class names out of the markup. I finished the site by 3am and sent it off, again asking for feedback on the arrangement of information. Meanwhile, Charles and Gregg had gotten the data flowing into the site.

Saturday afternoon: Design comp

Comments had been gathered by the time I woke up, so we had another Google Hangout to review. At this point I wanted to get out of the HTML and let the backend developers have it. I can’t design entirely in the browser — I need to go back to visual software to stop being box-headed and overly practical. I switched over to Illustrator and did a front page mockup, which included the header, the sidebar, a callout, and a feed. All typefaces were open source (Open Sans, League Gothic, Entypo, and Stateface), so they could be shared with other designers. I put the png in our shared folder, and asked for color and styling feedback.

Saturday night: Stylesheets

Once I had feedback on the design, I began the site’s stylesheet. Gregg had finished the main template and plugins for the home page, so I was able to copy the rendered HTML into a new prototype, and adjust my LESS to fit the actual markup. (I compiled the LESS locally, since our server-side compiler was breaking things.) So we had the main header and sidebar styles done. Then things started getting tricky. I wanted to start working on the live stylesheet, not a prototype, so we could all see how the developers’ work would really look. They’d gotten the theme set up in our Github repository, and I was able to pull and push the files, but I didn’t have a local development environment set up. I’d used MAMP and installed Wordpress locally before, but we didn’t have time for the expected troubleshooting. So, I had to make my LESS changes locally, push to github, and have someone deploy to staging in order to see what they looked like. Thank god Drew was around to teach us all git. It was fine, until everyone went to bed. Then I just worked blindly, page by page, adjusting the CSS in Firebug and pasting it into the stylesheet. By 7am there were too many unknowns so I stopped. (Gregg set me up w/local dev the next week, and it took 15 minutes. Lesson learned: don’t be scared.)

Sunday night: Deadline

No time for merge conflicts, so I agreed to stay out of the PHP and Gregg agreed to stay out of the LESS. The rest of the web team had given us a huge document of feedback, and new/revised content, so Gregg set up a bug list in Google Spreadsheets, and I prioritized the tasks. (The spreadsheet continues to serve as our development road map.) The content team made sure all of the new pages and FusionTable fields were filled out and ready to go. Michael, Andrea, Sougwen, Pea, Devin, Leah, Dana and others were adding content as soon as we had each template done. We were up to about eight tabs instead of four. The goal was to launch the site Sunday night, since Monday was typically the lowest-traffic day, and we all had to go back to other jobs. We worked til 4am, but it wasn’t feasible. We still had a lot of bugs, and features to be styled.

Monday night: Launch

By Monday night we’d browser tested (Chrome, Firefox, Safari, and IE8+), speed tested (using YSlow), and debugged. (Even though we had no real staging server; our “staging site” was actually just another Wordpress multisite hub, with no way to deploy to the real production server.) At 2am Gregg moved the theme from our dummy site to the live site. I finished marking up the final content pages by 4am, and we were DONE. Everything was ready for Michael’s 5pm interview on HuffPo live video!

I’m sure I’ve forgotten some pieces, but that is the gist. It was an amazing collaboration, everyone brought such dedication and focus to their part. There’s such a lack of ego, they could teach yoga classes. And a great thing about Occupy is that no one tells you what to do; autonomy is a main principle so there’s a lot of trust and encouragement.

It’s still going strong; at the #HurricaneHackers meetup the next weekend, we planned the integration of the NJ site into our main one, and at the #NYTMresponds hackathon this weekend, we’ll be working on the Sahana inventory platform and a redesign of the coordinators site.

Update:

We’re now combining this work with other open source projects to make a full-spectrum platform for disaster relief. Check out NYC:Prepared if you’re interested!