What are you looking for?

Creating Interactive Prototypes with Cordova, Proto.io & Lookback

In this post, we will investigate, from a technical perspective, how to create prototypes and the tools we recommend using.

As we’ve discussed before, prototyping is a hugely valuable, cost and time saving way to not just create apps, but to also establish whether app ideas have any potential. In this post, we will investigate, from a technical perspective, how to create prototypes and the tools we recommend using. These are the steps you can take, once you have your designs, to create a prototype app. This is all about how to test designs for native apps prior to writing the native code.

Injecting life to designs
Proto.io is a site that allows you to create fully-interactive high-fidelity prototypes, without the need for programming. We use this here at Mubaloo to generate UX prototypes as part of initial project exploration.

Testing those designs
Lookback is a user experience recording code library and review site. This allows us to see where a user has tapped, to allow us to gain valuable insight into user journeys & preferences. This approach to user testing allows us to rapidly learn and adapt to user behaviour.

Testing it in the wild
Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript.

The ability to combine the three allows us to deploy interactive prototypes as native mobile applications, as well as to record user journeys and feedback during user testing.

This article outlines how to do just that. It also assumes use of Mac OS X, some knowledge of Node Package Manager (npm) and Xcode for deploying iOS applications.

Once you, or a friendly UX designer has built a prototype in proto.io, use the “Export to HTML” option to export a HTML version of the prototype, as per http://docs.proto.io/documentation/export-prototype-to-html/.

proto io

Make sure your prototype is setup for your target device, otherwise it won’t display correctly in-app. We’re targeting the iPhone 6 here.

Proto io 2

 

 

 

 

 

 

 
For the next section, you will need to be running on a Mac and have Node.js (https://nodejs.org/) installed.

Install Cordova:

npm install -g cordova

Create a new project:

cordova create folder-name com.identifier.my “Project Name”

Change directory into the newly created project, and add the iOS platform:

cordova platform add ios

Remove the contents of your www folder and replace it with the contents of your proto.io export. Keep a copy of the old index.html page for reference.

proto io

 

add the Lookback plugin

cordova plugin add https://github.com/lookback/cordova-lookback

Now your project is setup, log into lookback, and find your SDK token, by tapping the cog next to your organisation.

proto io

In order for the plugin to send data to your account we need to setup the plugin with your device token. Add a new javascript file with the following content and reference it from your index.html page.

(function(){
   document.addEventListener('deviceready', onDeviceReady, false);

   function onDeviceReady(){

      window.Lookback.setupWithAppToken('your-device-token');
      window.Lookback.shakeToRecord(true);
   }

})();

Also add a reference to cordova.js – this will get created when the project is built.

<script type="text/javascript" src="./scripts/lookback.js"></script>
<script type="text/javascript" src="cordova.js"></script>

Replace the meta information in the proto.io index.html page with the content from the default index.html page:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width">

Finally update your config.xml file at the root of the project, adding:

<preference name="DisallowOverscroll" value="true" />

This will stop the app from scrolling beyond the top of bottom of the screen, like a regular webpage would.

We’re ready to build! run:

cordova prepare ios

To copy the new assets into the iOS project, open the Xcode project in the platforms/ios folder and run the project.

Additional Steps

You might want to turn off the iOS status bar, if your design features a static one. You can do this by updating the following properties in your .plist file:

  • “Status bar is initially hidden” : “YES”
  • “View controller-based status bar appearance” : “NO”

Finally, you’ll want to add in custom icons and splash screens. You can find the existing ones in platforms/ios/Project Name/Resources. Simply replace these with your custom versions of the same sizes. As discussed in previous blog posts about prototyping, companies should always start with a prototype. Some of the benefits of prototyping include:

  • Identifying usability issues — it’s much easier to identify issues at this stage than later down the line, once the app has gone into development. Prototyping helps to refine ideas and test it with users.
  • Test app ideas — too much money and time has been wasted by companies to create apps that fail to deliver enough value. Prototyping helps to test whether apps will deliver value to end users.
  • Build confidence in mobile — a prototype is the easiest way to bring an idea to life. People like to hold and experience concepts, winning support for mobile can be a challenge. Handing stakeholders a prototype is the easiest way to show them what you are trying to achieve and build confidence in mobile.
  • Rapidly iterate — with prototyping, it’s much easier to see what functionality is required.

With apps, even once they are developed, it’s important that companies remember that they require regular updates. Apps are meant to improve over time, based on the way in which people use them. Every year, new updates will come to mobile operating systems, meaning that companies can utilise new software or hardware features that can deliver further improvements. Analytics and reviews of how apps are performing and feedback from users is key to helping companies make the most out of their investment. One of the benefits of creating bespoke apps, rather than using off the shelf apps is that you can control the updates and the functionality, rather than relying on third parties for this.

By Ryan French, Mubaloo’s head of web

If you would like more information please get in touch alternatively:

Contact Mubaloo by phone +44 (0)203 327 8333 or email

  • Deloitte Tech Fast 50 winner 2014
  • Appsters winner for best use of API 2014
  • Ranked as the top app developer outside of the US by research firm Clutch
  • UXUK Winner 2014
  • footer-TRW
  • Mubaloo innovation lab
  • footer-Mubaloo

Company registration number: 0‌6770774.

Registered address: Mubaloo, 3 Grosvenor Gardens, London, SW1W 0BD