ci-logo

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.

challenge-phone

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.

Mobile-First

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

Strategy

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.

strategy-clipboard
map-feature-bg

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.

3-phones
new-ia-3

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.

Wireframes

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.

wireframes
design-process-phone

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.

Moodboards

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.

Colors

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.

Typography

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.

Style

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.

colors

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.

atomic-design

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.

frontend-new
laptop-wp

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

WordPress.com 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 WordPress.com VIP for their experience with high-traffic media websites built on WordPress.

playbook

Playbook

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 CampusInsiders.com.

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.

 
 

logos

streaming-phone

The Outcome

Before

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

before

After

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.

after

Launch & Iterate

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

Visit CampusInsiders.com →

launch

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.