Sunday, December 03, 2017

A New Watch App

[UPDATE: You can pre-order/download Skip and Save here -]

I upgraded from my 3 year old Series 0 Apple Watch to the new Series 3 with LTE and I love it. Having worn the original Watch for the last 3 years I've noticed huge improvements in speed and accuracy (especially Siri) with the new model. The heart rate sensor has improved, the battery life is amazing even when it gets a hammering from workouts and phone calls.

Anyway, I was so smitten I had to make something for it.

As I've mentioned before I'm developing all my games in Unity from now on. It makes sense as a) I can go multi-platform, b) there is so much more support/tutorials/help available for Unity and c) it makes 3D development so much easier.

But an app is different to a game, so I feel I'm technically not breaking my promise to myself to focus on Unity for game development :-)

So what is this app? It's called Skip and Save and comes out of my habit of giving up the occasional treat and making a mental note that I just saved money in order to buy something else at a later date. I know, it's a dodgy way of budgeting, but it works for me.

I figured this would be a good process to make into an app and it seemed perfect for the Watch where the ideal apps are very limited interactions that take no more than a few seconds.

Building the Watch App
The Watch app development environment in Xcode is really nice. And laying out an app is super easy - so much easier than laying out an iPhone app as I would later discover.

You know have the ability to mix SpriteKit and SceneKit with regular screens. I used this to add ticker tape particle effects when you successfully skip and save money, and cool firework effects when you reach your goal.

I wanted to use as much of the Watch as I could, so I added in Siri voice recognition, Scribble support and support for all the different complications that the Watch has. I also made sure that the Watch could communicate back and forth with the iPhone version.

An early Watch build with a bar to show progress,

An updated version with a ring to show progress.

The first version of the app used force touch to access the options to setup your savings targets and to reset progress or undo a skip. From my own experience with other Watch apps I found this to be very unintuitive and often hid away key features. So I tried having a paged app that the user could swipe to  other pages to see more commands. This didn't feel good in practice either.

The final look of the Watch app. A single screen.

I settled on having a single screen app with buttons on screen to show more options to set targets, undo skips and reset progress and another information button to quickly see your targets.

I also tried out a number of images for the buttons and settled on a mixture of my own designs and those from the Font Awesome 5 set.

Building the iPhone App
As much as I love my Watch, the reality is the market for Watch only apps is still fairly small, so I needed to make an iPhone companion app. So I began the fun task of using Xcode and interface builder to create the app.

Storyboards for Watch apps are awesome. The way stack panels work is great, and you can overlay controls and even add a SpriteKit/SceneKit scene under a view - which lets you create some great layouts that can do awesome stuff in a simple and intuitive way.

The iPhone version is a little more complicated. I couldn't mix SpriteKit and standard views so had to rely on Core Animation to create the effects I had previously done in SpriteKit. So the knowledge I had from making games sadly couldn't be applied which meant I spent time having to learn new systems.

I also found creating responsive views a lot more complicated than in WatchKit and struggled with simple things like making my stack view contents remain at a fixed size. I'd end up with a mess of constraints that I would have to delete and start over again. Luckily released a Udemy version of their training videos which included sections covering the very stuff I was struggling with - like stack views and how to use keyboards with scroll views.

One thing I did do with the iPhone app was to use vector images instead of pngs. They worked out really well, so I went back and updated the Watch to use vectors as well.

The original iPhone app had a light design.
Original iPhone design

I asked for some feedback on social media and got some great advice. Brent Helsop, a local developer gave me some great feedback and so the final version changed to better match the visual style of the Watch version.

Final look iPhone version

Time Spent
I worked on the app part time - spending up to 2 hours on any given day on it. I had a fully working version on my Watch within 8 days.

All up it took me 34 days of part time development to build the app - 10 days for the Watch (2 of that learning how to make complications), 22 for the iPhone and 2 days for iTunes Connect setup, screen shots and asset creation.

Launching It
The next stage of the story is how do I market it and what do I charge for it?

I've devoured the complete series of Under the Radar podcasts for some ideas as well as read lots of articles from other app developers. Being a game developer I have very little idea of how the app world works and these resources have been invaluable.

I've decided to price the app as free with banner ads from AdMob. I did try out interstitial ads (which I know do way better than banners) but it just felt wrong. They work well in games, but in my app they were too intrusive. My thinking on going free is that the people who want to give up something to save money are probably not the sort of people to shell out real money on an app that they've never heard of before. So being free gives them a chance to give it a shot.

With the app done and price set to free I have to reach out to the folks who would love to use my app. That starts now as I wait for the app to launch early in January 2018.

The good news is I can get back to making games in Unity while I do my app marketing.

I'll let you all know when Skip and Save is live in the new year!