Getting To Know You
Kimono is a discreet dating app that allows users to like people straight from their phone’s address book. The distinct difference from other online options is that the person at the other end doesn’t know you’ve done so, unless they just happen to return the favour.
Although being our first attempt at a bespoke app, the Kimono team confidently allowed us the freedom to develop the project from the idea stage all the way to its production-ready rollout on iOS and Android. So as we were getting to know the client’s needs and expectations (always important in order to exceed them later), we were also getting to know the ins and outs of app development.
Closing The Gap
We decided to use Phonegap to create the Kimono app because of its ease of use and its integration of HTML5, JavaScript and CSS in the development of apps. PhoneGap also had specific advantages to us in the case of the Kimono build, including:
1. We were going to release the app over a few devices and this allowed us to quickly build an app that would work across multiple devices without the need of entirely re-coding the app
2. As this was our first app and having a high skill set in HTML, JavaScript and CSS we believed we could get the app working quickly and without any major issues.
Another advantage of using PhoneGap was the contacts plugin. This gave us everything we needed in order to develop our contacts list.
As always though, not everything was straightforward. We had a couple of issues with the plugin when it came to accessing the iOS contacts. We found that the more contacts there were with photos, the longer the app would take to load as it accessed the list. We were able to resolve this by altering the Objective C plugin to allow it to cache the images and load them at a lower resolution. This made the loading speed of the app up to five times faster in some cases.
Socially Acceptable
We started looking at integration and compatibility with the social networks. This provided us with known user details that could then be matched to a mobile number. We chose Facebook and Twitter as the two best known examples, as well as being platforms that suited our operational and information requirements.
Do I Know You?
An important part of the security aspects of the app was implementing a way of verifying a user’s phone number. This was achieved with a simple node.js REST api and using the Nexmo SMS service, enabling us to generate a unique code for the app to be sent out to each user.
Hey, Good Looking
Building on the success we had with the concepts, we began to focus on the look and layout of the app. One of the first steps was to flow out the design and create each of the pages and views we’d need in a wireframe. This in turn made it easier for us to decide what calls to action were needed and where they would be best placed. For ease of use, we designed a minimal but effective UI that helped keep things clear and simple for users.
Designs based on the wireframes were then used to produce a set of images that would show the finished layout and design of the app. We could then build on each of these concept pages towards the final product.
Hotting Things Up
Having used PhoneGap as a platform to create a fully functional app, we decided to use Ember.js to power it. Ember advertises itself as a JavaScript framework to create ambitious web applications with. We knew that it would allow us to quickly set up the internals and provide all the support needed for the main UI, as well as the various modules needed to make it function properly.
But Ember.js wasn’t without its problems. The data model didn’t really work and the persistence layer needed a serious overhaul in order to accommodate the multiple adaptors we needed, such as REST, localStorage and a custom data adapter to manage the phone’s contacts. The way Ember handles controllers in order to display large lists and tables also gave us issues. Although the arrayController worked fine on laptop and desktop PC’s, on mobile devices it was taking a considerable amount of time to render the page.
We were able to solve the issue by breaking down the array into blocks, which allowed us to render small portions of the list at a time as it appeared to a user on the page. The result was a much more responsive page that loaded almost instantly. By dynamically adding the rest of the contacts, the page still loaded quickly but could also render a large list as required.
Dates or Data?
We utilised Grunt, a JavaScript taskrunner, to compile our ember templates and JavaScript into one minimised file used to execute the app. We also used SASS to create its CSS styling, before going back to Grunt again to compile a minimised version of the code.
Without a server to log and communicate data to each use the app was useless. We decided to use node.js and the great Restify module to provide a simple REST-like api to handle most of the functionality. The server in turn uses MongoDB as a database store for the app.
Testing the Relationship
The testing of the app was one of the most important parts of our process. We used both simulators and physical devices to make sure it behaved as it was meant to. We found that the iOS versions dramatically affected the layouts and a significant amount of time went into working around and rectifying the issues to get it operating over multiple OS translations.
We also had beta testers who reviewed the app and logged any issues they encountered.
We Got Lucky On The First Date
We released the app ahead of schedule in November 2015. Having incorporated a responsive design and custom processes and internals, we were very pleased and surprised to find that our very first app review was accepted into the iOS store without a question.
Maybe We Should See Other People
A few weeks after the release of the iOS version, we started looking at Android. We applied the same testing process as before, which highlighted new design and layout issues that didn’t work well on the platform. With a few tweaks to the code, we were able to get the app looking similar on both versions without major changes to the UI.
We are really pleased with Kimono as our first app. We’d love you to take a look and let us know what you think.
