Overview: MIT SMR

More Images

In the interest of keeping readers engaged, MIT’s Sloan Management Review undertook a project of massive proportions – moving all content to a uniform digital existence. I was brought in at the earliest stages of the project to work on the User Experience and Visual Design. I stayed engaged until the site was built. I handled all of the assets for the front end. That included creating a custom icon web font.

The Process

We asked questions, a lot of questions. What does it mean to be a magazine in the digital age? What format could we rely on to serve these articles? What content is still relevant? This approach led to much of our time being spent refining the reading experience and ultimately on a layout framework.

Two thousand twelve saw the “responsive” movement taking root at all levels of content. This project was focused on tablet reading, bridging the gap between the print version of the magazine, and the web presence. I had a blast designing our workflow for such a big project with so many viewport specs.

(fig. 1)

With myriad layout dimensions and resolutions as a target, all assets had to be vectors. I've been known to obsess over type; that made this a fun challenge for me. These are the highlights of the layout for the article views (@600px). We tried to stay true to the magazine's stark layout and simple type treatments.

The toughest part of the whole project was defining the site's structure. With years of changing section names and content design, we had to try to fit all of the best parts into a small menu. This is one of the issues that we all struggle with; naming things is hard. The solution was three big sections based on historical content divisions from the printed magazine.

(fig. 2)

Paywalls suck; we tried to make a better one. The closest we got was very well-defined pricing tiers. I liked being able to make this seem really custom with icons for each benefit. I was only around for the first few months after launch, but there was a marked uptick in subscriptions across the board.

(fig. 3)

Early wires of the aritcle layout. Very early on, we were encouraged to find a better way to include ads. This made the "responsive" part of this project trickier since we were stuck with the standard IAB ad sizes of the time.