Society & Space Website Redesign

Transforming a small blog into a leading publisher.

Because academia deserves better.

Society+Space approached us with two very simple challenges. Fix broken functionality that had built up over years of evolving a pre-built template. Secondly, create an experience that looked and felt more editorial – something to compliment the intellect of their content.

From our research, the most evident thing about academia is the lack of attention to design thinking or aesthetics. Whether its a printed publication or a website we found it difficult to find many examples of good design.

That's when we realized that the bigger opportunity wasn't simply to fix a few bugs and make a good-looking website. Instead, it was to create a site that set the bar for academic journals.

Flexible & Connected

Their website's biggest issue was that the Wordpress template they were using was functionally limited. While they had individual articles, collections of articles, and groups of collections, their template had only one layout to support them all. This forced them to apply work-arounds that over time created an organizational nightmare.

The fundamental purpose of a companion website is to engage a new audience – one that doesn't have access to content trapped behind a pay-wall. But even when your content is free, people need to be able to discover it, otherwise what's the point?

So our approach was to create a design system that gave them the flexibility to display content in a variety of ways, and to encourage discovery by creating an architecture that connected relevant content throughout the experience.

Examples of different layouts for an article header. No image, medium image, large image, x-large image.

The Grid

Rather than using the conventional 12-column grid (combining both third and quarter compositions) we chose to go with a 6-column grid, adhering strictly to compositions of thirds.

Main content would sit in the right two-thirds, while supplementary content would be in the first third (which could either be hidden or stacked on mobile.) This allowed us to create  compositions that made reading long-form copy easy, but also allowed us to maintain interesting compositions.

Atomic Design

Rather than design entire pages, our approach was to design a series of "components" that could be rearranged in an infinite number of layouts, providing more flexibility and speed when developing content.

"After 8 years of pouring my blood, sweat, and tears into this project, I almost cried when I saw the new designs."

Natalie Oswin
Editor in Chief, Society+Space