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.
Research & Strategy
We engaged in deep conversations about Campus Insiders' existing challenges and goals and uncovered opportunities to improve the experience.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 WordPress.com VIP. Once launched, we continue to address any problems and develop new features for the platform as it grows.