Ryan Morgan & Henry TavarezArrow Consulting & DesignHILTON GRAND VACATIONS CASESTUDY: HIGHLY SCALABLE DESKTOP& MOBILE SITE...
Meet Ryan Morgan   Ryan Morgan is the Founder and    Managing Partner at Arrow Consulting    & Design.   Arrow Consultin...
Meet Henry Tavarez   Henry Tavarez is the Creative    Director at Arrow Consulting & Design   Designed and skinned the c...
Agenda   Hilton Grand Vacations Business Case   User Experience & Creative Process   Technology Used   Q&A
Hilton Grand VacationsBUSINESS CASE
About Hilton Grand Vacations   Part of Hilton Worldwide   Serve more than 150,000 customers   Over 50 properties worldw...
Pain Points   Initially built web on LAMP stack   Lacked integration with core Microsoft systems   Separate marketing a...
Business Needs   Unify platform for management of websites   Simplify content management for employees   Handle periodi...
Hilton Grand VacationsUSER EXPERIENCE & CREATIVEPROCESS
Discovery   What are the most used features on the    website?   What pain points do your customers have with    browsin...
Mobile Optimized vs Responsive Design   What do we think our    users want to accomplish    with mobile?   Will the empl...
Information Architecture   Consolidate site map down to core sales funnels   Remove the clutter to focus on primary call...
Visual Design
Hilton Grand VacationsTECHNOLOGY
Skins – Meta Tags   Mobile specific meta tags and head tags<meta name="viewport" content="width=device-width, initial-sca...
Skins – jQuery Mobile   jQuery Mobile is tested on multiple    devices.   Brings features like AJAX navigation,    touch...
Skins – DNN Mobile Redirect   Redirect rules capture users coming from    mobile devices and redirect to    m.hiltonvacat...
Skins - IsAuthenticated   Difficulty managing admin of jQuery Mobile site   Admins need ability to access additional fea...
Skins - SkinObjectsEX   Mobile sites must perform    efficiently and be mindful of users    data plans   Using these ski...
Custom Modules   Web services integrate    with custom Hilton    backend   Same services    leveraged for Resort    Gall...
Custom Modules   Views work with jQuery Mobile    to navigate the site using AJAX   Uses list view controls from    jQue...
Custom Modules   Custom jQuery plugins manage    the photo gallery for mobile    devices with slideshow and    swipe feat...
Custom Modules   Directions call Google Map API    to generate mobile friendly    maps right on the site without    havin...
Web FarmsHilton uses adistributed web farmarchitecture thatefficiently handlesthe heavy traffic loadwithout requiringshare...
Web Farms   Leveraging web-farm features in DotNetNuke    enterprise   Custom private cloud configuration with our    pa...
Hilton Grand VacationsQ&A
Thank You!Questions? Email us atRyan@ArrowDesigns.com orHenry.Tavarez@ArrowDesigns.com           Follow Ryan @arrownuke   ...
Upcoming SlideShare
Loading in …5
×

Hilton Grand Vacations Case Study - Highly Scalable Desktop & Mobile Sites with DNN Enterprise Edition

346 views

Published on

