Hilton Grand Vacations Case Study - Highly Scalable Desktop & Mobile Sites with DNN Enterprise Edition
•Als PPTX, PDF herunterladen•
1 gefällt mir•375 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Empfohlen
Empfohlen (20)
Hilton Grand Vacations Case Study - Highly Scalable Desktop & Mobile Sites with DNN Enterprise Edition
- 1. Ryan Morgan & Henry Tavarez Arrow Consulting & Design HILTON GRAND VACATIONS CASE STUDY: HIGHLY SCALABLE DESKTOP & MOBILE SITES WITH DNN ENTERPRISE EDITION
- 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 SharePoint http://arrowdesigns.com/meet-the- team/ryan-morgan
- 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 platforms http://www.arrowdesigns.com/meet-the- team/henry-tavarez
- 4. Agenda Hilton Grand Vacations Business Case User Experience & Creative Process Technology Used Q&A
- 5. Hilton Grand Vacations BUSINESS CASE
- 6. About Hilton Grand Vacations Part of Hilton Worldwide Serve more than 150,000 customers Over 50 properties worldwide
- 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. 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. Hilton Grand Vacations USER EXPERIENCE & CREATIVE PROCESS
- 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. 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. Information Architecture Consolidate site map down to core sales funnels Remove the clutter to focus on primary call to actions
- 13. Visual Design
- 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. 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. 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. 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. 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. Custom Modules Web services integrate with custom Hilton backend Same services leveraged for Resort Gallery on desktop and mobile
- 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. 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. 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. Web Farms Hilton uses a distributed web farm architecture that efficiently handles the heavy traffic load without requiring shared file servers. Architecture was provided by Applied Innovations
- 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
- 27. Thank You! Questions? Email us at Ryan@ArrowDesigns.com or Henry.Tavarez@ArrowDesigns.com Follow Ryan @arrownuke Follow Henry @elevel Find us on the web at arrowdesigns.com
Hinweis der Redaktion
- 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'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