CSUC13 Video: Interactive Maps and Virtual Campus Tours


Published on

BarkleyREI will showcase a fully Responsive Virtual Tour they developed in Cascade Server with Washburn University. They will also present an innovative interactive map in Cascade that's under development for Chapman University.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Thank you for joining us today. We’re glad you’re here, and hope you find the presentation informative. My name is Chris Cox. I’m Client Services director at BarkleyREI. This is my 4th User Conference, and second as a presenter. I might look familiar to some of you, I presented a session on Responsive Design in Cascade Server last year. My colleague Ryan Sprake is with me here today. Ryan is one of our Senior Interface Developers; he’s the person who built the 2 things we’re going to be showing today.So, why did we pick this topic? Because we know that getting prospects to visit your campus is a paramount objective for many higher ed websites. A good Virtual Tour can show off your facilities, express your personality, and help entice people to visit campus. We are going to show you a fully Responsive Virtual Tour we developed in Cascade Server with Washburn University, and will also present an innovative interactive map in Cascade that's under development for Chapman University.
  • These are some of our Cascade Server clients that we’ve worked with. It’s nice to see some of them here today, glad you could be here.
  • Here are some of our other Higher Ed clients…
  • …and some more…
  • …and here are some of our non-higher ed clients. We do a fair amount of travel/tourism work, non-profit work, and work in a few other verticals like financial services.
  • So, the first thing we’re going to show today is the Virtual Tour we developed for Washburn University. Some of you may have met our client from Washburn, Mr. Shane Bartley, here over the past few days. Unfortunately his flight options were fairly limited, and he had to leave to catch his plane a little while ago. But he has said he will be happy to provide the ‘university webmaster’ point of view about any questions you may have; you can send them to me and I’ll be happy to consolidate and forward to him.
  • So what does the Virtual Tour consist of? Here is our original design comp. As you’ll see, the Virtual Tour landing page has 3 main sections:The Welcome video with this intro text over hereThe Map- which was created in Illustrator/Photoshop by a very talented person at WashburnThe Gallery, which has a lot of photos and videos
  • Here is a closer up screen capture of the Welcome Video/Intro text live site. Now I’ll show you what it looks like inside Cascade.
  • As you can see, the content entry is pretty straightforward. Even though this content is pretty evergreen, we still wanted to make sure an entry-level content author would be capable of updating it if needed.
  • So here we map out which field controls which section of the page.
  • The campus map. In many ways this is the focal point of the Virtual Tour page. Site visitors can see at a glance where various campus facilities are in relation to each other. You’ll notice the tabs at the top, for different filters the user can select. By default the page loads with “Must see”, which as the name implies are things that Washburn considers the ‘highlights’ of the campus. But if a user just wants to see all the Athletic facilities, for instance, they can click on that tab and its listings will pop up. For the record, a building can be in more than one category. Each building has one unique number- if it’s #1 on Must See, it will be #1 on “Show all” as well.
  • Each item on the map has a Details page in Cascade Server. We created a Content Type for them, and I’m going to show you all the different elements of that Content Type, and what controls what.
  • On the Details page for each item, the Keywords field controls which categories the item displays in.
  • When you click on one of the numbers, a little preview box opens telling you what the item is. It has the name, photo, brief description and a link to ‘learn more.’
  • All this content is controlled very easily in Cascade.
  • If you click “learn more”, you go to the item’s Details pages. The Details pages have room for a lot of content, including traditional still Photos, 360 degree panorama photos, Videos, and of course text.We carried through Responsive Design principles. What you’re seeing here is the traditional desktop view, which these days we simply call the ‘large’ view.
  • Tablet size:Title/text goes under the image, not to the right, because it’s narrower now.Arrows go away, rely on finger swiping instead of clicking with a mouse“Get directions” link appears. Now, at the time the Virtual Tour was conceived and built, the thinking was that if you were ‘on the go’- such as walking around with a smartphone- you would be more likely to need directions. “Hey, I must be in the wrong part of campus, how do I get to this place?” So we added “get directions” for tablets and mobile sizes. A year and a half later, we’ve shifted and stray away from assuming device or intent at different sizes, so if we were to build this again now we’d probably recommend having “get directions” appear at all times.
  • When you get even narrower, to mobile width, you’ll see the text wraps more tightly under the picture.We also removed the “Related Photos and Videos”, because of spacing concerns on such small screens. That’s another thing that, were we to redo this today, we might revisit and decide to include. I think part of the hope had been that not showing them would reduce load time on mobile, but it didn’t actually help that.
  • All this content is also very easily managed in Cascade. (after showing, mention we’ll show the images in a second.)
  • Now the images here are classified as Gallery Items. You have to choose a Type, which can either be ‘image’, ‘video’, or ‘panorama’. Then, you need to complete the relevant field below it, i.e. if it’s a still image you specify which image to use, if it’s a video you enter the YouTube ID, etc. You can add, delete and reorder the Gallery Items, too, thanks to this handy feature in Cascade.
  • The “Related Photos & Videos” are controlled by the “Related Links” section of the template. For each, you select which Type you want, where you want it to link, and what you want its image to be.We debated whether to develop something that would select these dynamically, based on categorization. For instance, since this building is in the Academics category, pull in 4 other Academics photos, either randomly, or by ‘most recently added’, or some other criteria. Ultimately we all decided the manual control was more important, and since these pages aren’t ones that you have to update very often, the extra control doing it manually afforded was worth the additional content entry.
  • The last part of the Virtual Tour landing page is the Gallery. Basically, if a user wants to look through the images and see what jumps out at them, and then click to see what it is, they can. It’s just another way to explore the Tour.
  • Basically, all the Gallery Items entered on the Details pages show in the Gallery, and the ‘Must See’, ‘Academics’, ‘Campus Life’, etc. categories carry over.
  • Ryan and I are joined today by Chapman’s webmaster, Mandy Thomas, who many of you may have met at last year’s conference or over the past few days. Thank you for being here today Mandy.
  • CSUC13 Video: Interactive Maps and Virtual Campus Tours

    1. 1. Interactive Maps and Virtual Campus Tours Cascade Server User Conference Tuesday, September 17th, 2013 @BarkleyREI #csuc13
    2. 2. Who is BarkleyREI?  Full-service interactive agency  Specialize in “information and application rich” projects  Decade of higher education experience (50+ clients)  Extensive Cascade Server experience  25+ employees Whois BarkleyREI? @BarkleyREI #csuc13
    3. 3. Clients
    4. 4. Clients
    5. 5. Clients
    6. 6. Clients
    7. 7. Washburn University Virtual Tour @BarkleyREI #csuc13
    8. 8. Who is BarkleyREI?Whois Washburn University?  Located in Topeka, Kansas  7,300+ students  Founded in 1865  Named after early benefactor Ichabod Washburn @BarkleyREI #csuc13
    9. 9. Who is BarkleyREI?Whois Washburn University?  RWD website redesign launched on Cascade Server in May 2012  School of Law RWD redesign launched May 2013  Washburn Institute of Technology RWD redesign in progress @BarkleyREI #csuc13
    10. 10. Website Goals Business Objectives Website Strategies Website Tactics OurApproach @BarkleyREI #csuc13
    11. 11. Business Objective Increase enrollment among traditional full time undergraduate students Website Goal Generate campus visits Website Strategy Showcase the campus and its facilities Website Tactic Improve the Virtual Tour @BarkleyREI #csuc13
    12. 12.  Welcome video / intro text  Map  Gallery @BarkleyREI #csuc13
    13. 13. @BarkleyREI #csuc13
    14. 14. @BarkleyREI #csuc13
    15. 15. @BarkleyREI #csuc13
    16. 16. @BarkleyREI #csuc13
    17. 17. @BarkleyREI #csuc13
    18. 18. @BarkleyREI #csuc13
    19. 19. Making the site easy to maintain @BarkleyREI #csuc13
    20. 20. @BarkleyREI #csuc13
    21. 21. @BarkleyREI #csuc13
    22. 22.  All Gallery Items entered on the Details pages show in the Gallery  The „Must See‟, „Academics‟, „Ca mpus Life‟, etc. categories carry over @BarkleyREI #csuc13
    23. 23. Summary  Responsive Design  HTML5  Categorized  Multimedia  Easy content entry in Cascade @BarkleyREI #csuc13
    24. 24. Chapman University Interactive Map @BarkleyREI #csuc13
    25. 25. Who is BarkleyREI?Whois Chapman University?  Located in Orange, California  Founded in 1861  Nearly 7,000 students across 7 Schools & Colleges  Students from all 50 states, the U.S. territories, 60+ countries  RWD homepage launched Nov. 2011 on Cascade Server, full redesign live in March 2012 @BarkleyREI #csuc13
    26. 26. Who is BarkleyREI? @BarkleyREI #csuc13
    27. 27. Who is BarkleyREI?Mapfeatures  Dozens of listings across 14 categories  RWD  Google Map  Zoom  Print  Map vs. Satellite view
    28. 28. @BarkleyREI #csuc13
    29. 29. Who is BarkleyREI? @BarkleyREI #csuc13
    30. 30. Who is BarkleyREI?
    31. 31. Who is BarkleyREI? @BarkleyREI #csuc13
    32. 32. Who is BarkleyREI? @BarkleyREI #csuc13
    33. 33. Who is BarkleyREI? @BarkleyREI #csuc13
    34. 34. Who is BarkleyREI?
    35. 35. Who is BarkleyREI? @BarkleyREI #csuc13
    36. 36. Who is BarkleyREI? @BarkleyREI #csuc13
    37. 37. Who is BarkleyREI?
    38. 38. Who is BarkleyREI? @BarkleyREI #csuc13
    39. 39. Who is BarkleyREI? @BarkleyREI #csuc13
    40. 40. Who is BarkleyREI?
    41. 41. Who is BarkleyREI? @BarkleyREI #csuc13
    42. 42. Who is BarkleyREI?
    43. 43. Who is BarkleyREI? @BarkleyREI #csuc13
    44. 44. Who is BarkleyREI? @BarkleyREI #csuc13
    45. 45. Who is BarkleyREI? @BarkleyREI #csuc13
    46. 46. Who is BarkleyREI? @BarkleyREI #csuc13
    47. 47. Who is BarkleyREI?
    48. 48. Who is BarkleyREI? @BarkleyREI #csuc13
    49. 49. Summary  Responsive Design  HTML5  Google map  Categorized  Easy content entry in Cascade @BarkleyREI #csuc13
    50. 50. Questions? @BarkleyREI #csuc13
    51. 51. Thank You Additional questions or comments, please contact: Chris Cox, Client Services Director 412-427-7088 ccox@barkleyrei.com @BarkleyREI #csuc13