Tackling Umbraco: Case Study on NFL Ops Site Design

3. USUS
SHOLASHOLA
DEVELOPERDEVELOPER
MATTMATT
DESIGNERDESIGNER

4. This is us.
Matt, designer.
Shola, developer.

5. REINGOLD, INC.REINGOLD, INC.
ALEXANDRIA, VAALEXANDRIA, VA
OUR COMPANYOUR COMPANY

6. This is our company.
Reingold, Inc.
Strategic Communications Firm
- full Service Creative
- based in Washington, DC.

7. OverviewOverviewOverviewOverview
Intro to Project
Design Challenges
Under the Hood: Tips & Tricks
Archetype
UaaS Deployment
External Data
and more!

8. Overview.
Why are we here?
- Opp to work with NFL to create new web presence for
Football Operations division.
- Site was built on Umbraco, launched on UaaS
(umbraco.com)
Matt will introduce project background and highlight
selected design features of site.
Shola will share Umbraco “Tips & Tricks” / lessons learned,
topics include: Archetype, UaaS Deployment, External Data,
and more!

9. OUR CLIENTOUR CLIENT

10. Our Client.
- NFL Football Operations = everything on
field during game and everything behind
the scenes of that.
- Administer game of football.
- More: balance people (players, coaches, teams, officials)
w/
- Game’s Rules
- Health & Safety
- Tech
- Fan Experience

11. "FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECE
OF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITING
FANS, PLAYERS ANDFANS, PLAYERS ANDFANS, PLAYERS ANDFANS, PLAYERS AND
COMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YET
POWERFUL BOND."POWERFUL BOND."POWERFUL BOND."POWERFUL BOND."

12. Troy Vincent (our client)
Executive VP of Football Operations
15 year NFL career, All-Pro
Grew up w/ football, made career, now
works with League on corporate side.
- Understands the value of statements like
“the game is more than just a game.”
- Inspired by quotes like that (and on slide)
which set tone for project.

13. What we aren't. (nfl.com)
Honor the game’s history.
Showcase innovation.
Troy's 3 C's - Clarity, Consistency, Credibility.
Umbraco!
Website ObjectivesWebsite ObjectivesWebsite ObjectivesWebsite Objectives

14. Great kickoff, clear objectives.
- Not NFL.com
- Honor the Past
- History of Rules, Evol Helmets / Players
- Innovation / Tech
- Uses tech to constantly improve game
- Instant replay, e-Playbook
- Improve player safety + fan experience
- 3 C’s
- Content = clear. IA = consistent. Voice = Credible.
- Umbraco! (NFL IT had familiarity w/ U and
recommended it)

15. Look & FeelLook & FeelLook & FeelLook & Feel

16. Look & Feel.
One of the first hurdles for design is
establishing identity.
One approach is Style Tile.
Exercise helps understand how UI /
photos / typography / colors come
together without the constraints of content
& layout.

18. Mood Board.
w/ NFL brand color palette and preliminary
concepts for identity marks.
“NFL Ops – Behind The Scenes” was
working title.

20. Brand Connection.
Connecting FB Ops identity to NFL Brand.
Hex pattern = used all over Ops site (and
presentation) was inspired from football
equipment and nfl.com textures.

22. Typography.
Proprietary typeface called Endzone.
Sans/Slab serif variety.
Comparing header vs body text styles

24. Photography.
NFL has awesome photos.
Full access to AP images library which is
really cool. (side note)

26. UI Elements.
Tests how different combinations of
elements can look.
Overall summary of why we use style tiles
(removes contextual opinion, great for
projects with more than 1 designer =
central resource for creative direction)

27. NavigationNavigationNavigationNavigation

28. Navigation.
Nav always important for any site.
Used nav as opportunity to differentiate
NFL Ops from other NFL properties.

29. Other NFL Web PropertiesOther NFL Web PropertiesOther NFL Web PropertiesOther NFL Web Properties
NFL.com
Primary news and communications branch for the NFL
NFLShop.com
eCommerce site
NFLPlayerEngagement.com
Player Engagement
NFLEvolution.com
Player Health & Safety

30. Other NFL Properties.
First step was to research NFL’s prominent
websites:
NFL.COM
NFL SHOP
NFL Player Engagement
NFL Evolution

