Slides for talk on "I've got this idea for an app" given by Christopher Eddie in a workshop session at UKOLN's IWMW 2012 event held in the University of Edinburgh on 18-20 June 2012.
15. and then…
Who is the audience for the app?
What are their motives and goals?
What are the actions they’ll take in the app?
Why do they want to do it on their iPhone or iPad
and not just on a website?
Page 15
130. App wisdom
Think big but build small
The best apps give users elegant solutions
to precise needs
The best apps give users just enough to do
what they need
Skills and charisma set apps apart
Page 130
131. App(le) wisdom
Read the Apple app interface guidelines…
the iPhone sells well for a good reason, it is
intuitive…
you may think it'll be fun to reinvent the wheel
with a byzantine interface but realistically the
majority of app users won't
Page 131
132. But it’s not just the app
remember - marketing goes hand in hand with
feature development,
it could be the greatest app in the world but if
no one knows about it how will it sell?
Page 132
introduction so what is this talk going to be about? I decided early on that even though I like watching talks here which are full of grand ideas, speculation and presentations loaded with quirky images from Flickr with no text I often feel in retrospect that it was a lot of smoke and mirrors and not enough substance. So I ’ m going low-fi, back to basics, its going to be a step by step account, from idea to app store and then a few lessons learnt. So this covers a period from late 2010 through to around September 2011. so apps…
it came up in numerous team meetings and we were like magpies, ooh shiny app what do we have that could be an app?
the printed Guide had come out that summer, it was full of good stuff, it was selling for £4.99, perfect
initial ideas - wide eyed blue sky optimism, get top notch student to create an app CMS, money would be no object!! anything with Oxford on it will sell we’ll be millionaires!
so a web app? we have Mobile Oxford using a utility like Titanium, Appcelerator, PhoneGap, MoSync Toura but there is a problem, one size fits all usually means one size fits none, they all sort of work but none are splendid or use the device fully
design for one device or one size fits all solution? analytics for oxweb 75% apple – and I do realise that the Oxford audience is not the average tourist audience but its what we have to work with
the ace in the hole, a promise of help from Apple itunes U – eBooks – we’ll give you help, advice, technical help and an evangelist, then help with marketing so even if we pay someone peanuts, they’ll jump at the chance to have a direct line to Apple
why an app? speak to professionals, read some books, use apps I spoke to Neal Hoskins of Winged Chariot, recommended by Publishing Training Centre of particular note, time specific features and images in one of his books, focus on doing one thing well marketing and development go hand in hand
there is a heap of great content in this book, such as where buttons should be to be within thumb swiping range the magic 44 pixel rule and 44 pixel rhythm layout but most of all it was the 3 reasons why someone opens an app -
checking my bank balance, needing to add that book recommendation to my Amazon wish list right now, looking for a new house in RightMove and so on – there are loads of these Evernote, Wunderlist
seeing what’s on in the local cinemas, finding and paying for parking near by, getting to that Gamelan shop
let's be honest, anyone with a smartphone spends a great deal of time just entertaining themselves, whether it's zinging birds at pigs' hideouts, catching up on the latest in Zite or looking at lovely things in Fancy
Primarily “I’m local”. Oxford is one of the top tourist destinations in the UK, people used to come to see the University now they come to see where Harry Potter had his dinner. I found some encouraging figures on the Oxford Council website – about 9.5 million tourists each year spending approx £600 million It may also be used as a coffee table book for people interested in Oxford but that’s by the by is there an app for this already? How will yours be any better? yes there are some Oxford Guides, some very poor, some good like Cool Places Guides, but they are all general, there is no depth or insight
Answers: tourists and visitors they want to see the bits of the uni that interest them, or be told about bits that should interest them do a tour or just see what is near them and find out about it, they could create their own tour phone knows where they are
we can do pretty much everything in house (content, images, UX, design, testing, marketing) but we don’t have the programming skills, so… how much do we have to play with here? 5K
recommendations, Oxford Geeks, within the university – IT and Web managers – I was still hopeful of finding the genius student who would do everything for very little…
at this stage it is still wide eyed optimism: night and day images, thousands of images in a timeline, architectural drawings of historic buildings, tours, audio, video, film clips, augmented reality, geo-location tie to Gowalla, Foursquare etc, we already have a vast data set of geolocations called OxPoints 3D models of iconic buildings like Radcliffe Camera, and so on) have you seen The Elements?
I met with 7, 2 individuals, 3 small companies, 1 large company and 1 enterprise option, Toura, an online app CMS that exports multi platform apps - Toura were expensive and their apps were all the same, great for Art Gallery guides or collections, our own Bodleian use them, not so good for unique and customised apps my interviews with them were really helpful, I learnt something new from most of them – some of these guys just sent in lush artwork of PSD screens showing how the app would look, many went straight for the iPad,
this was just wishful thinking – we hadn’t even agreed a brief yet, being promised the earth even when they know there is a very small fixed budget for it just did not instill confidence
So why did I go with Simon Whitaker of Goo Software? He was experienced (worked at Amazon, worked with Torchbox, made the XX app), he was realistic and his sober assessment of my possible content did instill a level of confidence
see, sober, but he isn’t trying to schmooze and dazzle me
a visit to Apple HQ in London to discuss early ideas, what made them all sit up?
remember that most apps do one thing and do it well, so decide on the focus of this one and ditch the rest. Of course to me/us the rest is all the fun exciting bits, like the link to movie trailers, 3D spinning buildings, purchasing Oxford photosets and splitting the fees with our photographers, AR so we focused on just places within the university/Oxford, the user would get to them either through a tour, through a recommendation or just seeing what’s near them on a map, but they all lead to the same info but I did retain something beyond this for the homescreen, a what’s on today feature which could give the appearance of a ‘live’ app, it just pulls some info in from our website, more on this later focus only on what you/your company are good at, or at least have the content for
next stop: senior management. Does anyone have senior management who are ‘web people’? let along app people? elaborate Up until now the idea Apple, the developer and anyone I spoke to about the project liked most was the personal recommendations, a sort of ‘perfect day in Oxford’ list – explain the first thing out was anything not part of the University – the app had to be informative and educational.
what could I do? I had to comply so back to the brief to pare it down even further and only then could the brief be signed off, the budget given the final OK and real project could begin
this schedule was out of date about three days after I created it. What it was useful for was forcing me to write a list of all the tasks, the launch date on this was June 6 th , the reality was September how are you meant to know how long things will take when you’ve never done them before?
precedent studies
plenty of iphone layout pages, this one is from firstand20.com, and I’ve added a pixel grid in PSD
a fabulously useful set of iphone elements from teehan+lax, there is a retina display version which is absolutely vast the layer palette is insane
so I sat down at my kitchen table and began to scribble
reinvented the tumbler
note in the footer I was using different navigation options, just wrong wrong wrong
ditched the pen and moved on to pencil and the footer tab bar is now consistent
then a meeting with them and the evangelist in Oxford with Simon, they made a couple of interesting points and promised to give feedback on the all further design work
what is drop in feature in the Apple SDK, what is customisation, answer – almost everything is customisation can you afford it? can you polish up bog standard stuff?
have sit down meeting with developer to make sure that we are as clear as can be about what is required
I won the mid screen tabs idea
as a designer you probably think that you know your project inside out, if only… paper sketches are really helpful but still you do not draw every single screen, that’s where a step though can help, it forces you to
keep referring back to aps that you like and that you think work well, how do they do it? How can you simplify the content, what is the user journey? quite a few features here that never made it, 360 panoramas, fb and tweet feature, Random button
now tidier and clearer
gather content, approach uni staff and college heads – build in lots of time for this, make it easy for them, give them templates to fill in and provide an example of exactly what you want, be prepared to pester
right from the start set up a spreadsheet that lists everyone you’ve approached for content with a box for each type of content requested, fill it in as the content arrives, complete, pending, who to chase, when and so on,
right from the start set up a spreadsheet that lists everyone you’ve approached for content with a box for each type of content requested, fill it in as the content arrives, complete, pending, who to chase, when and so on,
right from the start set up a spreadsheet that lists everyone you’ve approached for content with a box for each type of content requested, fill it in as the content arrives, complete, pending, who to chase, when and so on,
tours, college dating
over the air, was 20 mb, now 50mb because of new iPad retina, our app came in at 18.2, the next version will 49. Could we afford to only have wifi downloads? For on the spot tourists, possibly not. Ideally we’d have a quick download then offer the option to download larger images etc over wifi when available, but this was development work that would have bust our budget
after the sit down meeting with Simon, he went off and created an online database (using Django) for me to populate, this was a master stroke, 2 or 3 times in the development we changed something, it was a 2 minute job for him but without the database it would have been days of work, bit like altering a CSS file
great for tracking content and progress
it was this sort of stuff that really confirmed the reasons for my choice of developer, it was so well thought out
how useful is this utility? developer sends invite, you register your device, you receive emails with the new build, you install it, ta dah
time to turn those pencil sketches and scans into real designs normal and retina display sizes, 2 sets of each graphic, how to make screens of long lists not look like screens of long lists normal is 480 x 320 retina is 960 x 640
remember that pencil design from a few slides back?, here is an early iteration, I was keen to use transparency so that the background was always visible, you can see the demo tab buttons in the footer too the titles are almost right – home, tours, we suggest, near me, more – but the icons are dummies, this also shows the pull down or tap functionality the homescreen is the dashboard, what is happening in Oxford today? date, weather, on this day, news, events, exhibitions, my favourites
here is the background to the app, both shown on this screen at 50% their actual size
on this day, we had the content on the website, I really wanted a tumbler, who doesn’t want to see what happened on their birthday? but again I was trying to cram too much stuff on one screen and it would require customising, the final version is simpler than this
Events, brought in via an XML feed from our website, the app lists them and allows a user to find out about the event, beyond that it switches over to our website in Safari. news, same deal, XML feed of the latest news story, show only the text content and first image, offer link to Safari if they want to see more. There was no point in bringing in all news and events and then having to deal with issues of searching, filtering, archiving the content, the website did all that, this feature was really just a nice extra to the app to make it appear to be live
theme tours, you begin to realise that in apps all you are really doing is navigating your way through a series of tables or list – note there is no option to find out about the tour itself, that was added later
We suggest – again those chevron tabs along the top, they had to go, what is missing from these screens is the person’s reason for choosing the place couple of designs for the layout of the people using transparency and a numbering system also the idea of tapping a small image to see a full screen one then swiping to advance, standard iPhone functionality
here’s a shot for all you Photoshop fans, check out the size of the image at 66.7% compared to the layers palette. And if you expanded the folders in the layer palette it would stretch for metres
here is an early working screen via testflight for a place, so not a PSD image, a real working app screen
seeing your design actually working on your phone is quite a thrill but it immediately points up what is working and what isn’t and it makes you see what sliced up individual elements are required
the first thing to change was the homescreen, this seemed like a much stronger layout, yet still retained the transparency idea
and here are the actual elements, normal display is 320 x 81 and 640 x 162 for the flash and xx for the retina normal for the item is 320 x 82 and 640 x 164 for the retina for the thumbnail images we’d pull in the news image then resize its shortest dimension to fit and centre it cropping off the extra, Events and Exhibitions we did a bit of a cheat, I made a collection of 16 classic Oxford shots and the app just picks two at random when it opens
then I could reuse the top line flash for the We suggests, I kept the idea of numbering the list items, personal preference
so here are those elements, each suggested sent in a portrait image and everything they recommend had to be a place which would then have a thumbnail version of its main image, I spent a lot of time in photoshop resizing, exporting, resizing again to crop a rectangle to a square and then adding each image into the online database
we gave tours a slightly different feel, a bit more ornate
here are the tour list items and finally for the events and exhibition lists we kept them very clean with just a hint of padding/3D
menu bars, icons, retina, transparency pngs
we toyed with using some of these but in the end we only used their MostViewed for We suggest and More dots, the others I made
again you need to make 2 sets, normal and retina @2x
be aware of what fonts are available to you, precious few
XML feeds from TBX to Goo – we had live weather from a BBC feed, it is displayed either in centigrade or fahrenheit depending on the user’s preferences on their device, the date from the device, on this day from a collection of these in an XML file, the news, today’s events and exhibitions, and there have to be messages for when something does not work, ie There are no events today and spinning wheels for loading, usually over 3G, and what if you can’t connect to anything, you need a no weather icon SPLASH
all apps take a bit of time to load, splash screens a pretty naff, the clever ones like the weather app which comes with the iphone is actually just a graphic which gives the appearance of the app loading up, so we copied that idea
weather, wikimedia images from Kubicle under a CC license, the background swirls were created with free and credited photoshop brushes from Susan Libertiny –
suddenly there is a lot of content in the app, does it all display correctly, when you go to a place is there an image, are all the places appearing on the map, and in the correct location
again I was using Excel for tracking, this one was to make sure that every place had an image
my iphone syncs with my home PC (we’re all Mac in the office) so each night after testing I’d need to delve into the crash reports, zip up all today’s reports and send them off to Simon to pick through and solve
you need to show hidden files
developer account, app store account, signatures, contracts tax and banking, itunes connect do not underestimate how long this takes – I needed to sit with our Head of Legal Services while he spoke to Apple, had to enlist the help of someone from our tax office, had to get my Director’s sign off that I was allowed to OK documents from Apple on behalf of the uni and so on, it took weeks
ex editor of the Gazette read through it all while I went on holiday, he produced a 43 page document, that was fun to correct
test, include group testers who have not seen app before
there will be sections that you’ve just put on the back burner while you concentrated on the fun stuff (well it seemed fun until you got waist deep in it) the more section ended up housing content from the printed guide. Remember that? it was supposed to be the main content of this app, now reduced to an after thought and add on. We reused a list graphic, and then the pages were just straight forward HTML files each with an image on top about one third screen size same for Oxford links, About the app and contact us – example above
small tweaks and checking
on the map icon, the gradient inner circle did not work, the favourite icon was a bit grainy, instead of having all the tabs span the width, we shortened them it looks nicer on the maps we colour coded what the places were, red colleges, green collections museums and purple for other, and coloured all the title bars to be Oxford Blue
read through what you need to supply to upload it, Simon was going to upload the binary file but I was doing all the text, keywording, category and graphics,
Apple provide guidelines, read them carefully and make sure that your icon looks good at all the sizes it is going to be displayed in
the icon for the app needs to be 512 x 512 for itunes artwork, but it can also appear as small as 29 x 29 – where? when you do a search in your non-retina display iPhone
and remember that your icon will have the mandatory Steve Jobs rounded corners, so try it out yourself to make sure it all looks fine. Some icons on your phone have a glossy sheen to them, this is option when you upload the icon graphic
here is some promo artwork that I made for the website. If anyone can spot the mistake I’ll buy them a drink after this, the screen shots were taken before the proof reading
you also need to upload a set of screenshots for your listing in the App Store, you get 5 slots and it is worth just uploading the @2x ones
what’s it worth, Apple say people pay for quality, I’m not so sure, I don’t
luckily featured in New and Noteworthy and in the Travel section
and here is how it appeared on iPhone
promo codes, using App Store, AppsWild is quite useful, AppAnnie etc.
if you are picking categories, I can recommend the Travel section over – say – Games. We were the 8 th Top Paid app for a while with sales of about 100 a week
itunes connect, connect app, paid one month in arrears sort of – paid into University bank account
Rewind 2011 – did it help sales?
from Wikipedia I worked out that there were somewhere around 150,000 apps submitted to App Store in 2011, Rewind picked out just over 100, that put us in the top 0.15% - curiously Apple didn’t even email to let us know we were in there, a friend told me
handing out postcards, dropping the price, trying to interest the press, guidebooks
dropping the price and handing out postcards to iphone users at the Freshers’ Fayre in October – a screen shot from iPad iTunes Connect
it does well in search – Oxford Guide, as you’d expect
Oxford – still top
University – OUCH, beaten by Cambridge but then we are both beaten by Manga
Apple don’t know the answer to everything and a promise of help is not necessarily a guarantee I thought I had all the content in the printed guide, we ended up using only a few pages, most of the content was brand new Make a free lite version, you need the coverage then do the selling even with a “quality” product and a built in audience, people just won’t pay much for apps you’ll be compared to ‘similar” apps that are nothing like yours get the first reviews spots
get the first reviews spots
version 2 – added more images, more recommendations, added panoramas, should be out NOW luckily apps can now be 50MB downloads because of new iPad retina display
yes but undergrad prospectus realistically, this is just too expensive to maintain, in terms of priorities, we are focusing on a responsive website