1. Ian Campbell
Digital Media Creative Director
NFL mobile APP PLATFORM
Ian Campbell | Digital Media Creative Director My Site: 4thofficial.com Linkedin: linkedin.com/in/4thofficial P: 312.804.5749 E: ian@4thofficial.com

2. NFL mobile app platform
goal
• To create an NFL App Platform
• Best utilize the native aspects of mobile platforms, while utilizing the cross platform benefits of
HTML (Consider 12+ months from now)
• Design for multiple screen sizes, and interaction types (touchscreen, game console, TV)
• Don’t align oursleves directly with any one platform (Apple or Android) so we can go direct to
fans with our own App subscription products
• Create user experience and development guidelines for partners and vendors to follow
• Create a cross functional team to manage vendors and approvals
• Consider this approach for m.nfl.com
How
I’m sure there are others out there but these two appear to be the leading frameworks for
developing rich mobile web applications with HTML.
• Sencha Touch (www.sencha.com), the first HTML5 mobile JavaScript framework that allows
you to develop mobile web apps that look and feel native on iPhone and Android touchscreen
devices, has just hit the big 1.0.
• PhoneGap (www.phonegap) is an open source development framework for building cross-
platform mobile apps. Build apps in HTML and JavaScript and still take advantage of core
features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs.

3. NFL mobile app platform jan 2011
ipTV cell PHONE TABLET PC
LAPTOP IPOD/
DIGITAL DEVICE
NFL PR
ps
apform
plat Training Camp
Live
Draft
NFL Travel NFL Clubs (32)
Fantasy
NFL Network
NFL Films
Combine Shop
2011 Schedule
NFL Experience
Verizon Tickets Super Bowl
NFL News
The NFL App Platform
• Fans have an ever increasing number of methods and devices for • All NFL league groups may decide to not include our mobile team in
accessing our content, products and features. Can we directly offer every App/Mobile initiative (NFL Network, Films etc.), which will re-
fans a consistent brand and user experience irrespective of platform sult in an inconsistent and confusing brand and product experience.
(Apple. Android)?
• We’re primarily geared to manage and innovate revenue
• Consider the cost of design and development over several seasons generated mobile products. That might rule out any new or brand
for the above Apps (times the number of supported platforms) only Apps that might serve an experimental or general fan need

4. NFL mobile app platform jan 2011
mobile apps home
• NFL Mobile Apps becomes a top level section within NFL.com (Right) • Fans are promoted to purchase one all encompassing product that
includes several Apps, or to assemble their own (See examle)
• Majority of marketing effort drive to this one destination, versus
individual promotion for each App • We form our own criteria for App suitability (Platform, Screen etc.)

5. NFL mobile app platform jan 2011
new flow
current flow
NFL sells APPS direct to fans as a subscription product
NFL APPS are sold through iTunes and Android
NFL
NFL.com NFL Apps App DETAIL
subscriptions
iTunes (game center)
NFL.com flow
What’s on iTunes, Android Market etc.?
Android
iTunes
Platforms launch a free NFL App that
offers basic content and features. Linking out
to specific web based Apps, and
Android
subscription product flow
amazon kindle flow
Amazon is a subscription service for the Kindle
purchase +
amazon.com kindle books book DETAIL
download to
kindle
APPS PURCHASE flow
• We should regard our most exclusive features and content (Game • Present our registered NFL.com fans and subscription product
Center/Fantasy Apps) as the next generation of subscription customers with a seamless experience to purchase Apps.
products (Audio Pass etc.).
• Follow Amazons model for digital content
• Why let Apple/Android take a cut on our products?