32. This is NFL.com homepage.
- Primarily news / player stats oriented
- Overlay shows basic layout
- Lead story
- News item column
- Horizontal nav
- *** same as espn.com (conventional)
- Same layout for all.
- We came up with different concepts to test…

33. UX Testing OptionsUX Testing OptionsUX Testing OptionsUX Testing Options

34. UX Testing Options.
Left: vertical nav that functions like
accordion to reveal submenus.
Middle: persistent vertical nav w/ icons,
category description, mega menu.
Right: Baseline. Traditional horizotonal nav
w/ dropdown menu.

36. UX Testing.
(we coffee shop’d it.)
Took to coffee shops and did basic UX
testing for feedback.
Data recorded from Timed Tasks and
general User Exp questions/opinions.

38. In the end we chose option #2 (from
testing and other information)

40. We loved the Flexibility.
3 States:
- Minified w/ icons
- Expanded w/ category titles
- Fully open w/ custom mega menu
Provided an interesting yet usable way to
navigate the site’s primary nav.

42. Mobile.
Here’s how we handled mobile.
Off-canvas menu uses same iconography as full menu for
consistency.
Problem Solved: Needed a way to go straight to main cat landing
page.
Horizontal line next to accordion “down” arrow created separation
to allow:
- Click on right (down arrown) = open submenu
- Click on left (Icon / category title) = go straight to landing page

43. Responsive DesignResponsive DesignResponsive DesignResponsive Design

44. Responsive Design.
2015 – we need to design for every user
every device.
- Not just Resize content but Optimize.

46. Wireframes.
Started from start w/ full wires.
Not mobile-first / not mobile-afterthought
Created 4 device “experiences”.
- Large Desktops
- Smaller Laptops
- Touch: Tablets
- Touch: Smartphones (<740)

48. Overkill?
May seem like overkill / busy work. Why
not just scale between smallest and
largest?
We found that each experience has unique
challenges.
Our content worked best on tablets when
more visual, for instance.

50. Mobile Testing Rack.
We tested the crap out of the site on wide
array of devices (see!)

51. DesktopsDesktopsDesktopsDesktops

52. Desktop Experience.
How the site turned out for Desktops.

53. LaptopsLaptopsLaptopsLaptops

54. Laptop Experience.
How the site turned out for Laptops.

55. TabletsTabletsTabletsTablets

56. Tablet Experience.
How the site turned out for Laptops.
Note: Tablets don’t have hover states.
You can’t have a user step through multiple levels of
expanding nav w/out creating new variation of UI.
Feature detection for touch devices larger than smartphone
sets the nav in an pre-expanded state for users.

57. SmartphonesSmartphonesSmartphonesSmartphones

58. Smartphone Experience.
How the site turned out for Smartphones.

59. Template StructureTemplate StructureTemplate StructureTemplate Structure

60. Template Structure.
Site content = deep and wide.
Important to set up logical hierarchy of
page types.
Also wanted to leave a manageable
situation for NFL when site is handed back
to client.

62. Template Structure (cont’d).
So we came up w/ something like this.
Arrows represent likely user paths.

64. Homepage.
- About Statement
- Featured Content
- Updates Feed (timely content such as
press releases)
- Main Category Intros

66. Main Category Landing Page.
- Quick links in hero space
- Update Feed (specific to category type)
- Highlights content rotator (to call attn to
deeply nested pages)
- Topic Area Previews

68. Topic Pages.
- This is where the “story” is told.
- 3 different types:
- Basic Topic Page (standard webpage)
- High Production Topic Page (less text,
more visual content)
- Art-Directed Longform (one-off, deep
content dives w/ lots of scroll-based
animation.)

69. Content BlocksContent BlocksContent BlocksContent Blocks

70. Content Blocks.
- Rather than using baked/rigid page
layout, we decided to create reusable,
modular content blocks.

72. Content Blocks Sheet.
- Variety of different styled blocks to
construct a page in unique layout each
time.

74. Frontend vs Backend.
- On left: page layout in browser using
modular content blocks.
- On right: same page inside Umbraco
using nested, sortable fieldsets
(speaking of Umbraco…here’s Shola.)

