MIT Technology Review

Tech Review was producing great work but felt limited by their toolkit. They wanted to own how they published stories on the web, starting with the site homepage.

The Old Tech Review

The fixed layout and reverse-chron feed meant stories got skipped and evergreen content was quickly buried.

homepage

Over four months, we transformed Tech Review’s homepage from a one-size-fits-all feed into a dynamic, vibrant home for some of the best tech journalism on the web.

The New Homepage

Flexible layouts, bold colors, and modular composition meant Tech Review was in control of their presentation.

There's no one-size-fits-all future and there's no quick fix for a nuanced product like Tech Review.

Building a better web strategy required more than a coat of paint. We needed to think about Tech Review's content, visuals, and business goals as a whole.

Modular Componentry

Instead a single monolithic layout, we introduced modular content blocks that snapped together seamlessly.

Hero

The first thing user sees. Flexible structure with ability to swap color and content day-by-day.

Newsletter

Generates clicks and keeps it fresh with rotating dynamic content.

Story Group

Highly modular with low lift. Can be hand-curated, auto-generated, or timed to updated based on print schedule.

The Grid

To make dynamic layouts possible, we introduced a grid system meant to appear complex but stay simple and lightweight under the hood.

1. Gutter-less outer grid

2. Flush cells w- internal padding

3. Filled cells with content

Color Palette

We introduced a modular palette with over 100 accessible color combinations, making bold layouts easy yet safe.

Highlights

Chalky and bright, reserved for text and visual accents.

Tones

Rich and subtle, used as a background element to unite large groups of content.

Combinations

By keeping highlights and tones separate, literally every color combo could be pleasing yet accessible, even if picked at random.

Guidelines

We didn't want to force a single look or feel. Color combos could be quirky and cheerful or sober and reserved.

Design System

For engineering handoff, we created a Figma library that codified designs down to the atomic level.

Framework

Atomic elements used to build sitewide componentry. Think eyebrows, lists, breadcrumbs, etc.

Modules

Semantically distinct Lego bricks of content. Built with atomic components but allowing flexibility for unique elements.

Layouts

Page-wide compositions of modules that stack veritcally. Easy to create lots of variants without breaking the page.

Pages

Final designs composed of multiple layouts stacked together.

MIT Tech Review

MIT Tech Review is a bimonthly print and digital magazine that focuses on cutting edge tech.

With a passion for tech and an eye to the future, MITTR wanted their online brand to be as cutting edge as their journalism.

↗ Subscriptions

↗ Pageviews

↗ Time on site

Tech Review was producing great work but felt limited by their toolkit. They wanted to own how they published stories on the web, starting with the site homepage.

The Old Tech Review

Over four months, we transformed Tech Review’s homepage from a one-size-fits-all feed into a dynamic, vibrant home for some of the best tech journalism on the web.

The New Homepage

MITTR was an official nominee for Webby’s Best Magazine Site of 2024, beating stiff competition (cough, Pentagram, cough) to come in 3rd in the public poll.

There's no one-size-fits-all future and there's no quick fix for a nuanced product like Tech Review.

Building a better web strategy required more than a coat of paint. We needed to think about Tech Review's content, visuals, and business goals as a whole.

Modular Componentry

The Grid

Color Palette

Design System

That's just a snapshot! There was so much more that went on behind the scenes to turn Tech Review's initiative into a reality

LinkedIn ↗

patrick@delaney.design

MIT Tech Review

MIT Tech Review is a bimonthly print and digital magazine that focuses on cutting edge tech.

With a passion for tech and an eye to the future, MITTR wanted their online brand to be as cutting edge as their journalism.

↗ Subscriptions

↗ Pageviews

↗ Time on site

Tech Review was producing great work but felt limited by their toolkit. They wanted to own how they published stories on the web, starting with the site homepage.

The Old Tech Review

Over four months, we transformed Tech Review’s homepage from a one-size-fits-all feed into a dynamic, vibrant home for some of the best tech journalism on the web.

The New Homepage

MITTR was an official nominee for Webby’s Best Magazine Site of 2024, beating stiff competition (*cough, Pentagram, cough*) to come in 3rd in the public poll.

There's no one-size-fits-all future and there's no quick fix for a nuanced product like Tech Review.

Building a better web strategy required more than a coat of paint. We needed to think about Tech Review's content, visuals, and business goals as a whole.

Modular Componentry

The Grid

Color Palette

Design System

That's just a snapshot! There was so much more that went on behind the scenes to turn Tech Review's initiative into a reality

LinkedIn ↗

patrick@delaney.design

MITTR was an official nominee for Webby’s Best Magazine Site of 2024, beating stiff competition (cough, Pentagram, cough) to come in 3rd in the public poll.