PhoneGap & smart design empower a mobile sales team

Daylight Studio has been working in the digital space for over 11 years. During that time, we’ve seen Flash boom and bust, jQuery lead a JavaScript revolution and Internet Explorer take a backseat. However, the biggest industry change during this time undoubtedly is the explosion of smart mobile devices. This shift over the last few years has provided us with great opportunities to work beyond our normal web site and web application projects and expand into the mobile space. Earlier this year, Daylight completed one such product—an iPad application for one of our clients, GCI.

The Project Requirements

The GCI sales team needed a mobile application that allowed them to search, display and send sales materials including PDFs, videos, and images to potential clients. They also needed to manage hundreds of documents, work offline, and sync those documents with a content management system (CMS) that housed the files. Above all though, they needed an application that could wrap all this functionality into an intuitive and easy-to-navigate interface.

The “Zen Garden” Design Challenge

With the requirements set, we dove into pushing pixels. The biggest design challenge was to come up with a navigation flow that allowed different user roles to quickly filter potentially hundreds of different documents. The client also expressed the need for a simple navigation solution to return users back to their “Zen Garden” as they called it. In other words, if a user got “lost” in the filtering process and just wanted a reset, they could click a button that would make things all right and take them back to the beginning.

We researched a number of mobile application designs and went through several internal and eventually external rounds of design. The final product absorbed all we learned to create a navigation flow that clearly steps a user through the filtering and selection process but also allows them to quickly go back to their “Zen Garden”:

Bridging the Development Gap

Development began on the application as soon as we had the requirements. Normally we wait for designs to be complete, but there was a lot to get started on that didn’t require design. There was one technical requirement above all others though that drastically changed how this application was to be developed. All of the aforementioned requirement challenges could be solved by leveraging existing web technologies except for one—working offline.

Using native web file storing technologies for storing the various documents being pulled from the CMS would not suffice due to the shear size and number of files that were required. This single requirement pushed us to look for a more native mobile application solution. We knew that given our timeline and resources, a full blown native iOS application would be out of the question. Enter PhoneGap.

PhoneGap is an open source framework that allows developers to create native mobile applications using standard web technologies like HTML, CSS and JavaScript. It provides additional hooks into the native application ecosystem through JavaScript objects such as the file object. The file object proved crucial for syncing files when an internet connection was available so the application could work offline.

Although PhoneGap proved to be the right technology fit for the project, it did come with a few of its own challenges. PhoneGap essentially wraps around a browser view on your mobile device. This means that you are stuck with similar limitations afforded to viewing webpages using Safari in iOS. One issue in particular had to do with being able to display a list of over a hundred files and have it responsively scroll. Without the same hardware muscle as a laptop, this caused a few performance and memory issues on the iPad early on but were fixed by limiting the number of CSS animations, shadows and glow effects. It was a good lesson learned in balancing design and performance.

End Result

Several weeks after the launch of the application we received a phone call from the client. Despite all the hours of testing, we immediately assumed something was wrong and wondered what it could possibly be. However, the call was to simply tell us how happy they were with the application and that they had successfully converted their sales team into using it—they had found their “Zen Garden”. We love calls like that.