75. ArchetypeArchetypeArchetypeArchetype

76. The fieldsets you just saw are from a great
package called Archetype, from the guys at
Imulus.

77. ArchetypeArchetypeArchetypeArchetype
An alternative to the Grid for creating
content blocks
Newer sites should try both methods to
see what’s comfortable

78. Archetype does a lot of things, but it can
be used as an alternative to the Grid for
creating content blocks.
For newer sites, you may also want to
venture into the Grid, but NFL Ops
development started before the Grid
became production ready.

79. Archetype NestingArchetype NestingArchetype NestingArchetype Nesting
Great for complex layouts
Place repeatable, modular structures
anywhere in a page

80. With Archetype, you can create virtually
any type of content block, and its great for
repeated items like slideshows for
instance. What’s interesting is that you can
also nest Archetypes to create complex
structures.

82. For example, we have text, video, and
slider blocks and so on that you saw on an
earlier slide, but we also have a structure
called an “expandable aside.” Inside it, we
simply made available the same text, video,
and slider fieldsets that its outer parent
has available.

84. One drawback to this is heavy nesting
while you’re editing. But there’s a
workaround: Archetype lets you inject css
and javascript for things like beautifying
label previews, but you can really add any
javascript and css. So we injected
javascript and css to create a “wide mode”
button.

85. Archetype: Add arbitrary JSArchetype: Add arbitrary JSArchetype: Add arbitrary JSArchetype: Add arbitrary JS
+ CSS+ CSS+ CSS+ CSS
Allows you to add scripts that change the
way the backoffice works
Knowledge of Angular or packages not
needed
// toggle 'wide mode'
$(document).on('click', '.nfl-toggle-wide', function () {
$('.form-horizontal, .form-vertical').toggleClass('form-horizontal form-vertical');
});

86. So if you’re not yet familiar with angular or building Umbraco
packages, this can be a quick and dirty way to modify the
way the backoffice UI works (While creating your Archetype,
you need to click on advanced options). For wide mode in
particular: While you’re editing a node, if you look through
the Chrome inspector, there’s a div called “form-horizontal”
that contains all the field properties for that node. So all this
script is doing is essentially swapping the CSS class ‘form-
horizontal’ with our own CSS class, ‘form-vertical’ (which
removes left-padding on the property editors, and stacks the
property labels to be on top of the property editors). the ‘nfl-
toggle-wide’ element is just a button that we first added to
the DOM via Javascript. You can place the button wherever
you want via CSS. NOTE: You’ll want to bind its click when
jQuery.ready() is actually fired.

87. Archetype RequirementsArchetype RequirementsArchetype RequirementsArchetype Requirements
Works best with Umbraco 7.2+
If using Courier/Umbraco as a Service,
ensure it’s using the correct version of
nHibernate

88. If you do use Archetype, make sure you’re
using Umbraco 7.2 and above, as there is a
database value limit issue (they do
however provide a separate dll that will
repair this for versions less than 7.2).
You also want to ensure you have the
correct version of Courier if you’re on UaaS
for instance, since Courier’s older usage of
nHibernate has a similar issue.

89. UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment

90. Umbraco as a service is a really interesting
hosting platform. UaaS essentially uses Git
and Courier to ease the challenges of
content deployment, where you might
separate development, staging, and live
environments. However, we were pretty
deep into development before NFL Ops
made the final decision to host with them.

91. UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment
Special considerations if you're porting an existing
site, vs. starting with UaaS from the beginning
Courier files must be created for not only content, but
also media, content types, custom datatypes, etc.
However, only content has a UI for quickly creating
these courier files

92. If you start a new site on UaaS from the beginning,
all of the Courier files for content, content types,
media, etc. would be created naturally as you
gradually edit through the backoffice. But since
we were porting everything over, we needed to
develop a strategy to create all these Courier files.
For content, right clicking on the root node and
republishing all of its “subpages” would trigger
courier to serialize all the content in one go. But
there isn’t a backoffice equivalent to easily do that
for media, content types, etc.

