Where do you start?
The App Store currently boasts 500,000 approved apps, there are almost 86,000 developers and almost 40% of iPhone apps are free. It’s already saturated with hundreds of redundant apps struggling for the lime light. Do your research – is there a gap? Who is doing what? Capitalise – have they missed anything? What are they doing wrong? Structure a plan of action and find a niché that your app will fit into.
What you need as a starting point is ideas… and plenty of them! We’d recommend sketching your ideas on paper and finalise a direction way before creating any artwork or even touching a computer.
Depending on the size and breadth of your application, you might benefit from hiring or delegating some of the workload to a team of creatives. Creating an app is relatively easy without prior XCode knowledge. There are huge resources of information and quick start guides out there to help you on your way. For all the freelancers out there thinking about designing and developing your own from scratch, don’t be put off, it is daunting and often extremely demanding on your own personal time but the rewards are great if you get it right.
Where we started…
Our client Mookie is a long established global sports & outdoor toy company and distributor. Milton Bayer were asked to produce an iPhone app to support the launch and promote awareness of their exclusive Swingball Pro toy.
The first thing we needed to do was to round up some of the Milton Bayer troops, this included an Account Handler, the Head of Digital, a Digital Designer (That’ll be me, hello!), a Motion Designer and an App Developer. It’s really about sitting down and fleshing ideas out, bouncing anything and everything that you can possibly think of (regardless of relevancy) across the room and whittling that down to constructive input. We’re lucky in that we have an isolated room at the rear of the building filled with bean bags to do all this in; without a quiet place it’s sometimes hard to think when you’re sitting in the middle of a busy studio!
So we came up with a lot of crazy ideas and culled them down to maybe 3 or 4 we deemed could work. We set about drafting up some of the ideas (normally these would be on mount boards), they often allow scope for plenty of additions later in the creative process.
In an ideal world, your client would look at your concepts and say “Concept three please, we love it!”, fortunately in our case they replied by saying “We love it! All of them please!” – We were only too pleased to do so. We also loved all the ideas and some how it made sense to join some of them all into one awesome app.
I think once you truly understand what usability is/means, then you can start thinking about how your users are going to engage with your application. We knew this was a game, we knew it served as a basis for promotion/awareness and we knew the interface had to be easy to use and intuitive.
Setting up the user path there was six main screens:
- Loading Screen
- Splash Screen
- Gameplay Screen
- Bonus Rounds
- High Scores
- How to Play
This quickly began mounting when you look at paths because for every road block (I hate the term ‘road block’ but it’s actually a term that serves its purpose) you need a bridge – this is to help users understand why and what action(s) are needed in order to proceed. So in the end, we had about 16 screens including dialogue boxes and other interim graphics like visual prompts etc.
The GUI needed to be clear and uncluttered, as we’re catering for a wide spectrum here so it really needed to be transparent. Creating a usable application is almost like telling someone which way a door will open. For example, a door I recently came across had a wide horizontal bar giving the impression I needed to pull to enter. What was confusing (and I watched others do the same), is that I pushed instead of pulled the door. The reason for this was because the door also has a vertical metal plate, giving the users the impression the door swung both ways. My point is it only takes something small to confuse people, it’s simplicity that makes objects usable, so don’t over complicate things if you don’t have to.
By the way, UI stencils produce a great set of tools for drafting concepts – Take a look. I digress…
We started drafting the initial game screen concepts in portrait but later decided against this due to the fact that the Swingball and tether would bleed off screen and make it extremely difficult to hit once it had entered back into view. At this point I’d like to make a point of stressing how visuals can sometimes distract designers from thinking about logical and functional design. It’s nice adding all the fluffy design elements that are on-trend but you risk losing users to confusion as I covered with my ‘door’ example.
Proceeding with the remaining visuals was relatively easy, we knew we wanted to keep the conventional iOS styling and gestures intact. The idea was to offer users a seamless experience and we did that by placing the iOS-like navigation to the bottom and labelling the screens with added in icons to suit. This allowed the user to tab through the menu and easily find the appropriate information.
It was important that the user’s experience was as near to the real game of Swingball as possible. What we didn’t want was a game that didn’t reflect the product mechanics. The only exception being that in the real game, the idea is to beat your opponent by getting the to the top of the spiral first. By giving the user a time limit meant we could control the experience and make the user engage with the game and work harder for milestone rewards.
To create a sense of competition the opponent (Swingball Sam) would be hitting the ball back to the users ‘inclusion zone’, therefore he needed to be positioned to the point of where he’s able to hit the ball back from almost any angle. We did this by generating 3/4 separate animations to be used on loop.
The graphic user interface (GUI, sometimes pronounced gooey) consisted of the following:
- Start counter
- Hit counter
- Level indicator
- Timer (30 seconds/20 for bonus rounds)
- Bonus round indicator
- Pause button w/ quit and continue options (Using standard iOS dialogue boxes)
The feature that really excited us was the ability to superimpose a users image into a 3D sphere (ball). Taking inspiration of the functionality from the ‘Fat Booth’ app, we wanted users to import or take a photo of their friend and resize (using the iOS gesture, finger pinch) the photo to align their face to the guide.
The criteria for unlocking the bonus levels are as follows:
We tested the app on numerous devices to ensure a full compatibility and submitted the first build to the App Store. Within 9 days the app had been approved and ready for download. To date, the app has had on average 60 downloads p/d and continues to increase.
For more information or to download the app for free, go here: Swingball Pro for iPhone, iPod touch, and iPad on the iTunes App Store
Visit the official Swingball website