Posts written by Matt Mayer

A better way to ask “how much would it cost to develop this app?”

As an app developer, a question you are very used to hearing is "how much does it cost to make an app". It's also a question you quickly learn to dread. Why? Because providing an accurate fixed price for designing and developing a mobile app is next-to-impossible. Worse, comparing fixed-price quotes from different companies is misleading. In this article I'll explain some of the reasons why, and some better ways of pricing and organizing app development that we've found.

price-tag

There are too many unknowns

How much an app costs depends on a large number of factors, many of which are unknown at the start of the project. We can try to minimize these unknown factors. We will always clarify which platforms and OSes it makes sense to support, what screen sizes, what features are essential and what are "nice-to-have". It's much harder to figure out how many iterations it will take to make a game fun, or to make a logic screen intuitive to use, or how long a vague feature like "add sharing" will take. Developers have to add in extra "padding" to cope with unexpected additions that occur as a normal part of development.

Changing your mind should be expected

When making an app, changing your mind is good. Iterating on an idea as it undergoes design and development leads to a far better outcome. But if the scope has already been precisely defined in the contract, this may not be possible. As of 2014, the app industry is rapidly changing. A business model which worked six months ago may not fit user's needs or market trends any more. To keep ahead of the game, you need to be willing to change things, and to pivot on your original vision.

All developers are not alike.

A popular metaphor is to compare asking how much it costs to make an app with how much it costs to make a car. A car could be very cheap, if it is simple, mass-produced and uses low-quality components. Or it could be complex, hand-crafted, unique and incredibly expensive.

If you give the same request to multiple developers and get very different pricing, what does that really mean? Why is this developer so much cheaper? Are they low-quality? Why is this developer so expensive? Did they misunderstand the scope of the project? As a client, how can you be expected to tell?

Apps are never "done"

The car metaphor has another problem. Because if you're building a car, you generally reach a point where the car is "finished". With apps, it's not so simple. It's important to get real users using your app as early as possible. So you typically want to do a "minimal viable product" release as soon as you can, and development work should not stop when you reach your v1 release.

As soon as people get their hands on your app, you'll get user feedback you want to incorporate into your app. There's always new features to add that didn't make it into the first version. You might even need to "pivot" how the app works, or change the business model from paid to freemium.

Even if it's not visible to the end-user, you may need to add analytics, email reports or dashboards to keep track of how people are using the app. The app needs to be marketed, perhaps ported to another platform. If you burnt all your budget developing v1, you are in trouble!

Fixed price projects: riskier than they appear

So, to summarize, the disadvantages with fixed-price contracts include:

  • • It's hard to know in advance how much work an app will take
  • • Developers often "pad" their quotations to account for unknown issues
  • • Different developers will have different standards, so comparing quotes is hard
  • • It's difficult to add in extra functionality, reorder or change functionality once the contract is signed
  • • It suggests that there is a cut-off date where the project is "done", which is not realistic or recommended for most apps

Going agile

At ReignDesign, we've recently started taking a more "agile" approach to estimating projects. Agile Development started in the software world, where it describes a way of planning software development projects which embraces the frequent changes that occur, rather than fighting them.

A backlog of features

The "user stories" to be performed are arranged in a backlog, which the product owner or client helps to reorder into a priority list. When new stories (things you want the app to do) are added, they are simply slotted into the backlog in the appropriate place. The developers then work down the list in order, in a series of typically 2-week long "sprints" they commit to completing the items on the backlog.

Applying agile to project planning

It turns out what works well for development can also work well for pricing of a project. Once we move away from a fixed-price model, the question is not "how much would it cost to develop this app", but "how much can I commit to developing this app, per month". When we move to a "agile retainer" style model of project pricing, the typical issues of project planning are turned on their head.

First we recommend a monthly budget to the client, based on their needs, the complexity of the project, and approximate dates for releases. We ensure the budget is sustainable, to make sure the client can afford to keep working on the app for at least several months after launch.

We then calculate how much work the developers and designers will do each month for that budget. This will allow us to estimate delivery dates for different stories, but these are advisory only. If it turns out we complete tasks faster than expected (in agile-speak, our "velocity" increases), we may be able to deliver features earlier. If the client requests certain extra features be added urgently, other items will get pushed down the backlog and delivered later.

Overall, an agile approach allows the client and the app developer to work in a way where their goals are aligned, and much better reflects the actual effort involved in creating and sustaining an amazing product on the App Store.

But, does it work in practice?

That's the theory: but does it actually work in practice? I asked two of our recent clients their thoughts on the agile retainer method.

We've been working with KindyNow for the last six months. KindyNow is a mobile app for childcare centres in Australia.

