The Challenge

We were tasked with transforming the Campus Insiders website, with over 3000 yearly live college sporting events, into the #1 college sports website in the world.


The Solution

Research & Strategy

We engaged in deep conversations about Campus Insiders' existing challenges and goals and uncovered opportunities to improve the experience.

Design Systems

We designed a set of guidelines and a web style guide to standardize visual elements and user experience across all apps and websites for Campus Insiders.


Because most web visitors access Campus Insiders on mobile devices, we focused on crafting a mobile-first design that feels just like an app. 


Campus Insiders has a huge competitive advantage with over 3,000 exclusive live college sporting events. By understanding existing challenges and their desired user experience, we helped create a detailed strategy to catapult them into the future of digital media and video.


On-Site Discovery

We flew four team members to Chicago to meet in person and began to formulate a plan. We worked through challenges in information architecture, discussed competitors and other media websites, planned technical solutions, and presented a mobile-first approach to developing an entirely new platform.

Competitive Analysis

We researched a variety of media and sports websites, identifying trends and patterns in the industry and ways we could help Campus Insiders stand out from the crowd.


Information Architecture

With a multi-pronged content strategy, setting the foundation for the Campus Insiders IA was extremely important. We analyzed the old website's structure and reorganized content into a logical hierarchy throughout.


With the IA completed, we moved into designing a set of wireframes to help visualize content, hierarchy, and the user experience flow. Each wireframe was built with modular & reusable design patterns. Wireframes made it easy for stakeholders, visual designers, and software engineers to stay on the same page during development.


Design Process

After wireframes, we entered the design phase, which consisted of creating mood boards, exploring typography options, and designing interface. Because the audience primarily uses mobile devices to access Campus Insiders, we focused on that experience first and later designed for larger screen sizes.


In addition to IA, wireframes, and visual design, we created a series of moodboards to direct the design before applying visual styling to the wireframes we created.


In addition to the Campus Insiders primary maroon brand color, we wanted to bring in additional colors to make the site feel fresh and active.


The type used on a media website is critical to its success. We explored many different sports websites and web fonts and ultimately settled on a highly readable, flexible, modern typeface.


The vibe of a sports website in 2016 requires a steady balance of futuristic and modern touches with a focus on colorful photography, crisp headlines, and readable content. We helped refine the look and consulted on delivering the brand into the future of sports media.


Atomic Design

One of the key elements of a successful web project involves building reusable systems that can be applied across a website. We created a series of modular design patterns specific to Campus Insiders that helped visualize every element that appears on the website.


Development Strategy

From a technology perspective, we wanted to future-proof the new platform by utilizing the most widely used CMS for media organizations—WordPress. At first, we pitched the idea of using WordPress purely for the administrative functionality and using a decoupled JavaScript-based front-end framework like AngularJS to present the content. In the end, we settled on a standard architecture to ensure the highest cross-browser compatibility and search engine optimization.

Front-end Development

Building a modular design system was one of our primary goals and this extends into the front-end markup and styles. We created a library of HTML/CSS/SASS components to be utilized as a foundation for all future website elements.


WordPress Implementation

We implemented the new website in WordPress and created a set of publishing tools for the Campus Insiders team. These tools allow posting multiple types of content like videos from third-party services, articles with various types of embedded media, and listicles.

wordpress-vip VIP

A primary goal was to ensure the site never experiences major downtime, especially during high-traffic peaks. The best way to do that is to work with a host who has the experience and server architecture to make it all happen. We recommend VIP for their experience with high-traffic media websites built on WordPress.



For this project, we set out to create a modular design system that the Campus Insiders team could reference and use for implementation of design and markup across their websites and other apps. In the end, we created a new app called "Playbook" which houses a complete design system and all its modules. These modules are pulled into WordPress and used to display all the content you see on

Unique Features

Live Video

We added LiveStream video feeds into WordPress with a simple management interface.

Ooyala Video Platform

Our team connected WordPress to the Ooyala API to access and publish video-on-demand content.




The Outcome


The previous Campus Insiders website was dated, poorly structured, and hard to edit.



The new websites is fast, mobile-first, and modern, offering tons of live and on-demand video, stats, and the latest news across college sports.


Launch & Iterate

We managed the development process and assisted Campus Insiders in launching the new site on VIP. Once launched, we continue to address any problems and develop new features for the platform as it grows.

Visit →


Want to work with us?

If you have a big mission, a defined budget, and are ready to move forward with your project, get in touch with us today for a quote.