Disney Case Study: Hybrid Mobile App Development Brings the Magic

Disney’s Magical Express (DME) is a service long lauded for its ability to give its guests a worry-free experience from the Orlando International Airport to the Walt Disney World Resort. 

The DME service begins before the vacation begins, when luggage tags are sent to the guests in the mail. The tags include barcodes, the resort area, and the specific resort name. Guests simply affix the luggage tags prior to checking in their bags, and once travelers arrive at Orlando International Airport, they are guided toward prominent directional signs that display “Disney’s Magical Express.”

Rather than retrieving luggage at baggage claim, guests are whisked away in a complementary motor coach and transported directly to the Walt Disney World resort where their luggage is magically directed to their reserved Disney room.  

“Once you see the operation in action, it’s natural to wonder how we keep track of your luggage the whole time and get it to you in a timely manner,” says Michael Callaghan, a lead software engineer for Disney Parks and Experiences. “It’s a large task that’s solved by technology.”

With this amount of coordination, the system needs to execute flawlessly. One hot, summer day, it did not. 

“My team received a somewhat frantic email. Due to some hardware support issues, [Disney’s Magical Express] was at risk of being shut down,” says Callaghan.

Challenge

One native app, one hardware solution

Part of the magic that brings this experience to life involves scanning the luggage tag’s barcode which sends the guests’ information to an internal database. This transaction lets the entire Disney Transportation team know where guests’ bags are throughout the journey from airport to resort.

Scanning the barcodes requires a robust WiFi network connection, and on this particular day, Callaghan and his team were told that Orlando International Airport’s WiFi was being upgraded to a more current standard. The Windows CE handhelds used by the Disney Transportation team were not supported by the manufacturer and would not handle the upgraded WiFi.

“We were asked to solve this problem before the WiFi upgrade happened,” says Callaghan.

Callaghan went back to the business and asked what type of hardware they wanted to use.

The Remote Sorting Facility workers favored an Android device that would withstand the sorting facility environment. Disney park operations wanted to continue using iOS enabled hardware like iPhone and iPod Touch since they saw success in using these devices. But the managers in the sorting facility were concerned the iPhones would not be resilient enough for their operations. In the end, the managers wanted Callaghan and his team to support both iOS and Android.  

Callaghan explained to the managers that the budget and timeline needed to develop two applications in parallel would be greater than just developing one application. They would either need to pick a single platform or spin up two separate teams to build two different Disney apps.

“Not surprisingly, they weren’t thrilled by that news,” says Callaghan.

The software engineers started looking into a mobile web solution. With HTML5, camera support is possible and could work well in theory cross-platform. But that solution turned out to not be that simple. Creating the barcode decoder service via HTML5 required much more time than they had. It also turned out that the business didn’t actually need to use the camera and relied on a custom barcode scanner.

“We were forced to rethink our approach,” says Callaghan.

Solution

Hybrid mobile app development across multiple devices

Callaghan and his team started looking at Ionic to solve their cross-platform app development problem. 

“We knew that Ionic would do the heavy lifting of interacting with the hardware and providing the host for the web application’s code to run directly on the device as opposed to a remote web server,” recalls Callaghan.

Ionic provided the native look and feel they needed to achieve across both iOS and Android devices. They knew they could rely on the web skills their team already knew: HTML, JavaScript, and CSS. Ionic also supported Angular, which Callaghan and his team was already familiar with. The only hill to climb was making sure the custom barcode scanner was supported. 

Callaghan contacted the technical support lead of the company who made the scanner and found out that they had a Cordova plugin. Cordova is open-source and uses Javascript to communicate with the device, and Ionic and Cordova work well with each other.

After several tests Callaghan and his team developed a code that worked with the scanner and identified the barcodes on the DME luggage tags consistently. Once the proof-of-concept test passed, Disney officially made the decision to use Ionic.

Callaghan and his team worked with Disney UX and design teams to get a basic page layout built. Since the application is “guest visible,” meaning guests could see the application at any point in time, the design needed to match the Disney visual guidelines. Ionic made this style customization easy. 

In addition to the scanning of the DME luggage tags, employee badges also needed to be scanned to identify workers who were scanning the luggage tags. Rather than creating a new workflow and retraining employees, Callaghan made the decision to design the UI with visual cues that shows the logged in user, current location, and scan type. 

“The entire UI is implemented with simple Ionic components, data-bound to variables and functions written in Angular,” says Callaghan. 

With some minor configuration changes, we could easily support Android devices in just a few days. Selecting Ionic is what made that possible.

Michael Callaghan, a lead software engineer for Disney Parks and Experiences

Results

Flexible configuration, smart offline storage, and a smooth customer experience

Though cross-platform mobile application capabilities were afforded using Ionic technologies, Disney ultimately decided to go with iPhone devices for the DME experience. The barcode scanner company provided Disney with an industrial scanning case that fit iPhones perfectly, making them as robust as their Android counterparts. 

Disney decided to go with iPhones because they were less expensive than the Android devices they were considering, and the cases provided an extra battery. However, because Callaghan and his team used Ionic to create the mobile application, they were not locked into their decision to use iPhones. 

“With some minor configuration changes, we could easily support Android devices in just a few days,” says Callaghan. “Selecting Ionic is what made that possible.”

Callaghan also relied on Ionic to provide offline support capabilities in the event WiFi went down or was weak in certain areas of the resort.

“If the call fails, the data is placed in persistent storage on the device itself. This is a SQL-like database managed by the Ionic storage library,” explains Callaghan.

Once the devices come back online, scans are pulled from the database. The Disney employee is not aware of network errors.

Though the apps were built some time ago, Callaghan says that if he had to develop them again, he would leverage Appflow and the complete CI/CD system. This would save the developers time and effort throughout the process.

With the capability to deploy a single codebase to multiple OS platforms, compatibility with Cordova, smart offline local storage, and CI/CD integration, Ionic provided the necessary technological magic to keep Disney’s Magical Express moving smoothly ahead.

Learn more about Walt Disney World Resorts on LinkedIn, Twitter, Facebook, and YouTube.