Parents who use the app can notify their daycare centre of last minute cancellations, immediately triggering an opening for other parents wishing to book the same space. We built the first version of the app on a fixed-price model but then switched to a retainer, which has allowed us to develop features in a faster and more flexible manner.

Here's Sean Collins, CEO of KindyNow: "Technology developments evolve at a greater rate than you will anticipate. Having a fixed fee each month allows us to prioritize and manage the work flow coming in. We can focus our attention on the right projects each month without being hit with constant quotes for specific jobs. The fact is by the time the first version is built you’ll have so many new ideas that your fee structure needs to allow for this constant evolution."

We've also been working with Peter Stoyles of Tasklinks, building a new version of their productivity tool from the ground up.

2014-04_Tasklinks_Projects_v02_0000_project-overview

We discussed several methods of collaboration with Tasklinks, and decided that an agile retainer was the most effective way of building this app.

Peter: "Initially we were focused on getting a set price for the scope of work required, as the customer you feel safer that costs won't spiral and you have some budget security. The agile retainer model flies in the face of this conventional thinking but there are clear benefits. The first benefit is the retainer gives you a clear project outline, you can see the work in progress and are constantly in contact with the development it is no longer a remote process. The second benefit is as the app develops you can change the build feature priorities. This gives you more control over the development and can allow you to adapt quickly to market changes and user feedback.

To our surprise and to the credit of ReignDesign the development process has actually been ahead of schedule and we are now in a position to develop and include more features ahead of our target release date. It is very important that you work with good developers such as ReignDesign who have a good understanding of your expectations and can guide you through the development process, with that in mind I would recommend the agile retainer."

ReignDesign attending GMIC Beijing 2014

gmic Matt is attending GMIC Beijing 2014 today and tomorrow, and guest-blogging for the GMIC Blog! GMIC is the major mobile internet conference in China, and this year's theme is "mobilising the next 5 billion".

You can read updates from the event on the GMIC blog or follow ReignDesign on Twitter for live updates and photos.

Making your own Shanghai street sign

At my recent engagement party we had designed some personalised Shanghai street signs! A lot of people asked me how to make one, so I thought I'd provide a tutorial.

2014-04-26 21.26.47

If you're not familiar with Shanghai street signs, this is how modern signs look! You'll still find older green signs around Shanghai, but all signs in central Shanghai use the new format.

hong

My first step was to recreate the shapes, colors and fonts in Illustrator. If you don't have Illustrator you can download a 30 day trial version from Adobe as part of Creative Cloud.

You can download my completed Illustrator AI file here.

For fonts I'm using 黑体-简 for the Chinese text and Helvetica for the English text. You can substitute similar fonts if you don't have those on your computer.

Screenshot 2014-05-01 17.29.14

It's best to convert text to outlines before sending to a printer - you can do that in Type > Create Outlines.

Next, I contacted a printer: I can recommend PicJoy in Shanghai - you can email them on print at picjoy.com. For 2 copies on A2 sized foam board, 1 side printing, matt lamination, they quoted me just 50 RMB.

In 1-3 days you should receive your street signs! You can easily cut them out of the board using an Exacta knife and a ruler.

If you make your own Shanghai street sign, do send us a picture!

Building a WeChat (Weixin) robot

Matt presented a talk on Building a WeChat robot at Barcamp Shanghai Spring 2014! Here's a recap of the talk, as well as a link to download the source code of the robot.

If you'd like to skip the technical jargon and just play with the real bot, scan this QR code in WeChat and send our bot a message, or just search for "ReignDesign"!

Weixin Bot.006

Now, robots are cool, but building a real robot requires lots of hardware knowledge.

Weixin Bot.004

And one common topic you'll notice in today's talk is that I am quite lazy.

Weixin Bot.003

So when I say "robot" I'm talking about a robot you can build with software: a chatterbot. Send a message to a WeChat account, and get a message back.

Why WeChat? WeChat is ubiqituous in China, and so it's a great way of getting your service in front of as many people as possible, without them having to download another app.

Weixin Bot.005

Now you or I have personal WeChat accounts, but if we want to build a bot we need an official account. There are two types of these, Subscription Accounts and Service Accounts.

Weixin Bot.007

Subcription Accounts are best for marketing purposes. You have the ability to send up to 5 "broadcasts" each month to all your followers - perhaps if you are a restaurant, you want to announce some new specials. The downside of subscription accounts is they are hidden away in the WeChat interface inside the Subscription Accounts section.

Service Accounts are listed in the main WeChat friends list. You're only allowed to send one broadcast a month. But, any time someone sends you a message, you can reply to them immediately, and also send them messages for up to 48 hours. So, if you're trying to do customer service via WeChat, or build a bot, a Service Account is a great choice.

Here's the signup form for a WeChat official account (currently Chinese only).

Weixin Bot.008

