Making of an Award-winning Location-aware App!

LS DemoFest winner badges 20155Last month, during the Learning Solutions 2015 conference, I showcased a location-aware course for Downtown Disney at the LS DemoFest show. With this just-in-time and just-in-place learning app, anyone who visits Downtown Disney can learn and benefit from it. The conference attendees loved this app and voted it as the best mobile solution app! 🙂

Inquisitive to know more about this app? Let me answer some of the questions you might be thinking of.

Why did you build this app?

There’s magic all around Orlando, and it’s easy to miss some amazing things you can do to shop, dine, and play there. This GPS-enabled app, available for Android and iOS devices, guides you through the streets of Downtown Disney. As soon as you reach near a prominent spot, you get information related to the restaurant, shop, or play area.

How did you build this app?

  • Design for tablets and mobile devices: This is a truly responsive mobile app created using Adobe Captivate 8 and the breakpoints are set for tablet-horizontal, mobile-horizontal and mobile-vertical views. These breakpoints are for typical tablet and mobile viewport sizes. I ditched the laptop here, as I didn’t expect people to carry their laptops around the marketplace to learn more about it. Lol 😉

Responsive1

 

Responsive2

 

  • GIF Animations: There are tons of GIF animations in the app to give it an interesting look and feel. For the intro animation as well, I converted an MP4 video to a GIF animation to reduce the file size and play the video in loop. And for the information slide, I created animations with pictures related to the place to give it a slideshow kind of a feel. These GIF animations were created using Adobe Photoshop and embedded in Adobe Captivate project.

Attractions-in-Downtown-Disney

  • Location-aware: To make the course location-aware, I enabled GeoLocation tracking for the course and created variables for each of the prominent locations in Downtown Disney. Then I wrote a conditional action to check the person’s current location and display content based on where they are in the marketplace.

Geolocation

  • App creation: Once the project was ready, I published it as an app from Captivate, with the help of integrated PhoneGap technology.

Interested in taking a look at the step-by-step procedure to create this app? Register for this free online webinar on Just-in-place learning for a Mobile Workforce scheduled on 28th April 2015.

How long did it take you to build this app?

It took me about 4-5 days to build this app. This includes designing the interface, storyboarding, taking pictures, creating animations, writing advanced actions for Location detection, putting it all together in Captivate, and publishing it as an app.

QRCodeHow does this app work?

  1. Scan this QR code to download and install the app on your iOS or Android device.
  2. Launch the app.
  3. Click the Enter button and walk around in the Downtown Disney marketplace with the app active. As soon as you are close to a prominent location, information related to the location will pop-up.

What problems or challenges did you face?

The problems that I faced while creating this course were solely because I was away from the location when I started working on this app. I needed the actual pictures and videos of the prominent spots in Downtown Disney. Also, there was no way I could test this app without being physically present at that location. To overcome this problem, I created the course with placeholders for images and animations and wrote the actions for each location, and parked adding the final images and testing the app for the day I reached Orlando to attend the conference. I also did a dummy test by adding location details related to a park in my area to test if things were working fine.

What were your lessons learned while working on this app?

There can be nothing more effective than just-in-time and just-in-place learning. Though you’ll face some challenges in using the newer technologies and getting used to them, you should make the most of them for designing your learning content. This will allow you to make the most of the native capabilities of the devices and make learning effective and fun!

Have more questions? Leave a comment here or join me on 28th April for a free webinar on Just-in-place learning for a Mobile Workforce and get all your questions answered!

 

7 Responses

  1. Also did some testing by building a GeoLocation app myself. The problem I ran into was that I had to “loop” the slide so the Location check will be triggered by the on Enter event of the slide.
    This constant looping and Location checking would drain the battery of my device. Did you have the same problem?

    • Same for me when I did some testing with geolocation a while back. It’s fine for detecting, at the beginning of a project upon load, but I don’t see how it’s useful for ‘walk around’ type projects unless it is looped, which is not a viable solution. I notice in the video that they never show the actual project slide change when either of the two geolocations is entered/triggered – there is an edit/cut in the video at those points. Would love to get source cptx for it if it does work.

  2. I have
    an animation that was created in Edge Animate. One is rendered as an html
    file. I also have the same animation rendered as an oam file. I
    want to use it in Captivate 8. The animation is of a kitten. I also
    have a picture of a kitten. I want to use the png picture of the
    kitten to be a button. When the user clicks on the picture of the kitten,
    I want the kitten animation to run. I want the picture of the kitten to
    disappear while the animation is running. After the animation is
    finished, I want the animation to rewind and the picture of the kitten to come
    back. I want the user to be able to click on the picture of the kitten
    again and the animation to rewind and start over. I also need the
    animation to have a transparent background instead of a white background.

    Do you
    have a video on how to accomplish this?

    Thanks so much.

Leave a reply

Related