6. NFL mobile app platform jan 2011
From sencha.com From phonegap.com
Sencha Touch 1.0 is compatible with Apple iOS “In essence, Nitobi is building out a ‘write once,
and Google Android, which together run anywhere’ platform for mobile application
represent over 93% of current US mobile traffic. development, with the first three devices
supported being the iPhone, Android and
We make specific use of HTML5 to deliver BlackBerry. Rob Ellis, one of the co-creators of
components like audio and video, as well as a PhoneGap said, ‘The idea is you write one code
localStorage proxy for saving data offline. base and it works smoothly on all 3 devices.’”
—eWeek
Built specifically to leverage HTML5, CSS3, and
Javascript for the highest level of power, The PhoneGap mission is to Web-enable native
flexibility, and optimization. ipTV TABLET device functionality with open standards like
HTML, CSS and JavaScript so that you can focus
One of the biggest challenges in developing
on the app you’re building, not on authoring
cross-platform mobile applications is the different
complex platform compatibility layers.
resolutions found across devices. Sencha Touch
uses a groundbreaking method to eliminate this A process that has brought a measure of
problem, allowing developers to change the success for us is to first determine which
overall scale of their interfaces on the fly. Buttons LAPTOP platforms to target, and then build your mobile
always have the perfect tap area, regardless of PC
application logic in a JavaScript framework that
screen size or resolution. works with the ‘lowest common denominator’
platform. JavaScript frameworks are your friends
By leveraging CSS3/SASS technology, our
(jQuery, MooTools, XUI, etc.).
theming system allows developers to easily
—Seattle Best
change variables (in familiar CSS syntax) and
completely alter the presentation of their app.
Extremely important for every application to
Our components use the latest CSS3; every
cell phone IPOD/ take this into account, especially for iPhone.
aspect of the design — rounded corners,
DIGITAL DEVICE It is a hard criteria in Apple’s App review
background gradients, shadows — can be
process (to see how gracefully an app
modified or removed with one line of code.
handles lack of internet connection).
—Seattle Best
the right framework / platform
• Consider the cost to design and develop over several seasons for our • Is there a technology framework that will allow us to separate
Apps to run across the above devices. Also, how much of this work content from code so the presentation and functionality can easily
can be utilized across supported platforms (Android, Apple etc.) morph into the right experience (Touch etc.)?
• Selecting a single platform now will help align our M.nfl.com, Fantasy
and App strategy

7. NFL mobile app platform jan 2011
sample web and mobile application (details on next page)

8. NFL mobile app platform jan 2011
Why?
I’ve wanted to start exploring an NFL Fitness App because I believe it could serve a number of different (sponsorable) purposes.
• Fits with the league theme/event Training Camp (Combine, Kickoff, Play60 etc.). Could be a promotional or marketing concept for the
NFL Network (Hosts get in shape for the new season)
• Social content. It creates a new content type for community activity on NFL.com and Fantasy. No different than Nike’s running App,
we can extend this App and the concept of Fitness as a conversation on our own forums, Facebook, Twitter etc.
sample training camp application
What you’re looking at Q&A
You’re viewing a web page (NFL.com /Traning- Could this feature exist on NFL.com (Training Camp
Camp/FitnessApp) on a laptop. Fans can start using event site) and as a mobile experience?
the various fitness features to participate/track their More than just a version for the web and mobile, but
health and fitness. they actually work together as one holistic experience.
• Fans are signed in and following our standard Is it a mobile only application or mobile web based
subscription and fan registration flow from NFL.com. feature?
If it’s concepted and designed correctly it could
• The right channel (Your NFL Apps) is a subscribed
follow the above approach to NFL App Platform
fans view of their mobile Apps. This channel can be
development. Result: It works across several platforms
open/closed. This is the view that they’ll see when
and device types.
they open their NFL App on their Tablet, TV or Cell.
• The fan has just added this web based App to their
collection (Other league logos) of NFL mobile Apps
design
(Or should that be called web services?). This is not a final design but I think it does represent a
number of important considerations.
• For use on these Devices: Indicates what platform
and devices the App is optimized for. Consistent • The brand neutral and simplistic approach to design
message from the Apps suitability table on the Apps is because we’ll want to skin these applications quickly
homepage. and easily. Example: Used for NFL Network this season,
and Training Camp next season.
• Tools: Music player, Clock etc. are basic features
for a mobile fitness App • I’m guessing the design will need to accommodate a
rigid set of guidelines from the PhoneGap and
Sencha frameworks . Complex design techniques won’t
translate across multiple platforms and devices.

9. NFL mobile app platform jan 2011
PROPOSED M.NFL.COM HOMEPAGE DESIGN PROPOSED Fantasy mobile HOMEPAGE wireframe
AD
SPONSORSHIP
super
tickets bowl
GET OUR FANTASY APP
GET OUR GAME CENTER APP SPONSORSHIP
Sponsorship & ads
• Utilize the new M.NFL.com to up-sell our base level mobile products
and features. (Game Center, Android etc.). Following the flow on the
prior page to purchase.