MIT Technology Review is one of the oldest magazines in the United States. The first issue was published in the winter of 1899. It has since grown into a media company whose mission is to tell about science and technology in ways that enable everyone to better understand the world.
In the last 118 years, the magazine has undergone many redesigns. The website, which wasn’t around until the late 1990s, has been through a similar but more rapid evolution.
In the fall of 2014, my team began planning a complete redesign and rebuild of the website. The redesign was my sole focus for a little more than a year, and is the largest and most complex project I’ve contributed to thus far in my career.
Goals of the redesign
- Create a more thoughtful and enjoyable digital reading experience no matter the device
- Provide readers with clear pathways to content they are interested in
- Increase engagement with readers and make it easier for them to become paying subscribers
- Build better tools that empower editors to make well-designed stories
We kicked off the project with a design research phase in which, over the course of several months, my colleagues and I asked readers many questions:
How do you read online? Why do you choose to read a particular story? Where are you when they are doing most of your reading? What else do you read? How do you choose what to read after you finish an article?
We wrote and distributed a 62 question survey and interviewed 19 people. We got around two thousand survey respondents, many of whom were familiar to MIT Technology Review, whether a subscriber or social media follower. The interviewees were a mix of subscribers and non-subscribers, but all highly engaged online readers.
I led my team through collaborative design activities in which we analyzed the data and distilled several key insights to form the foundation for the subsequent design phases. We documented our research and analysis and presented it to the company and design partners in early 2015. We return to the findings often, presenting them again as new team members join and referencing them for input on new design projects.
As our research phase came to a close, we joined forces with the wonderful and talented design firm, Upstatement, to begin the next part of the redesign.
As Upstatement led the design of the reading experience and visual identity, I designed the surrounding experiences: the subscription flow, search, account management, customer support, and the publishing admin, to name a few, and eventually extended the visual design to all the parts of the experience as well.
In the next section, I’ll give a quick overview of a few pieces of the redesign project and share a few deliverables I created for each as well.
First, I made a master sitemap that audited the existing site architecture, and formed the basis of the new website’s structure. We were able to retire several sections of the navigation and move content into groups that better reflect how readers browse.
Subscription and product purchase flows
A third-party fulfillment vendor handles the transactions and distribution of magazine subscriptions and other editorial products that MIT Technology Review sells, which means there are many technical and experiential constraints to work with in these flows.
Purchasing a subscription should feel like a seamless experience when the user moves from pages hosted on our site to those hosted by the third-party vendor. These interactions are vital to the experience and represent a key business goal: increasing conversions on the subscription forms.
Because of the multiple systems in place that store and transmit our users’ data, there are a few different places they need to visit to view or edit their information. The success of these pages depends heavily on clearly written copy to help people find what they’re looking for.
The following are wireframes from a few screens in the account settings section.
Rhino: Publishing interface
One of my favorite improvements of the redesign is how we changed the publishing process. Previously, the site was managed by a Drupal system with a template for every variety of story type.
The templated approach became problematic over time because though the templates were many, they were rigid and difficult to customize. When the editorial and art teams wanted to make design tweaks, we had to either create a new template, or write custom code at the story level to accommodate the changes. Neither of those solutions is ideal or easy to maintain.
We rebuilt the site using a headless Drupal setup with a custom story editor and publishing interface, called Rhino, sitting in front. Rhino provides a library of components that the editors can combine in an infinite number of ways with a drag-and-drop interface (and previews at multiple responsive breakpoints built in!) to tell stories.
Decoupling the story-type from the layout allowed us to create a design system of flexible, responsive components. It’s a better experience on the editorial side, and a more sustainable and future-friendly product for my team to manage.
During the redesign, I consulted with Rhino’s lead developer often on flows and layout for the various features of Rhino, and made an icon library that represents the story components.
Here are some of my favorite stories that have been published in the new design.
1o Breakthrough Technologies. This list is published annually, and this year the artwork and video content for each story in the list came together to make an engaging package. The story above is Paying with Your Face by Will Knight.
The One and Only Texas Wind Boom by Richard Martin. The gorgeous photography holds the spotlight in ways that were impossible before the redesign, and it’s a great story about the future of a state that’s better known for its oil.
What to Know Before You Get In a Self-driving Car by Will Knight. The author takes a ride in self-driving Uber and lived to tell the tale. I really like how the illustration at the top takes advantage of its surrounding environment and sneaks a car into the white space.
We launched the redesign in February 2016. Before the redesign, page load time was 7.4 seconds, and now it’s 2.1 seconds. This is an achievement due in part to better code and image-handling, but also an ongoing effort to help other departments understand their responsibility in keeping the file sizes down, especially on story pages. Performance is design!
The redesign effort has had major impact on user behavior too: Overall site traffic has increased 25% YoY, and mobile traffic has exploded, increasing by 91% YoY. The growth rate of our daily newsletter subscribers in the year since the redesign was 26.5%, compared to only 7% growth during the previous year.
We’ve seen a slight uptick in return visitors and the number of paying subscribers has increased by 18%.
Design does not end when a project does, and we’ve been monitoring, testing and building on the experience since last year’s launch.
There were a lot of awesome people involved in this project who should be recognized for their efforts.
- Nate Haas, Tito Bottitta, and the Upstatement design team
- Product Development Engineers at MIT Technology Review: Shaun Calhoun, Molly Frey, Jason Lewicki, DJ Hartman
- Erik Pelletier, Chief Digital Officer at MIT Technology Review and Vanessa DeCollibus, Product Manager at MIT Technology Review
If you haven’t yet, check it out! And please let me know if you have any feedback.