93. UaaS: Creating Courier FilesUaaS: Creating Courier FilesUaaS: Creating Courier FilesUaaS: Creating Courier Files
for a Pre-Existing Sitefor a Pre-Existing Sitefor a Pre-Existing Sitefor a Pre-Existing Site
// Example: Saving all content types to trigger Courier
var svc = ApplicationContext.Current.Services.ContentTypeService;
var allcontenttypes = svc.GetAllContentTypes();
foreach (var ct in allcontenttypes)
{
svc.Save(ct);
}

94. So, instead of manually re-saving each of
the hundreds of images, and dozens of
content types--just so courier can be
triggered--luckily, Umbraco gave us a way
to loop through all of these assets
programmatically. Each of these assets has
an associated Service that allows you to
save them, and therefore trigger Courier
file creation.
https://our.umbraco.org/documentation/
reference/management-v6/services/

95. Courier: Global SettingsCourier: Global SettingsCourier: Global SettingsCourier: Global Settings

96. If you’re feeling adventurous, once you’ve written that code
for each service, you can actually have them run on demand
from the UI. We created a Global Settings node that when
saved, will trigger courier for the services that are checked.
You’ll notice the images checkbox has a “page” field. The
reason is that looping through the service takes time,
especially for images, and the Ops site is quite image rich.
The problem is that Microsoft Azure (which is what UaaS
runs on) has timeout of about 4 minutes at the load-balancer
level. Paging through these services will allow you to
stagger long-running saves, and avoid hitting the timeout.
NOTE: For information on how to run code upon saving a
node, look here:
https://our.umbraco.org/documentation/Reference/Events-
v6/ContentService-Events

97. Don't Store Media in.../mediaDon't Store Media in.../mediaDon't Store Media in.../mediaDon't Store Media in.../media
Especially important for image-rich designs
Use blob storage or CDN
avoids size quota issues
Azure Blob Storage Provider plugin
Media tree will likely be faster