You'll need to provide some basic information like name, email address, and which type of account you want. The two pieces of information that may require some effort are the 营业执照 (Company License) and 组织机构代码证 (Organization number). Right now you'll need to have a Chinese company license to apply for a WeChat official account.

After submitting all your data, be prepared to wait. It will take about 3 business days for your app to get approved.

Weixin Bot.009

One you're finally approved, you have access to the WeChat API. This comes in two flavours: basic API and advanced API. The basic API provides all that we need to build a basic chatterbot!

Weixin Bot.010

In the Developers section, you now need to provide a URL and Token. At the URL provided you now need to provide a simple web server. This will listen for requests from the WeChat server. So, for example every time someone sends you a message, you receive an HTTP request with the details of their message.

Weixin Bot.012

For our backend server we used a simple stack running on Heroku, with Node.js and Express, but you could use any language and framework, like Ruby on Rails, or PHP.

Weixin Bot.013

When you first register an application with WeChat they will send you an authorization request to your URL. This includes the token you provided earlier, plus various other OAuth credentials, and an parameter called "echo_str", which you should return if everything checks out OK.

As mentioned previously, I'm quite lazy, so to avoid having to figure out the authentication issues, I simply return the echo_str for ALL requests. This should not be recommended in a production application.

Weixin Bot.016

Now, each time you receive a message to your account, you'll get an HTTP request. You may be hoping for a nice JSON payload.

Weixin Bot.017

Unfortunately Tencent decided to use XML, and not very well structured XML at that.

Weixin Bot.018

Here's what a typical incoming message looks like.

Weixin Bot.019

You get a FromUserName and ToUserName. These are actually encrypted so you don't have access to the user's real WeChat ID. There's also a timestamp, the type of message (in this case text, but it could also be image, video or voice) and the text content.

To parse this in Node.js, we install an npm package called express-xml-bodyparser and configure Express to use it.

Weixin Bot.020

Next we implement a method to handle the request. We parse the values out of the XML...

Weixin Bot.021

Then we construct some XML to send back as a response. Notice that we've switched the to username and from username, to ensure the message gets sent back to the recipient. The text of our reply is "Thanks for sending me a message saying (original message)".

Weixin Bot.022

How does this work? Like this!

Weixin Bot.023

Now this is great, but of course version 1 of our robot is pretty stupid. How can we imbue our bot with some more intelligence?

To solve this I turned to the work of Joseph Weizenbaum.

Weixin Bot.024

He was a brilliant German-American computer scientist based at MIT. In 1966 he wrote a program called ELIZA. ELIZA was one of the first programs which tried to interpret and respond to natural language inputs from users.

It did this via some basic pattern matching. ELIZA could be fed with different scripts of patterns, and the most famous of these, called "DOCTOR", imitated a psychiatrist.

Weixin Bot.026

Here's ELIZA in action. You can see that ELIZA picks out certain words in a statement, and is able to formulate a reply using the words.

Weixin Bot.025

Now you're just talking nonsense!
> What makes you believe now I am just talking nonsense?

Weizenburg was surprised to discover that despite the primitiveness of the logic, users became quickly emotionally involved with interacting with ELIZA.

ELIZA is a fascinating episode in computing history, and I was delighted to see that the ELIZA logic is available as a npm module. That means integrating it into my bot was very simple.

First, install the module

Weixin Bot.027

Then, replace the reply logic with a new function.

Weixin Bot.028

Here's the code for replying. We keep a dictionary of ElizaBot objects. That way we can give each unique user who messages us their own instance. That means the message "memory" can be kept distinct.

If this is a new user, we set up a new ElizaBot for them, and request an initial phrase like "Please tell me your problem".

Weixin Bot.029

If this is an existing user, we simply call eliza.transform to get a suitable response, based on the last line of input (and previous inputs).

Weixin Bot.030

Let's see how this works:

Weixin Bot.031

There seems to be great potential for using ELIZA for people who are interested in app development services in Shanghai ;)

Weixin Bot.032

Of course, while this is a fun example, there's lots of cool stuff you could make with WeChat robots. A robot could return weather or air quality data on demand. If a user sends you a picture, you could do image processing on that picture and send them back something really creative. The only limit is your imagination!

Weixin Bot.034

To try out the ReignDesign bot, scan this QR code!

qrcode_for_gh_5108e39bfd75_1280

To download the source code, check out the project on GitHub

Interested in finding out more about what's possible with WeChat, mobile apps, or other new technologies like iBeacon? Contact us!

Ten Things You Need to Know About iBeacon

You may have recently heard a lot of buzz about iBeacon and Bluetooth Low Energy. At ReignDesign, we're helping our clients make sense of this new technology, and how it can be used to making great location-aware mobile experiences.

iBeacon_Logo_RGB

