Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tackling Umbraco: Case Study on NFL Ops Site Design

1,991 views

Published on

Tackling Umbraco: Case Study on NFL Ops Site Design

Published in: Design
  • Be the first to comment

Tackling Umbraco: Case Study on NFL Ops Site Design

  1. 1. USUS SHOLASHOLA DEVELOPERDEVELOPER MATTMATT DESIGNERDESIGNER
  2. 2. This is us. Matt, designer. Shola, developer.
  3. 3. REINGOLD, INC.REINGOLD, INC. ALEXANDRIA, VAALEXANDRIA, VA OUR COMPANYOUR COMPANY
  4. 4. This is our company. Reingold, Inc. Strategic Communications Firm -  full Service Creative -  based in Washington, DC.
  5. 5. OverviewOverviewOverviewOverview Intro to Project Design Challenges Under the Hood: Tips & Tricks Archetype UaaS Deployment External Data and more!
  6. 6. 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!
  7. 7. OUR CLIENTOUR CLIENT
  8. 8. 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
  9. 9. "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."
  10. 10. 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.
  11. 11. 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
  12. 12. 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)
  13. 13. Look & FeelLook & FeelLook & FeelLook & Feel
  14. 14. 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.
  15. 15. Mood Board. w/ NFL brand color palette and preliminary concepts for identity marks. “NFL Ops – Behind The Scenes” was working title.
  16. 16. 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.
  17. 17. Typography. Proprietary typeface called Endzone. Sans/Slab serif variety. Comparing header vs body text styles
  18. 18. Photography. NFL has awesome photos. Full access to AP images library which is really cool. (side note)
  19. 19. 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)
  20. 20. NavigationNavigationNavigationNavigation
  21. 21. Navigation. Nav always important for any site. Used nav as opportunity to differentiate NFL Ops from other NFL properties.
  22. 22. 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
  23. 23. Other NFL Properties. First step was to research NFL’s prominent websites: NFL.COM NFL SHOP NFL Player Engagement NFL Evolution
  24. 24. 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…
  25. 25. UX Testing OptionsUX Testing OptionsUX Testing OptionsUX Testing Options
  26. 26. 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.
  27. 27. 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.
  28. 28. In the end we chose option #2 (from testing and other information)
  29. 29. 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.
  30. 30. 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
  31. 31. Responsive DesignResponsive DesignResponsive DesignResponsive Design
  32. 32. Responsive Design. 2015 – we need to design for every user every device. - Not just Resize content but Optimize.
  33. 33. 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)
  34. 34. 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.
  35. 35. Mobile Testing Rack. We tested the crap out of the site on wide array of devices (see!)
  36. 36. DesktopsDesktopsDesktopsDesktops
  37. 37. Desktop Experience. How the site turned out for Desktops.
  38. 38. LaptopsLaptopsLaptopsLaptops
  39. 39. Laptop Experience. How the site turned out for Laptops.
  40. 40. TabletsTabletsTabletsTablets
  41. 41. 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.
  42. 42. SmartphonesSmartphonesSmartphonesSmartphones
  43. 43. Smartphone Experience. How the site turned out for Smartphones.
  44. 44. Template StructureTemplate StructureTemplate StructureTemplate Structure
  45. 45. 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.
  46. 46. Template Structure (cont’d). So we came up w/ something like this. Arrows represent likely user paths.
  47. 47. Homepage. -  About Statement -  Featured Content -  Updates Feed (timely content such as press releases) -  Main Category Intros
  48. 48. 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
  49. 49. 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.)
  50. 50. Content BlocksContent BlocksContent BlocksContent Blocks
  51. 51. Content Blocks. -  Rather than using baked/rigid page layout, we decided to create reusable, modular content blocks.
  52. 52. Content Blocks Sheet. -  Variety of different styled blocks to construct a page in unique layout each time.
  53. 53. 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.)
  54. 54. ArchetypeArchetypeArchetypeArchetype
  55. 55. The fieldsets you just saw are from a great package called Archetype, from the guys at Imulus.
  56. 56. ArchetypeArchetypeArchetypeArchetype An alternative to the Grid for creating content blocks Newer sites should try both methods to see what’s comfortable
  57. 57. 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.
  58. 58. Archetype NestingArchetype NestingArchetype NestingArchetype Nesting Great for complex layouts Place repeatable, modular structures anywhere in a page
  59. 59. 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.
  60. 60. 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.
  61. 61. 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.
  62. 62. 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'); });
  63. 63. 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.
  64. 64. 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
  65. 65. 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.
  66. 66. UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment
  67. 67. 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.
  68. 68. 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
  69. 69. 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.
  70. 70. 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); }
  71. 71. 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/
  72. 72. Courier: Global SettingsCourier: Global SettingsCourier: Global SettingsCourier: Global Settings
  73. 73. 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
  74. 74. 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
  75. 75. 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);
  76. 76. Speed Up EditingSpeed Up EditingSpeed Up EditingSpeed Up Editing
  77. 77. We discovered a couple of other ways to speed up the editing process.
  78. 78. 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> } } }
  79. 79. 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.
  80. 80. 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.
  81. 81. API ControllersAPI ControllersAPI ControllersAPI Controllers and Infinite Scrolland Infinite Scrolland Infinite Scrolland Infinite Scroll
  82. 82. 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.
  83. 83. 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?
  84. 84. 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 --- } }
  85. 85. External DataExternal DataExternal DataExternal Data
  86. 86. Earlier we spoke about how binary data such as images should be stored outside of Umbraco.
  87. 87. 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
  88. 88. 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.
  89. 89. 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
  90. 90. 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.
  91. 91. 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
  92. 92. 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/
  93. 93. 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).
  94. 94. Questions?Questions?Questions?Questions?
  95. 95. 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.

×