project goal

CBS Interactive created a user experience page that incorporates the recent weekly game schedule with a content management system for responsive web.

CBS Interactive created a user experience page that incorporates the 2017 - 2021 weekly game schedule with a content management system for responsive web.

roles

Tori Weber: Product Owner
Chris Stone: Senior Art Director &
Product Design Manager
Amanda Fong: Senior Product Designer
Mark Rigney: Developer

tools

JIRA - Project Management
Sketch App - Product Design
Slack - Collaboration and Communication

research

Our team began this project by analyzing multiple places where you can view the NFL schedule via responsive web. From major brands like CBS Sports, FOX Sports and ESPN, we noticed that all users responded to the same product information. With that being said we came up with special notes to the left of the brands below.

Our team began this project by analyzing multiple places
where you can view the NFL schedule via responsive web.
From major brands like CBS Sports, FOX Sports and ESPN,
we noticed that all users responded to the same product
information. With that being said we came up with special
notes to the left of the brands below.

CBS Sports

clean

interactive scroll

friendly

simple

FOX Sports

colorful

tab navigation

score only

ESPN

clear

fair

promo ads

minimalistic

3 mobile screens stacked on top of each other to represent research

iterations

The goal of this project was to create an interactive schedule for users. We came up with different layout options for displaying this information. The requirements were to display all team logos, the time in EST and a navigation that accesses all pre-season to in-season games. Below are a couple of variations that we produced for the client.

The goal of this project was to create an interactive schedule for users.
We came up with different layout options for displaying this information.
The requirements were to display all team logos, the time in EST and a
navigation that accesses all pre-season to in-season games. Below are a
couple of variations that we produced for the client.

iterations

wireframes

We developed wireframes that incorporated a layout that displayed the time on the left, which a user can navigate each week by scrolling on responsive web.

We developed wireframes that incorporated a layout that
displayed the time on the left, which a user can navigate each
week by scrolling on responsive web.

Grayscale mobile wireframes of NFL on CBS.com

visual design

We had a tight timeframe on this project so we delivered a high-fidelity prototype to the development team here at CBS Interactive. This included all interactions, transitions and we used Pixate to create the prototype. This streamlined the process for the dev team in the final design for responsive web.

We had a tight timeframe on this project so we delivered a
high-fidelity prototype to the development team here at CBS
Interactive. This included all interactions, transitions and we used
Pixate to create the prototype. This streamlined the process for
the dev team in the final design for responsive web.

visual design

Open laptop on top of a desk with the schedule for the NFL on CBS.com

Blurry image of side of man holding a mobile device

results

The project is live and ready for the new NFL season. NFL on CBS can be streamed digitally with a CBS All Access Subscription on all platforms.

The project went live in July 2017 just in time for the
new NFL season. NFL on CBS can be streamed digitally with a
CBS All Access Subscription on all platforms.

Large marquee for NFL which directs users to www.cbs.com/shows/nfl-on-cbs