13 Lessons from making The Book of Kells for iPad

A rapid fire presentation I gave at crafthou.se Dublin the week after the app launched.

Transcript

1. Sunday 17 March 13
2. Masterclass Sunday 17 March 13
3. Expert’s Guide Sunday 17 March 13
4. Manual Sunday 17 March 13
5. We’re pretty good at making websites & stuff for the internet so maybe we can make an app for iOS? Sunday 17 March 13
6. Stripes! Yay! Sunday 17 March 13 Well it says so in stone & metal so it must be true
7. @killianw Awesome developer Sunday 17 March 13 Unfortunately he’s got to go meet a plumber to sort out something at his house.
8. Why put The Book of Kells on an iPad? Sunday 17 March 13
9. Sunday 17 March 13 I work for X Communications. Touchscreen kiosks for museums, CD-ROMs, websites, apps for about 20 years.
10. Sunday 17 March 13 I work for X Communications. Touchscreen kiosks for museums, CD-ROMs, websites, apps for about 20 years.
11. Sunday 17 March 13 I work for X Communications. Touchscreen kiosks for museums, CD-ROMs, websites, apps for about 20 years.
12. 1999 Sunday 17 March 13 In 1999 the team rose to the challenge of putting the BOK on CD-ROM - part preservation, part bringing it to a wider audience.
13. 1999 Sunday 17 March 13 In 1999 the team rose to the challenge of putting the BOK on CD-ROM - part preservation, part bringing it to a wider audience.
14. 1999 Sunday 17 March 13 In 1999 the team rose to the challenge of putting the BOK on CD-ROM - part preservation, part bringing it to a wider audience.
15. 2007 Sunday 17 March 13 Few years later it gets updated and re-formatted to be a DVD-ROM. Both were really popular with people worldwide and thousands of copies got shipped.
16. 2007 Sunday 17 March 13 Few years later it gets updated and re-formatted to be a DVD-ROM. Both were really popular with people worldwide and thousands of copies got shipped.
17. 2007 Sunday 17 March 13 Few years later it gets updated and re-formatted to be a DVD-ROM. Both were really popular with people worldwide and thousands of copies got shipped.
18. Sunday 17 March 13 Need a new modern platform, partly from a technical perspective. Or do we stick with what we have?
19. 2010 Sunday 17 March 13 2010: iPad arrives. This stage we had begun work on our first iOS apps for iPhone & iPod touch. Two thirds of the design room & at least 1 dev uses iOS so there’s a healthy interest.
20. 2012 iPad @2x = no brainer Sunday 17 March 13
21. 2012 DVD re-up required Sunday 17 March 13 By early 2012 stocks of the DVD were running out and we were faced with having to either get it re-engineered to place nice with modern OS or go afresh.
22. The Book of Kells for iPad Sunday 17 March 13 So it is decided at some stage in 2011 that this is to be the new platform And we are going to do it in house
23. Winter 2011 Attempt #1 Sunday 17 March 13 Late 2011 one of our designers was asked to kick off into the project. Sadly it didn’t get wings. Why?
24. Winter 2011 Attempt #1 :( Sunday 17 March 13 Late 2011 one of our designers was asked to kick off into the project. Sadly it didn’t get wings. Why?
25. •Retina iPad launches in early 2012 •Designs need re-working to accommodate this •Client decides to take a different approach Attempt #1 Sunday 17 March 13
26. Spring/Summer 2012 Attempt #2 Sunday 17 March 13 We try again. We don’t quite get there again.
27. Spring/Summer 2012 Attempt #2 :( Sunday 17 March 13 We try again. We don’t quite get there again.
28. Attempt #2 •Designer & dev working on it on and off in blocks •Client working on it on & off •Internal scheduling Sunday 17 March 13 As anyone who works in any sort of agency scenario, it’s hardest to get your own stuff done.
29. Autumn 2012 Attempt #3 aka THIS HAS TO SHIP! Sunday 17 March 13 Designer & developer just went into it full time in early August and worked in tandem.
30. Autumn 2012 Attempt #3 aka THIS HAS TO SHIP! :) Sunday 17 March 13 Designer & developer just went into it full time in early August and worked in tandem.
31. Attempt #3 ✓Designer & developer working in tandem full time ✓Attempt #2 = assets to work from ✓DVD stock sold out ✓Time = money! Sunday 17 March 13 More lessons learned. Nothing like a real deadline to push you towards the line. Will come back to the lessons again at the end.
32. Production Elements In no particular order Sunday 17 March 13
33. Sunday 17 March 13 You’re going to need a lot of this before you begin
34. Platform What will we publish for? Sunday 17 March 13 iOS got chosen for a number of reasons: 1. Designers felt comfortable & familiar with UX its conventions 2. Developer who had some experience with coding for it 3. We had to remove some variables - Android was to broad for a first attempt.
35. Scope What are we going to put into this thing? Sunday 17 March 13 And possibly more importantly, what are we going to leave out? Part of our struggle was thinking of an existing set of content and repurposing it and that was very challenging to pin down.
36. Interaction How will the user interact with the content? Sunday 17 March 13
37. Tools What should it be built on? Sunday 17 March 13
38. UI Design What should it look like? Sunday 17 March 13
39. Prototyping Make it Sunday 17 March 13
40. Testing Break it Sunday 17 March 13
41. Platform Prototype Tools Test UI UX Scope Sunday 17 March 13
42. THIS? Sunday 17 March 13 Initially we were all feeling a bit frustrated and a bit like this.
43. Chill - it’s not a production line Lesson #1 Sunday 17 March 13 Learned from Attempt 2 that it was definitely not a linear process! It’s something you’ll adapt to if you give it time.
44. Scope is a beast Lesson #2 Sunday 17 March 13 First thing we tried to hammer out and ended up hammering out right up till about a week before we deemed it “finished’. We dreamed of presenting the user with the book and then diving into content from there but in the end we over-ruled it when we weighed pros & cons, thought of our audience etc
45. DVD •Lots of videos (stills with voiceover) •Much smaller in size (800x600) •Single language •Simple interaction •People liked it Sunday 17 March 13 We had an existing product. Do we start from scratch?
46. iPad •More interactive •Totally different type of interaction •File size & other unknowns? •Set the foundations for multiple languages Sunday 17 March 13 1. Would we do new videos? 2. Being a different platform, we have to give people what they expect 3. How big/small a download should it be? Should we care? 4. What about all the stuff we still don’t know about?
47. Only One Certainty We had to include the manuscript as a whole Sunday 17 March 13 So that was the first area we worked on to perfect.
48. @MrDoodson Sunday 17 March 13
49. Creating the Book •Page scanned to high quality JPEG •Page cropped •Page lined up with opposite •Add spine, match levels etc •x 680 Sunday 17 March 13 Patience of Andrew Doodson a graphic designer who was used to working with large formats and had a keen eye
50. Creating the Book •Define dimensions & naming system •Output pages •Test file size •Output again... Sunday 17 March 13
51. Creating the Book •Interface around the book •Prototyping •Testing •Refining Sunday 17 March 13
52. Oh yeah the holes Sunday 17 March 13
53. Creating the Book Roughly 4 weeks x 3 people Sunday 17 March 13 Between getting the content ready, putting a framework in place for it with naming conventions, UI elements, testing, tweaking...
54. Copyright Protected Sunday 17 March 13
55. This will take longer than you think Lesson #3 Sunday 17 March 13 An app like this with large assets and weird content will probably take longer than you realise. Plus if it’s your first time at anything you have to allow for learning curves.
56. Sunday 17 March 13 Even when you think you’re done, you’re not done.
57. iOS != iEverything Lesson #4 Sunday 17 March 13 Having had and cherished my iPhone for nearly 3 years I thought I knew the platform. WRONG. It’s about the marriage between hardware, software and user.
58. Hardware Software User X Sunday 17 March 13 Solve for X. Had to spend time using the iPad - taking it home for evenings and weekends and throwing myself into it
59. Prototype Often Lesson #5 Sunday 17 March 13 It’s the only way to really get a feel for what’s working PLUS it’s often the only way a client will get what you’re trying to describe.
60. Sunday 17 March 13 This was the crux of the failing of attempt 2 where the client really wanted the UI and text to be as unobtrusive as possible.
61. Copyright Protected Sunday 17 March 13 And that’s how it was solved. Sometimes developers have the kick-ass ideas
62. Showing the Detail How will we show this thing off properly? Sunday 17 March 13 Started with zooming to twice the level then pushing it further and further until we hit a lag in the image drawing on screen. Enter the delicious CATiled layer.
63. Sunday 17 March 13 Some slightly mind-bending maths and a series of really impressive automator scripts later, we had a smooth solution
64. Test Early & Often Lesson #6 Sunday 17 March 13 See what works, don’t get precious about things that don’t.
65. HTML & CSS Rocks Lesson #7 Sunday 17 March 13 In both the design and build phases, even prototyping. For example for mocking up text areas. Pretty handy for the multi-lingual side of things.
66. You can’t stop the screenshots Lesson #8 Sunday 17 March 13 This is true but you can watermark all your images!
67. Copyright Protected Sunday 17 March 13 This is a stunning piece of work. While we’re eager to preserve it and bring it to a wider audience we also have a duty to protect it. It costs a fortune to maintain work in the library so we have to try protect it.
68. Digimarc Sunday 17 March 13 Subscription service, watermark is invisible to the naked eye. Online service crawls the net looking for your images.
69. Talk to People Lesson #9 Sunday 17 March 13 Don’t be afraid to ask for help!
70. Thanks @dermdaly Tapadoo = awesome Sunday 17 March 13
71. Follow the Rules Lesson #10 Sunday 17 March 13 Apple have comprehensive user interface and developer guidelines. Get to know them inside out and you shouldn’t fail.
72. Design on a Mac Lesson #11 Sunday 17 March 13 I designed on PC and it was a pain in the ass. From type-setting to sharing your display via Adobe’s fancy tools like Edge.
73. App != website Lesson #12 Sunday 17 March 13 There’s no such thing as tweaking it after it goes live. Apple are in control and will do as they see fit be it OS updates, pricing etc. It’s a different way of working, a different set of challenges but definitely transferrable skills. No browser testing!
74. Get it out there! Lesson #13 Sunday 17 March 13 We were in danger of constant tweaking while also in danger of wanting to run a million miles after looking at it for months on end. Get it out, get feedback and iterate.
75. If we can do it so can you Sunday 17 March 13
76. Sunday 17 March 13
77. Available Now! bookofkells.com / @bookofkellsapp Questions? Sunday 17 March 13