Website Redesign

Client: Michigan State University Athletics Dept.

Project: MSUSports.com website redesign, 2018 | The Official Athletic Site of Michigan State, partner of CBS Sports Digital.

My Role: I worked as lead designer implementing all aspects of UI. I worked closely with the MSU Athletics dept. to overhaul the design to meet their new requirements.

Objectives: During the kick-off call, the client stated they wanted a "clean site" with each section "visually easy to find." They wanted to "clean up the clutter" from the previous design. They were citing "efficiency" as a keyword. They looked to maintain a light theme using a majority of white with their green color as the primary accent. High priorities were to push video content and help increase traffic to their online store.

CHALLENGES

As with any content-heavy websites, there are always challenges with space and placement, especially when multiple parties are involved. Between MSU and CBS Interactive, each has its requirements and requests for content that needs to be on the index page. An early obstacle became placing two of the three ads contractually required by CBS around MSU's requirements and remain optimized for viewability. For CBS Interactive's standards, an ad has to be 970 pixels and above to be considered optimized as in-view. The preferred optimized ad combination with the best success rate of conversions is a leaderboard and story ad. Designing around these two contrasting shapes creates a significant challenge within a responsive website.

SOLUTIONS

I created two of the lead story photo spots with a 16:9 ratio with the high priority of video. Doing this would allow a video story to play in place. Their online store was another requirement needed to promote by placing higher on the page. The solution was to split the last story in half. We converted the new spot on the right to a store promo and the tertiary story on the left. Since the tertiary story was no longer 16:9 video ratio, we came up with a solution using a modal overlay when played. To assist their video hits, we added a dedicated video player to cycle through all their free branded videos. I now could place the 970px ad below, meeting the 1st requirement. Since our game calendar portals were flexible in width and height, I could stretch it out to fit in the required second ad.

RESULTS

By staying in constant communication with everyone involved, I successfully designed a website that satisfied the needs of all parties while keeping the user's needs at the forefront. I added a sleek, much-needed design that represented the latest style and brand for MSU Athletics.