Using the Enterprise features of DotNetNuke, HiltonGrandVacations.com serves 150,000 customers around the world on desktop and mobile devices. Join Arrow Consulting & Design's Founder Ryan Morgan and Creative Director Henry Tavarez as they explore the business case, creative process, and technology used to create the desktop and mobile implementations of Hilton Grand Vacations' central web property.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
346
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Linux apache mysqlphpLamp has a problem integrating with core microsoft systemsMarketing content was managed on one platform while transaction occur somewhere elseWhich make it really inefficient for daily tasks and maintenance
  • Bring all the websites under one platform to make it easier to manageThat would help out the empoyess tremendously and also simplify the process of managing the contentIt needed to handle large spikes of trafficreach more users by making it accessible across more screens… particularly mobile
  • Understand a but about what their users may need?What features do the customers use the most? Browsing Resorts? Finding directions? Booking reservations?What problems do your customers have with the site? What about employees?Do the employees use internal systems to manage the content? How is that managed across the various web properties?
  • Questions like do we go mobile optimized or responsiveNever one answerWhat actions do we think our users want to accomplish when browsing through mobile? Look for resorts? Directions? Book?Will the employees manage multiple sources of content? Should we provide a single source of content?Mobile Application Mindset vs Website Browsing Mindset - Should the users have a different experience when using mobile vs the desktop?Access: Users need to be able to access an experience. The most beautiful design in the world will accomplish nothing if people can’t view it.Interact: They need to be able to interact with the content and get around the website (navigate, scroll)Perform: The average page now weighs a whopping 1 MB due to assumptions made by web creators. mobile users expect mobile websites to load as fast, if not faster, than desktop websites, and 74% of mobile visitors will abandon a website if it takes more than 5 seconds to load. Enhance: Augment the experience the user receives by using the capabilities of the device you have (click to call, form enhancements, geoocation)
  • Since we chose a mobile optimized site for this implementation:Consolidate: Get down to the bread and butter of what a user wants to accomplish on the mobile site.Remove Clutter: Focus on the primary call to actions. In this case being browse resorts, get directions and request informationWe created our wireframes in Balsamiq to provide the client with a transparent view of what we were building before we begin to apply the final pixels.
  • Because we followed this user center design focus, When it’s all said and done, our designers have enough information from discovery and information architecture to create final design concepts that accomplish the business and user requirements without compromising the look and feel.
  • Viewport meta tag allows us to set the width of the viewport to the width of the device. Controlling the viewport allows us not to hardcode in container sizes and helps us manage the other features like the initial scale of the site or whether the user can scale the site. Since this site is optimized for mobile, there is no need of the user to have to scale the site in order to access the content.In future iterations of this site, as customers are given more to do on the site, we can add additional meta tags such as web – app capable to give the site more of an application feel by removing address bar and toolbars.
  • 1) jQuery has already been tested on multiple devices. When building a mobile site, testing is a big part of the time spent and this gives us an head start2) The framework already has big features built into it like AJAX navigation and touch events. Each UI component has already been optimized for mobile3) The theming engine that comes with it is highly customizable. The ui components already look good out of the box but the style sheets allow for swift modification of look and feel4) Built on top of jQuery, there are loads of plugins that have already been built to operate with jQuery.
  • DNN allows us to capture specific mobile devices and route them to the appropriate experience. Since Hilton had some flash integrated into their content on the desktop, we chose to route the table experience as well to the mobile optimized version of the site.The LinkToFullSite skin objects allow us to easily link to the full site once a user has been redirected.
  • Because jQuery mobile takes over the navigation of the site with AJAX, we want to make sure we only load that experience for regular users. It can interfere with admins needing to access additional features and manage content.We use an example of the following code to check if the user is authenticated. If they aren&apos;t, we load jQuery mobile and all the other components necessary.
  • Earlier I spoke about performance and the need to be mindful about a users data plan. Most of the time spent by a user browsing mobile sites is spent downloading resources.We use skin objects EX to allow us to attach these resources in a way that lets us use the client resource management features in DNN. Once these files are available to that feature, they can be reduced in file size and combined before they ever reach the user.
  • When you tap on the list item, the framework will trigger a click on the link inside the list item, issue an Ajax request for the URL in the link, create the new page in the DOM, then kick off a page transition. 
  • Hilton typically has high volumes of traffic, especially toward the end of the year when customers are redeeming their vacation points. That will grow even more when we implement transactions on the sites.Uses a distributed web farm architecture that efficiently handles the heavy traffic load without requiring shared file servers
  • Hilton Grand Vacations Case Study - Highly Scalable Desktop & Mobile Sites with DNN Enterprise Edition

    1. 1. Ryan Morgan & Henry TavarezArrow Consulting & DesignHILTON GRAND VACATIONS CASESTUDY: HIGHLY SCALABLE DESKTOP& MOBILE SITES WITH DNNENTERPRISE EDITION
    2. 2. Meet Ryan Morgan Ryan Morgan is the Founder and Managing Partner at Arrow Consulting & Design. Arrow Consulting & Design is a software development and web consulting firm 30 people strong specializing in DNN, Mobile, SharePoint, ASP.NET and WPF/Silverlight. Author for Wrox and MSDN on the topics of DNN and SharePointhttp://arrowdesigns.com/meet-the-team/ryan-morgan
    3. 3. Meet Henry Tavarez Henry Tavarez is the Creative Director at Arrow Consulting & Design Designed and skinned the core DotNetNuke template for DNN 6 UX architect for national and internationally used web-based products and services Developed user interfaces for several e-commerce platformshttp://www.arrowdesigns.com/meet-the-team/henry-tavarez
    4. 4. Agenda Hilton Grand Vacations Business Case User Experience & Creative Process Technology Used Q&A
    5. 5. Hilton Grand VacationsBUSINESS CASE
    6. 6. About Hilton Grand Vacations Part of Hilton Worldwide Serve more than 150,000 customers Over 50 properties worldwide
    7. 7. Pain Points Initially built web on LAMP stack Lacked integration with core Microsoft systems Separate marketing and transaction systems Inefficiency with daily tasks and maintenance
    8. 8. Business Needs Unify platform for management of websites Simplify content management for employees Handle periodic heavy loads of traffic Reach more users though mobile
    9. 9. Hilton Grand VacationsUSER EXPERIENCE & CREATIVEPROCESS
    10. 10. Discovery What are the most used features on the website? What pain points do your customers have with browsing the site? How do employees manage the resort information?
    11. 11. Mobile Optimized vs Responsive Design What do we think our users want to accomplish with mobile? Will the employees manage multiple sources of content? Mobile Application Mindset vs Website Browsing Mindset
    12. 12. Information Architecture Consolidate site map down to core sales funnels Remove the clutter to focus on primary call to actions
    13. 13. Visual Design
    14. 14. Hilton Grand VacationsTECHNOLOGY
    15. 15. Skins – Meta Tags Mobile specific meta tags and head tags<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><link rel="apple-touch-icon"href="/Portals/_default/Skins/Hilton-Mobile-V2/apple-touch-icon.png"/>
    16. 16. Skins – jQuery Mobile jQuery Mobile is tested on multiple devices. Brings features like AJAX navigation, touch events, mobile optimized UI Highly customizable theming Large community and many available plugins
    17. 17. Skins – DNN Mobile Redirect Redirect rules capture users coming from mobile devices and redirect to m.hiltonvacations.com LinkToFullSite skin objects allow the user to browse back to the desktop site once they have been redirected
    18. 18. Skins - IsAuthenticated Difficulty managing admin of jQuery Mobile site Admins need ability to access additional features<% If Not IsAdmin Then%> (pseudo code)// load jQuery Mobile// do something…<% End If%>
    19. 19. Skins - SkinObjectsEX Mobile sites must perform efficiently and be mindful of users data plans Using these skin objects allow use of Client Resource Management feature of DNN which: – Reduces file size of each resource – Combines resources into fewer files You can find the module at http://DNNSkinObjectsEX.codeplex.com/
    20. 20. Custom Modules Web services integrate with custom Hilton backend Same services leveraged for Resort Gallery on desktop and mobile
    21. 21. Custom Modules Views work with jQuery Mobile to navigate the site using AJAX Uses list view controls from jQueryMobile to create mobile friendly navigation
    22. 22. Custom Modules Custom jQuery plugins manage the photo gallery for mobile devices with slideshow and swipe features Images delivered though Web Services API from Hilton Resort Admin
    23. 23. Custom Modules Directions call Google Map API to generate mobile friendly maps right on the site without having to navigate to the phone map application
    24. 24. Web FarmsHilton uses adistributed web farmarchitecture thatefficiently handlesthe heavy traffic loadwithout requiringshared file servers.Architecture wasprovided by AppliedInnovations
    25. 25. Web Farms Leveraging web-farm features in DotNetNuke enterprise Custom private cloud configuration with our partner Applied Innovations High-availability and easy scalability through load-balanced web front ends Designed to handle burst peak traffic and sustained high traffic Automatic failover in the Web and SQL Servers
    26. 26. Hilton Grand VacationsQ&A
    27. 27. Thank You!Questions? Email us atRyan@ArrowDesigns.com orHenry.Tavarez@ArrowDesigns.com Follow Ryan @arrownuke Follow Henry @elevel Find us on the web at arrowdesigns.com

    ×