MIT Sloan School of Management

Creating a Platform for Ideas Made to Matter

Over the course of a two-year strategy, design and development project, we collaborated with MIT Sloan on a fundamental re-platforming that unified a fragmented digital ecosystem into a modern, scalable and adaptable system—serving its varied stakeholders and audience segments.

1

The Background

In 2016, the MIT Sloan School of Management sought digital partners to help it tell better stories around its “Ideas Made to Matter” campaign. The school needed a new digital publication to house the innovative ideas of its faculty and students, and to serve as a destination to help future business leaders grow their businesses.

Screen Shot 2019 09 27 at 4 15 25 PM

2

The Challenge

Unifying a Fragmented Platform

Our mandate was to standardize the systems on which all 41+ offices worked without compromising their autonomy or the overall organizational structure. This fragmentation created silos of data and silos of culture, and there was no universal taxonomy connecting one office’s content with another.

A system that big wasn’t designed to adapt or move in a singular direction. After all, different groups have different needs, making it hard to build consensus. Our biggest challenge was communicating our vision at the right wavelength so that we could generate forward momentum.

Designing for Vastly Different Audiences

The MIT Sloan website is a critical destination for a wide range of audiences, each with its own needs and expectations. The MIT Sloan challenged us to create a paradigm that made it easier for their own groups to connect with their audiences better. We had to create a legible system that the autonomous groups in the organization could easily use to tailor their stories for their audiences. The system also needed to provide the data to test how their audience engaged with their stories. Admissions staff can now target prospective students with stories about campus life and the application process, while the alumni office promotes local events that offer new ways for graduates to stay connected to the school.

3

The Solution

Better Linking with a Global Taxonomy

We created a taxonomy for every page on the new platform and built features that seamlessly connect content across offices. For example, an article about a new idea from the school is linked to the faculty member that created it and the department from which it came. The article drives traffic to the related faculty and office pages. In turn, this traffic surge incentivizes those offices to produce more ideas for the newsroom.

Designing for Mobile Behaviors

Once we optimized the MIT Sloan website for mobile, we were able to expose its content to a much larger and more engaged audience. We designed the experiences to reflect the most common mobile behaviors and then applied the enhancements to the deepest and busiest sections of the site: the academic programs. This allowed prospective students to take comprehensive tours of MIT Sloan programs by scrolling on their phones.

Generating Actionable Data

We built interactive features that target and track different audience segments as they navigate the site. These features generate explicit segment data in a way that augments traditional site analytics tracking. This incentivizes the offices to adapt to their audience’s needs and provide the most value.

4

The Technology

Customized Drupal Publishing Workflow

To enable the MIT Sloan team to embed all modules within the Rich Text Editor (RTE), we added a complex approval workflow, making it so that they could view their revisions and preview their work before pressing publish. To accomplish this, we had to add custom functionality to the Drupal Core systems, accommodating revisions for global components within individual Node items. We extended the built-in RTE in Drupal and CKEditor to display real-time previews of modules being embedded while editing or adding new content. The RTE was designed to render in the same way as it would display on the front-end after publishing the content.

Though the default Drupal system doesn’t easily enable the limiting of individual permissions to sections, we also extended and added custom access controls here so that site managers could limit how much individuals could edit or create content on specific sections of the website, i.e., Academics or Faculty.

Robust Site Search

For the search functionality, we built a consolidated experience to include content not only from Drupal, but from outside sources too. The external sites were indexed in ElasticSearch alongside content from Drupal. The final search experience consolidated results from all sources and presented a unified view for users.

Technical and Editorial Training

The development process involved close contact with the client, including hands-on training for the editorial team and technical training for developers, during which we walked them through the codebase and on-boarded them to the new platform. We taught the internal team how to handle the codebase so that they could operate self-sufficiently. And, as a leave-behind, we created extensive custom CMS User Tutorials and Editorial Guides for future training and reference.

This project also involved intense custom CMS training, including additional end-to-end editorial testing. We met WCAG 2.0 AA standards for front-end accessibility (both manual and automated) and created a reporting structure.

Technology Used:

  • Drupal 8
  • Symphony
  • Elasticsearch

5

The Conclusion

A Platform for Expression

The website now consolidates the school's prolific work in compelling, contextual packages meant to draw in a wider audience of engaged users. Every feature in the new digital experience is built to communicate the power of “Ideas Made to Matter.”

The Results

  • 40% increase in total page views
  • 60% content readers more likely to come from social media sources than pre-launch
  • 60% content readers more likely to consume on mobile screen than pre-launch
  • 75% deeper scroll on pages compared to pre-launch
Meta Image 1200x627
Amazon

Ads that work as hard as you do

Code and Theory developed the integrated, global campaign connecting Amazon Ads with small businesses everywhere.

Read More
  • Proved Amazon Ads are made to match the right person, with the right business, right away.
  • Doubled traffic to Amazon Ads' dot com destination.
  • Produced a global, integrated campaign in less than six months.

Driving B2B Growth

Partnering with some of the world's largest companies to fuel their business-to-business expansion.

Evolving E-commerce to Fit Modern Audiences

We are shaping the digital transformation of the industry by creating strong connections between audiences and brands.

Leading With Empathy and Inclusivity

Having deeper conversations, widening the funnel, and driving innovation with an inclusive-first lens.

Screen Shot 2023 03 01 at 11 14 04 AM
Marriott Bonvoy

Reimagining Marriott Bonvoy as a Hub for Travel and Commerce

Evolving Bonvoy’s design system to be more modern and immersive while staying true to the core strong brand identity.

Read More
  • Mobile-First
  • Contextualized Conversion
  • Flexible Design and Content Systems
Black BoxBlack BoxBlack Box

Recognition

  • YETI x Code and Theory

    Innovation by Design

    Best in Marketing
  • Code and Theory

    Innovation by Design

    Design Company of the Year
  • Code and Theory

    Ad Age

    Agency A-List
Untitled design
Allspring

Speed to Market for a Portfolio Optimization Tool

Crafting a UI for a complex product through user input and clear data visualization.

Read More
  • Improving workflow processes through enhanced user interface design
  • Clear and simple data visualizations for complex data sets
  • Designing a roadmap to continue to iterate and optimize the product on a rolling basis post-launch

All Work

 2023

Says a Lot —

Latest

News — 

CampaignLive | Behavior as a prompt: Why AI’s ability to anticipate will change business forever

News — 

Code and Theory Wins Three Drum Awards For AI, Creativity, and UX with YETI and Tipico

News — 

Under Armour Launches UA Rewards with Masterclass-style Video Series, in Partnership with Code and Theory

News — 

Figma Names Code and Theory as Launch Partner in New Service Partner Program

News — 

Scout by Sutter Health™ Launches an App Focused on Resilience Building for Youth and their ‘Champions’, Built by Code and Theory

News — 

Code and Theory Network Wins Six W3 Awards

News — 

Facing the Future: A Guide to AI and Design Transformation

News — 

Amazon Ads Debuts First Small Business-Targeted Campaign