Occupy is a movement to increase transparency, sustainability, accountability and equality in our culture. I was really inspired that apathetic Americans were actually acting out, and I wanted to provide technical support for the protesters (since there didn’t seem to be much). I found the web group (Tech Ops) and started going to meetings.

Identity

The wiki seemed important, and it looked terrible, so I started there. I liked the NYC General Assembly site’s choice of yellow as a nonpartisan, New-York-inspired color, so I built on that. League Gothic, a condensed sans-serif, stood out from the geometric “O” of Obama’s campaign and knockoffs, and fit well in constrained spaces. Open Sans, another solid open source typeface, increased legibility of body text.

UX/UI

There are many different websites for the Occupy movement, as a result of its horizontal and autonomous structure; we wanted to bring information together in one place. For the occupy.net home page, I visualized a dashboard of information from all the autonomous groups, worked with Interoccupy volunteers to bring it together, and designed a system of iconography to identify the different feeds.

I designed the wiki as simply as possible, working mostly in-browser for the second half, since the backend was not changeable and custom CSS was our only tool.

web design web design web design

Development

The home page was fun but tricky. We created an RSS aggregator of major sites and tools, and used the Isotope javascript framework to display the news, images, projects, documents, and requests in a mosaic. Content can be sorted by type, date, or title.

The wiki CSS was a nightmare — Mediawiki links all its themes together in a weird way — but it was worth it. The theme is on Github so anyone can now start a wiki with a nice flat design.

This work also informed another open source template: feel free to check out the repo.