I've got this idea for an app


Published on

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.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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
  • postcard, bit.ly, fb, twitter, Tourist Office, Preservation Trust, tried guidebooks, ox.ac.uk/apps
  • 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
  • questions?
  • questions?
  • I've got this idea for an app

    1. 1. IWMW 2012I’ve got this ideafor an appChristopher EddiePublic Affairs Directorate18 June 201214 September 2010 Page 1
    2. 2. let’s start at the beginning Page 2
    3. 3. Page 3
    4. 4. wide-eyed, blue sky optimism Page 4
    5. 5. design a one size fits all or for specific devices? Page 5
    6. 6. Page 6
    7. 7. we have an ace in the hole Page 7
    8. 8. what do I know about apps? Page 8
    9. 9. this is a good book on the subject Page 9
    10. 10. here’s the most important thing I read in Tapworthy Page 10
    11. 11. I’m microtasking Page 11
    12. 12. I’m local Page 12
    13. 13. I’m bored Page 13
    14. 14. which category should our app come under? Page 14
    15. 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 iPadand not just on a website? Page 15
    16. 16. so who is going to make it? Page 16
    17. 17. look for the developer Page 17
    18. 18. draw up the list of features Page 18
    19. 19. choose the developer Page 19
    20. 20. Page 20
    21. 21. Page 21
    22. 22. Page 22
    23. 23. ask Apple’s opinion Page 23
    24. 24. kill your darlings Page 24
    25. 25. the immoveable object… Page 25
    26. 26. compromise… Page 26
    27. 27. get started Page 27
    28. 28. plan and schedule Page 28
    29. 29. Page 29
    30. 30. get designing Page 30
    31. 31. Page 31
    32. 32. Page 32
    33. 33. Page 33
    34. 34. Page 34
    35. 35. Page 35
    36. 36. use free resources Page 36
    37. 37. Page 37
    38. 38. Page 38
    39. 39. paper design Page 39
    40. 40. Page 40
    41. 41. Page 41
    42. 42. Page 42
    43. 43. Page 43
    44. 44. Page 44
    45. 45. ask Apple’s opinion again Page 45
    46. 46. compare designs to reality Page 46
    47. 47. sit down with developer Page 47
    48. 48. Page 48
    49. 49. UX and step throughs Page 49
    50. 50. Page 50
    51. 51. Page 51
    52. 52. gathering new content Page 52
    53. 53. track content Page 53
    54. 54. Page 54
    55. 55. Page 55
    56. 56. organise content Page 56
    57. 57. Page 57
    58. 58. Page 58
    59. 59. Page 59
    60. 60. download size Page 60
    61. 61. begin to build Page 61
    62. 62. web interface to upload content Page 62
    63. 63. Page 63
    64. 64. Page 64
    65. 65. Page 65
    66. 66. testflight Page 66
    67. 67. Page 67
    68. 68. pixel precise design Page 68
    69. 69. Page 69
    70. 70. Page 70
    71. 71. Page 71
    72. 72. Page 72
    73. 73. Page 73
    74. 74. Page 74
    75. 75. Page 75
    76. 76. Page 76
    77. 77. refine design Page 77
    78. 78. Page 78
    79. 79. Page 79
    80. 80. Page 80
    81. 81. Page 81
    82. 82. Page 82
    83. 83. Page 83
    84. 84. use existing iPhone elements Page 84
    85. 85. Page 85
    86. 86. Page 86
    87. 87. Page 87
    88. 88. bringing in live content Page 88
    89. 89. Page 89
    90. 90. find and use ‘free’ assets Page 90
    91. 91. Page 91
    92. 92. Page 92
    93. 93. test Page 93
    94. 94. Page 94
    95. 95. crash reports Page 95
    96. 96. Page 96
    97. 97. jump through Apple’s hoops Page 97
    98. 98. proof read Page 98
    99. 99. test again Page 99
    100. 100. Page 100
    101. 101. refine design again Page 101
    102. 102. Page 102
    103. 103. getting ready for App Store Page 103
    104. 104. graphics for App Store marketing Page 104
    105. 105. Page 105
    106. 106. icons, screenshots, @2x Page 106
    107. 107. Page 107
    108. 108. Page 108
    109. 109. Page 109
    110. 110. pricing Page 110
    111. 111. Page 111
    112. 112. marketing Page 112
    113. 113. Page 113
    114. 114. Page 114
    115. 115. go live Page 115
    116. 116. in the App Store Page 116
    117. 117. Page 117
    118. 118. Page 118
    119. 119. monitoring app sales/ranking Page 119
    120. 120. Page 120
    121. 121. where’s my money? Page 121
    122. 122. Page 122
    123. 123. success Page 123
    124. 124. Page 124
    125. 125. what worked/what didn’t Page 125
    126. 126. Page 126
    127. 127. Page 127
    128. 128. Page 128
    129. 129. Page 129
    130. 130. App wisdomThink big but build smallThe best apps give users elegant solutionsto precise needsThe best apps give users just enough to dowhat they needSkills and charisma set apps apart Page 130
    131. 131. App(le) wisdomRead the Apple app interface guidelines…the iPhone sells well for a good reason, it isintuitive…you may think itll be fun to reinvent the wheelwith a byzantine interface but realistically themajority of app users wont Page 131
    132. 132. But it’s not just the appremember - marketing goes hand in hand withfeature development,it could be the greatest app in the world but ifno one knows about it how will it sell? Page 132
    133. 133. If only I’d known Page 133
    134. 134. Page 134
    135. 135. what next? Page 135
    136. 136. would I do it again? Page 136
    137. 137. thank you Page 137
    138. 138. want a demo? Page 138