HomeGrammy AwardsNFLWatch! MagazineCBS Internship ProgramJoymodeAbout

NFL

Amanda Fong - NFL
PROJECT goal

Create a page for NFL on CBS that includes the 2017-2018 weekly game schedule and article content for desktop and mobile platform.

Tools

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

ROLES

Tori Weber — Product Owner
Amanda Fong — Senior Product Designer
Brett Johnson — Developer

Research

There are multiple places that a user can look up the NFL schedule. I did some research on some mobile experiences from brands like ESPN, NFL Mobile, and NBC Sports. I user tested and evaluated some UX to UI notes below.

ESPN Mobile App

Minimalistic and clean

Clear

Type font size is small

Tab Structure

Notifications

NFL Mobile App

Colorful and bold

Weekly Carousel Filter

Score Only

NBC Sports App

Interactive Scroll

Tap/More info

Quick CTA to Watch

Tab Navigation

Iteration

The goal of this project was to create the schedule part of this page. I iterated layout options for displaying the information. The requirements included using team logos, the time in ET, a navigation that accesses all pre-season to in-season games.

Amanda Fong - NFL

Wireframing

After a team deliberation, we decided to move forward with a layout that leads with the time on the left. A user can navigate each week which is scrollable on mobile.

Amanda Fong - NFL Wireframe

NFL on CBS Homepage Marquee

Amanda Fong - NFL Wireframe

2017-2018 Weekly Schedule

Amanda Fong - NFL Wireframe

Sports News Article Feed

Visual Design

In partnership with NFL, I validated the correct usage of their brand guidelines and asset library of team logos. The final design is built for both desktop and mobile.

Amanda Fong - NFL Desktop ScheduleAmanda Fong - NFL Mobile Schedule

Result

The project shipped in July 2017 just in time for the new NFL season. NFL on CBS can only be streamed digitally with a CBS All Access Subscription on the desktop platform.

view live site
next
Watch!
Magazine
Desktop / Mobile
Product Design
View Project
03
Amanda Fong - Watch! Magazine
Watch! Magazine
Desktop / Mobile
08 . 2017

Amanda Fong

Amanda Fong