98. So with all the image-rich content, it was best to store all media outside of your
umbraco installation. This is especially important if developing on UaaS, so you can
avoid size quota issues and/or other limitations that occur with Git and binary data. We
happened to use the Azure Blob Storage Provider package (
https://our.umbraco.org/projects/backoffice-extensions/azure-blob-storage-provider ).
Once we did this, we noticed uploading and browsing media is much more performant.
Note: If using Azure Blob Storage Provider on an existing site, you’ll also need to
change the existing media references in the database (Backup first of course). It will
look something like this:
update cmsPropertyData
set datantext = cast(replace(cast(datantext as nvarchar(max)),'/media/','http://
yoursite.blob.core.windows.net/media/') as ntext),
datanvarchar = replace(datanvarchar,'/media/','http://yoursite.blob.core.windows.net/
media/');
update cmsContentXml
set [xml] = cast(replace(cast(xml as nvarchar(max)),'/media/','http://
yoursite.blob.core.windows.net/media/') as ntext);
update cmsPreviewXml
set [xml] = cast(replace(cast([xml] as nvarchar(max)),'/media/','http://
yoursite.blob.core.windows.net/media/') as ntext);

99. Speed Up EditingSpeed Up EditingSpeed Up EditingSpeed Up Editing

100. We discovered a couple of other ways to
speed up the editing process.

101. Speed Up Editing: Front-Speed Up Editing: Front-Speed Up Editing: Front-Speed Up Editing: Front-
end Edit Buttonend Edit Buttonend Edit Buttonend Edit Button
@{
var auth = new HttpContextWrapper(HttpContext.Current).GetUmbracoAuthTicket();
if (auth != null)
{
var curruser = ApplicationContext.Services.UserService.GetByUsername(auth.Name);
if (curruser != null && curruser.CanEdit())
{
<a target="_blank" href="/umbraco#/content/content/edit/@Model.Content.Id"
class="editpage">Edit ▶</a>
}
}
}

102. One is by using a front-end edit button link, which is just a
nice quick way to reach the backoffice editor for the page
you’re currently viewing. We have the button display based
on the logged in user’s permissions. Your content editors
will thank you, because backoffice search isn’t always
effective (when you have several similarly titled articles) and
expanding the content tree can be slow sometimes.
A perfect place to put this razor code is if you have a
“master” view that all your document types use, then just
position the button with high z-index, absolute top/right
values in CSS.
NOTE: “CanEdit()” is just an extension method we created for
the IUser class. It can contain whatever conditional
permissions logic you might need.

104. With the long form layout design, each page tends to go
through several revisions. This can bog down your
backoffice, especially the content tree I just mentioned.
Here’s some SQL that you might want to use that deletes old
revisions to speed up the backoffice. Won’t go into too much
detail, but there are 4 tables that hold this data. You want to
prune them based on how far back in time you wish to keep
data, while preserving published items, and newest revisions
that may or may not yet be published. It’s a pretty handy
script when your site has many revisions or just lots of
content in general.
NOTE: BACKUP FIRST!!! This script is highly destructive.

105. API ControllersAPI ControllersAPI ControllersAPI Controllers
and Infinite Scrolland Infinite Scrolland Infinite Scrolland Infinite Scroll

106. On the front end, one interesting way we
deal with listing lots of content is the
infinite scroll technique, which is where we
chose to retrieve data via AJAX and an API
controller. We have an “Updates” section
of the site that has lots of timely news-like
articles.

108. API controllers are great for serializing a C# object
to JSON. But what if you just want to return
rendered html? One way is to manually build html
tags as a string in the api controller and finally
pass that to the browser, but that is quite horrible.
Because, what if you already have a partial view
that you want to reuse? You can’t use it directly,
because rendering a view needs a controller
context that an API controller can’t provide out of
the box. Wouldn’t it be great if you could create a
fake controller context for the sole purpose of
taking advantage of that partial view?

110. In comes the aptly named FakeController. If your api controller ever needs
to render a partial view’s html, you just need to create a fake controller to
do it. Note that except for routeData, the fakeControllerContext
instantiation has several null or bogus values, but that’s OK. It just works.
NOTE: The above code snippet is of course lives in an API controller. For
example:
public class UpdatesApiController : UmbracoApiController
{
[System.Web.Http.HttpPost]
public HttpResponseMessage GetUpdates()
{
// initialize any variables here such as your ViewDataDictionary
viewData, that you’ll eventually pass to your view below.
ViewDataDictionary viewData = new ViewDataDictionary();
string result = “”;
// --- CODE SNIPPET GOES HERE ---
}
}

111. External DataExternal DataExternal DataExternal Data

112. Earlier we spoke about how binary data
such as images should be stored outside of
Umbraco.

113. When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should Keep
Some Data Outside UmbracoSome Data Outside UmbracoSome Data Outside UmbracoSome Data Outside Umbraco
When there’s content related to a node
that must change very frequently
Publishing is computationally expensive
Invalidates the node’s cache

114. But there’s an instance where you also
shouldn’t store certain content data in
Umbraco’s content tree, and that’s usually
when the piece of content must change
very frequently. Changes require
publishing, and publishing is a relatively
expensive computational process. It also
invalidates the node’s cache.

115. When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should Keep
Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:
Case 1Case 1Case 1Case 1

116. For example, we didn’t want to store hits or
shares as node properties. You can use the
google core reporting api, or store the data
in separate tables yourself with a foreign
key to the node.

117. When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should Keep
Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:
Case 2Case 2Case 2Case 2
You Make The Call - Interactive Instant Replay Simulation

118. A similar case is when you need to quickly
and frequently calculate and save data to a
database. We encountered this in one of
the site's features called You Make The
Call, which is an interactive instant replay
simulation.
http://operations.nfl.com/the-officials/
these-officials-are-really-good/you-make-
the-call/

120. In You Make The Call the user assumes the responsibilities
of an NFL referee during an Instant Replay Review. You get
to watch the original play, and the same play from a couple
of other vantage points. When you’re finished you receive a
calculated percentile in real time against all the people that
played that week—thus these type of data, i.e. realtime
scores, are not something you want to be publishing to
Umbraco nodes every time it happens, or it renders the
caching useless. All other data however, like the text for the
questions, the video urls, and etc. are all stored in Umbraco
(in fact, using Archetype).

121. Questions?Questions?Questions?Questions?

122. So with that, we enjoy every bit of working on the
project. Everything from design to development,
and UaaS had a few challenges but we launched a
large scale successful project on it, and learned
quite a bit along the way; we hope we’ve given
some useful tips on Umbraco as a whole.