Independent journalism that holds tech accountable
Project: Comprehensive website redesign
Role: Product design, product management
What that means I really did: Implemented established product concept by building an comprehensive design system and designing screens sitewide; managed documentation for engineering handoff; designed and iterated on new features
MIT Technology Review: Erik Pelletier (chief digital officer / vice president, product development), Cy Caine (chief digital officer), Vanessa Scopino (director of product), Shaun Calhoun (lead software engineer), Alli Chase (senior project manager)
Product concept, design direction: Upstatement
Between 2018 and 2020, MIT Technology Review underwent a full-scale redesign, replatforming, and complete rebuild of its technology stack… simultaneously. It was a lot.
The amount of change was massive and often disorienting, but we needed to continue to write and publish throughout. Based on a site concept and strategy by Upstatement and a simultaneous publication and brand redesign by Pentagram, I was responsible for synthesizing and implementing a cohesive design sitewide.
The redesign was an enormous, challenging undertaking. Through leadership changes, shifting design and functionality priorities, and an evolving business strategy, I advocated for our readers and solved problems for our editors.
I started by refining and reducing the number of styles and component variations in our design system, applying accessibility standards and extending that system throughout the site. I established a responsive 12-column grid that met the demands of our highly-trafficked story pages as well as our redesign’s central concept — an infinite-scroll, social media-style feed of story teases in various formats, which lived on our homepage and at the bottom of every story.
The feed
Upstatement’s intention was to combine characteristics of traditional media sites with social media conventions to encourage deeper engagement among our readers; more frequent visits and longer stays on site. One of the most interesting puzzles lead engineer Shaun Calhoun and I were tasked with was designing a logic to the experience and operation of the feed.
We needed a chronologically-based stream of story teases to serve the site’s core concept, taking into consideration a number of revenue-related factors — ad placements, inhouse promotional units, sponsored content — and an increased pace of story publishing on the site that our company leadership anticipated. Importantly, we had to program something our custom CMS could support.
Our solution was one that allowed for editorial curation and visual variety, while appearing random; every night, our feed layout logic re-randomized. We called it “the midnight shuffle.”
Site architecture and behavior
I conducted a sitewide content audit to simplify the site’s taxonomy and information architecture, and reorganized our primary and secondary navigation menus; Upstatement’s handoff documentation called for a megamenu consisting of both. I reduced the number of nav items by collapsing unnecessary heirarchies and combining and eliminating redundant pages. I developed a variable page model to simplify and standardize tertiary page layouts.
I proposed and launched a variant to the persistent header so the header’s content reflects user intent: sharing icons when scrolling down while reading, and the site menu when scrolling up, offering opportunities to remain engaged.
In addition responsive breakpoints, based on horizontal screen sizes, the presence of a persistent ad in the right rail required that I determine vertical breakpoints, too.
With new systems integrated into our tech stack, we redesigned our meter and sign-in flows and interfaces.
