The Road Less Traveled: Our Journey to Release a Better Mobile App

The evolution of our mobile app began as an internal hack day project to create a mobile view for the PagerDuty web app. This mobile website was transformed into a makeshift mobile app using a native wrapper to provide push notifications. Despite the limitations of our first app, 30% of non-email alerts were push notifications after only eight months.

Since the app was publicly available for PagerDuty customers, it opened us up to a lot of criticism. Like the comment below:

LOL, the PagerDuty App is just a mobile web browser with push notifications? How awful is that?” - One (and most) of our customers who downloaded the mobile app

PagerDuty’s Old Mobile App

Going Down the HTML5 Road

We went down the wrong path with jQuery Mobile as our HTML5 solution. The initial app was sluggish with 1-to-2 seconds of lag time for most in-app actions and it was not optimized for touch interfaces. But this wasn’t necessarily a failure of our decision to create an HTML5 app, instead it was its quick and dirty implementation in order to provide push notifications for our customers.

Much of the feedback we received was from customers who wanted us to release a native app. After digging deeper into this feedback we found that the true problem with our mobile app was its experience, in particular its speed. The assumption that ‘web = slow’ is inaccurate. We believe a faster, more reliable experience is possible with an HTML5 app.

If I had asked people what they wanted, they would have said faster horses. – Henry Ford (maybe)

With the most important issues of our first app revealed as speed, both perceived and functional, we made significant changes to deliver a better experience for our customers.

How We Created a Faster, More Reliable App

We’ve completely reimagined the app to focus on the essential needs of our customers who rely on it. We also made sure that essential information for incidents is quickly and easily accessible.

Our first step was to ditch jQuery Mobile as it wasn’t customizable and was very bloated from a file size perfective (216KB uncompressed and unminified). jQuery Mobile encourages deep information hierarchies, which meant you need to sort through seas of navigation menus in order to retrieve useful information. This was prevalent in our first app, as it required multiple clicks and taps to accomplish a task.

A high priority for our new app was to surface information early. We use colors in the UI to indicate status. Green, you’re good to go, Red, something is wrong and Orange, someone has acknowledged an incident. It’s easy to access additional incident details and we put an emphasis on actionable infomation.

The new app will allow you to see incidents details with one-tap or swipe to acknowledge, resolve and re-assign an incident. Or you can even acknowledge and resolve all of your teams current incidents. These UI updates will make the app feel a lot faster than it’s predecessor.

On the back end we have made the app faster as well. We wanted to use the smallest possible set of libraries that would get the job done. After testing other libraries, we found Hammer.js had the best touch gesture support for older Android and iOS devices. Hammer.js is very flexible and allows us to build pixel-precise interaction patterns.

In addition to Hammer.js, we used Zepto as a replacement for jQuery to improve performance as well as a specialized mobile build of lodash.js.

Validating Our Choices

Making decisions is easy, but making sure our assumptions were correct required a lot of testing and on-going monitoring and iterations.

Before building the app, we created wireframes of our new UI to prototype the interactions in the app. Would important information be easily accessible? How many taps or clicks would it take to acknowledge, resolve or reassign an incident? Feedback from people who use PagerDuty helped us validate our design decisions to start building the app.

mobile_app_wireframes

Once the app was built, we opened a public beta that allowed our users to use the new app in action. Thanks to their feedback we made many pre-release changes to the functionality and UI of the app.

Our last piece of validation came after the new app was released. We have steadily watched our ratings in the app stores rise and have been inundated with lots of positive feedback about the look, feel and speed of the new app.

FINALLY! This used to be such a PITA that I switched back to just using SMS alerts. With this latest iteration, I am back to push notifications only, unless I don’t respond in 5 minutes. This new version is incredible! It runs so much smoother with much less bandwidth and it’s very easy to ack/resolve pages as well as add notes to each one. Whoever wrote this needs a gold star and should continue to oversee the next iterations of this app. They have started you out on a good foot in the mobile world, finally. Good job guys! – Charles Panayides, Associate Systems Engineer at Tumblr

Haven’t tried out our new mobile app yet? You can download it from Google Play or the Apple App Store. Leave us a review or a comment below. We’d love to know what you think about the new app, we may just take your suggestions and use it in a future update of the app!

Share on FacebookTweet about this on TwitterGoogle+
This entry was posted in Features and tagged , , . Bookmark the permalink.

2 Responses to The Road Less Traveled: Our Journey to Release a Better Mobile App

  1. rsmck says:

    On iOS there’s still two notable issues with the app that make it ‘feel’ out of place;

    Scrolling does not behave like it should on iOS (i.e. no ‘bounce’ at the edges, and it stops suddenly, no intertia-type effect)

    The keyboard resembles iOS 6, even on an iOS 7 device.

    Fix these and it’d be pretty much perfect, even if it is HTML 5

  2. RFSilva says:

    Would be possible to have a version for the new Blackberrys (Z10/30)?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>