Kirsten Osolind, President and COO of re:invention consulting, recently said  “Beacon technology will improve the way consumers use smart phones and transform numerous industries by solving the indoor geo-location challenge. It has great potential to facilitate better mobile payments thereby disrupting the whole credit card ecosystem because of its range.”

We're compiled 10 interesting facts that you need to know about iBeacons.

1. iBeacons are tiny

iBeacons are very small. To give you an idea, here's a Lego man holding an iBeacon in the ReignDesign office. This means it's easy to hide an iBeacon discreetly in a store or at an event.

2. iBeacons have very long battery life

iBeacon uses the "Bluetooth Low Energy" technology. Low energy means that a iBeacon can run off a single standard lithium battery for 1-2 years. You don't need to worry about an external power supply.

3. Most modern smartphones support detecting iBeacons

iOS devices including the iPhone 4S, 5, 5C and 5S, the iPad 3 and later, iPad Mini, all support iBeacons. iBeacon is Apple's brand name for this technology, but iBeacons work fine with Android devices too! Many Android devices running Android 4.3 or later detect iBeacons, including the Samsung Galaxy S3/S4/S4 Mini, Samsung Galaxy Note 2/3, HTC One, Nexus 4, 5 and 7.

4. You don't need an internet connection

iBeacons use Bluetooth. A device with Bluetooth switched on can detect iBeacons in range and pop up a notification or unlock content, even if there is no Internet connection. Of course, the content needs to be already included in the app. If there is Internet available, the app can do more advanced things, such as pulling live content from a website in response to detecting an iBeacon.

5. iBeacons work well indoors

Most smartphones use "assisted GPS" to determine a user's location. This uses a combination of the satellite GPS system, and local wifi and cellular tower signals to obtain a location. This isn't ideal: GPS only works outdoors, and wifi/cellular location is very rough. AGPS can tell you you are in a shopping mall, but not which store you are in. iBeacon is perfect for this scenario. Each iBeacon has a range of about 30m. For example, in a shopping mall, an iBeacon could be placed above the entrance to each store. A shopping mall app could then tell the user which store they are located nearby.

6. Big brands are already using iBeacons

Major League Baseball (MLB) is the major league professional baseball organization in the US. MLB first installed iBeacon technology at Petco Park and Dodger Stadium. By Opening Day of the 2014 season, 20 ballparks were equipped using iBeacon technology. Baseball fans can use the iBeacons with the app MLB.com At The Ballpark.

Westpac Banking Corporation is a major Australian bank. They're rolling out iBeacon technology in branches. iBeacon will be used to send customers alerts with special offers and other incentives on their device when they are in or near a branch.

Apple themselves are also finding ways to use to offer targeted information to passing users via app notifications or in-app content. Recently, Apple introduced physical iBeacons at its retail stores. Beacons are placed throughout the store and as a customer walks around, the beacons trigger messages to the customer’s iPhone. A customer can scan an item they want and pay for it from their phone using the Apple Store app; the app too uses beacon technology.

7. iBeacons need an app to work

An iBeacon simply broadcasts a number of identifiers. For example:

{ uuid = "74278BDA-B644-4520-8F0C-720EAF059935"; major = 65504; minor = 65505; }

Now if we want a user's device to do something interesting when this beacon is detected, like pop up a coupon for a store, or unlock a video, we need an app. If the user hasn't downloaded your app, they won't see your iBeacons. When the app is launched, it can register which beacons it is interested in, for example any beacons with uuid "74278BDA-B644-4520-8F0C-720EAF059935" could cause a notification to pop up.

8. When you get close to an iBeacon, you can pop open a notification, even if the app is not running

When a user with your app installs comes close to an iBeacon, your app is notified. What happens next depends if the user has your app open: If they don't have the app open, your app is launched in the background. You can still do certain tasks like popping up a local notification. unlock For example, imagine a restaurant installs iBeacons at the entrance to each store. Customers with the app installed can receive a notification when they arrive. In a more advanced scenario, the app could make a web request to check if there are any active promotions. Only if there is a promotion relevant to the current user would the app pop up a notification.

9. If your app is running, you can unlock content based on beacon location

If your app is running, you can not only detect the location of beacons, but even see how far away they are using "ranging". This opens up many exciting possibilities. For example, imagine guests at an auto show. Each car model has an iBeacon attached. When guests holding an iPhone or iPad approaches the car, a video in the app can automatically play.

ibeaconcar

10. Choose a partner who understands this technology.

iBeacons are a new technology, and it pays to choose the right partner. ReignDesign is already working with a number of brands and agencies in Shanghai and around the world in deploying iBeacon-enabled apps. We have iBeacons in our office right now, and we're happy to give you a demonstration of this exciting technology. Get in touch today!