Case study of the ConcertWall iPhone app by http://www.wolfslittlestore.be (design) & http://www.coin-c.com/ (development)

1. iOS design: a case study
CocoaHeads, Antwerp, March 26th 2012

2. I would like to give some context to this presentation. These
slides are from a 30 minute presentation called iOS design: a
case study.

4. If I make presentations, some slides only contain a
few words or images so the slides won’t distract
from what is being said. This “web” version contains
sticky notes (like this one) that summarize what I
talked about when displaying the slide during the
original talk.

5. iOS Design: a case study is about how we built ConcertWall.
Kristof, developer Johan, interface designer
@ahigherugliness @wolfr_

6. Let’s go through the process of designing ConcertWall,
from initial brief to final result.

7. Introduction

8. My name is Johan
Wolf or @wolfr_ on the internet

9. I read all day

10. I like to play video games

11. I love to write

12. I have an interest in photography

14. So this is my company’s website, ( http://
wolfslittlestore.be/ ). Notice how the graphics on the
homepage are @2x retina :)
Under work you can see what I do: interface design,
web design, branding and identity, HTML & CSS,
photography and design for mobile devices.
Companies evolve and this is actually a little bit
outdated - I specifically want to focus more on the
interface design part. The next website will reflect this!

15. Design for mobile

16. Design for mobile
These days I design a lot of interfaces for mobile:
iPhone, iPad, Android, Windows Phone 7 or for custom
hardware.

17. First iPhone owned: iPhone 3G
Number of iPhones owned so far: 3
Favorite application: Tweetie (original)
Most used application: Reeder
Number of apps currently on iPhone: 104
Number of iPhone apps designed: 4
Number of iPad apps designed: 2

18. First iPhone owned: iPhone 3G
Number of iPhones owned so far: 3
Favorite application: Tweetie (original)
Most used application: Reeder
Number of apps currently on iPhone: 104
Number of iPhone apps designed: 4
Number of iPad apps designed: 2
I’ve always used an iPhone as my primary phone since
it came out, now on my third one. Out of all platforms
it’s my favorite one to design for.

19. Case study

20. Initial brief
• Redesign of existing Last Concerts iPhone app
• Design of extra functionality to be added
• Website: add polish

21. Proposal
• Complete redesign and rebranding of Last Concerts
iPhone app
• New marketing strategy: new website & app icon
• Further ideas: great iTunes copy, offline ads (in concert
halls)

22. This is the old Last Concerts website. [http://
www.lastconcerts.com/]

23. This is the old app design. Notice
how it doesn’t look too bad (albeit
a bit standard) because the
defaults Apple provided are
excellent.

24. Wireframing &
interaction design

25. To kick off the project we sat down with a giant
sheet of paper. I bought a big roll of paper in the
paper shop. Drawing together is one of the best
ways to get to define what is going to be built.

26. Not going to bore you too much with this part,
but of course before designing or wireframing
anything you need to know:
* Why are we building this, for who…?
* What are the goals of people using the app?

27. On the train home I thought a bit about the
marketing... the initial app name idea was
“Gigfind” (rejected later). We kept the poster
idea.

28. The next process was putting everything I
learned in the wireframes. This is my style of
wireframing where I put everything in a giant
document. This one was made in OmniGraffle
but recently I switched over to Illustrator for
making these.

29. This is a detailed view of part of the wireframe.
Notice the notes that outline my thoughts
surrounding the screens I’m designing.

30. I generally use this template called Touch
Gesture reference guide to show if there is any
specific movement required on a screen. [http://
www.lukew.com/ff/entry.asp?1071]

31. This is another template (by Teehan+Lax). I don’t
use it personally but I included it here show the
difference between the interaction design and
visual design. A “sketch” style is used here to
show that this part of the design is NOT about
the visual. [http://www.teehanlax.com/blog/ipad-
sketch-elements-ai/]

32. interaction design visual design

33. Another technique that helps to make the
distinction is to make your UI elements gray and
unappealing just to make sure you concentrate
on the interaction design first.
interaction design visual design

35. Sometimes it might make more sense to
wireframe with a good kit of default UI and build
a working app first, based on the default UI
patterns. This is especially true when you are
developing an app for Android, iPhone and WP7
at the same time.
If you are doing client work, this will mean
educating your clients, and possibly your boss
too. The default UI can be implemented relatively
fast and is 100% tested. Going custom is hard.

36. Visual design & user interface
customization

37. Custom is hard.
People always forget things.

38. I often hit this iceberg when I stray from native
controls. For example, Ajax interactions require more
polish than basic web pages. Custom mobile menus
require more polish than the built-in version. If the
team doesn’t have the time to polish custom UI, it’s
often better to stick to the boring native controls that
work.
Braden Kowitz, Designer at Google

39. Very simple example:
a dark interface

40. Let’s say you were to make a “dark” iOS
interface. Maybe a developer would start with a
simple grouped table view in Xcode.

41. You could set a new background color, but now
your other UI elements don’t match the
background.

42. You can now go look for ways to customize the
other UI elements. In OS5 some interface
elements can be given a “tint” color.

43. There are tutorials out there that show you how
to change the default UI completely. The end
result of most of these tutorials is mediocre at
best.

44. Even famous apps like Instapaper don’t
implement a version that is 100% “right”.
There is no default list view for dark interfaces in
the iOS SDK, so a lot of iOS dev time is probably
spent reinventing the wheel (i.e. coloring an
existing UI element)
The lines between items have too much contrast,
the font for table views is supposed to be bold,
and the frame of the table view should have more
contrast.
Kudos to Marco for implementing a dark table
view when in Dark mode, which is a detail many
apps would forget. I am using Instapaper as an
example now but trust me, there are a apps out
there that are a LOT worse. I <3 Instapaper and
by many accounts it’s a leading example.

45. How to make a grouped table view thats fits right
in? Start by looking at the one that Apple made.
The key to a great iOS design is knowing the
platform. Look carefully at how the default apps
are built.

46. Work those details (not like this app).
Non retina graphic
Inconsistent language
Non retina graphic
Highlight text should
be white
Non retina graphic

47. In the end, if you want a custom design that is
great, you’re going to need to implement your
own version of certain UI parts using custom
assets.

48. List item 1
List item 2
List item 3
Here’s my version the grouped table view... you
could say: not much difference? I say - fits right
into iOS! [Download PSD: http://dribbble.com/
shots/233036-iPhone-list-PSD ]

49. list_view_top@2x.png
list_view_middle@2x.png
list_view_bottom@2x.png

50. List item 1
List item 2
List item 3
This “dark UI” design works on any background -
even disco style backgrounds (using PNG
transparency to achieve this).

51. If what you are building can’t be built with the
default UI elements take a close look at what the
leaders in a particular field are doing e.g.
FourSquare recently decided to switch over to
MapBox for their maps. [http://mapbox.com/]

52. True business cost of customization: both UI
elements took at least several hours & iterations
to get right

54. But if nobody took any UI risk there would not be any
innovation out there, so it depends on what you’re
doing. This screenshot is from Al Gore’s Our Choice, in
my opinion the best e-book there is on iPad,
interaction design-wise that is (then Apple took these
ideas and made iBooks author... that’s life!) [ http://
www.youtube.com/watch?v=U-edAGLokak ]
This was done by Mike Matas, Bret Victor and their
team. Two names you should definitely remember if
you’re into interface design. [http://
www.mikematas.com/] [http://worrydream.com/]

56. The Tapbots guys are famous for their custom
interfaces. Their business is practically based on the
fact that their apps are 100% custom. I love how they
think of power users. [http://tapbots.com/] [http://
tapbots.com/software/tweetbot/ipad/]

57. A common interaction
design mistake

58. Web style form iOS style form (better!)

59. It took me a while to learn how to handle forms
on iOS. Take a close look at Calendar (add new
event), Contacts (edit/add contacts) and Settings
to get a good grasp on what to do.
Web style form iOS style form (better!)

60. Test your design (!)
Use Skala preview http://bjango.com/mac/
skalapreview/ by Bjango to view your design
while making it. This should give you a better
sense of what you’re doing than the huge retina
PSD you are working in.

61. Design resources

63. For the Illustrator guys like me check out the
iPhone Vector UI elements template http://
www.mercuryintermedia.com/blog/index.php/
2009/03/iphone-ui-vector-elements

65. The Teehan+Lax PSD template is your best friend
when designing for iOS. It’s an almost perfect
representation of Apple’s UI elements in the form
of a PSD. [ http://www.teehanlax.com/blog/
iphone-4-gui-psd-retina-display/ ]

66. Design: lessons learned

67. • Custom vs. native is a tough balance - stick to the
standards where possible
• “Coloring” UIKit makes more sense than re-inventing the
wheel
• Don’t think you can do better than Apple (unless you
can invest the same time)

68. • Give your app personality through:
• Splash screen
• App icon
• App content

69. • Don't try to give your app personality through:
• Custom interaction design
• Ignoring standards and good defaults (e.g. standard sizes of
elements, 44px “touch” area)

70. Final designs

75. App icon

76. Iterations

77. Iterations
Since illustration is not my forte we hired an
illustrator, Mattias Lundin from Sweden: http://
dribbble.com/inkgraphix

78. It’s easy to go overboard with app icon designs.
The guys from Spice Invaders made 50 variants...
a bit too much.

79. You should read their “making of” blog post on
http://on-5.com/2012/01/the-making-of-spice-
invaders/

80. Speaking of “behind the scenes”, here’s another
cool one: http://www.repeattimerapp.com/how/

81. In the end we ran with this icon, showing 2
posters, a Woodstock reference, bold colors & a
reference to music through the notes & guitar.

83. Michael Flarup’s template is the best template
out there for designing your app icon. Recently a
new version came out “supporting” the new
iPad. [ http://appicontemplate.com/ ]

84. Keep in mind that this is the size most people are
going to see your icon at, I can only advise to
use a simple glyph/form instead of a super
detailed representation. Perhaps this design is
still too detailed.

85. These icons are super clear and to me still look
attractive:

86. Assets & specification

87. You can’t just deliver a PSD to a developer,
there’s no way that’s going to work. This part of
the presentation is about preparing assets and
the way I try to communicate the design.

88. Some tools to work faster when making assets:
Prepo is a Mac app to easily convert @2x images
to regular sized images (“@1x”). [Prepo: http://
wearemothership.com/work/prepo/]

89. Here’s the assets for ConcertWall. Takes some
work to export them all, especially crisp assets in
both retina and non-retina versions.

90. I use some automator actions to make my life
easier e.g. this does about the same thing as the
Prepo app (convert @2x to @1x)

91. This action just adds text to multiple files, if you
forget to add @2x to the names (like I always
do :))

92. I write a spec for the developer in which I explain
which images to use where, which fonts to use
where etc. You can’t possibly describe the whole
design but basic stuff like which asset belongs
where is very helpful for a developer.

93. ## Lists: thumbnails
Use glow.png for the glow on last.fm images.
* The thumbnails are 54x55 pixels
* Use a black 54x55 thumbnail if no image can be found/images are still
loading
* When an image gets loaded, slight fade in animation would be nice
This is an example of a “specification” for
thumbnails in lists in the Concertwall app.

94. A design has to be
communicated
Merely sending the mockups is not enough.

95. The app I use to make these is called Mou
(http://mouapp.com/), on the left side you write
in Markdown, on the right side you immediately
see your output. This way you can easily
reference asset images directly in the spec. The
app allows you to export to HTML and PDF, so
when you deliver the spec to the developer he/
she can open it up in a separate window (e.g. on
a second screen) and have it handy at all times.

96. Marketing: website

97. Here’s a simple way to make a good looking
iPhone asset for your marketing website:

98. Download Mikael Eidenberg’s iPhone template,
open it in Photoshop, and edit the smart object
inside of it (http://www.mikaeleidenberg.se/page/
free-iphone-template)

99. This is what it should look like.

100. Now put your own design in there...

101. Bam! A nice graphic for the website.

102. Here’s an early version of the website design. I
got tired of the “feature list” type design talking
about how great the app is.

103. The new approach is simpler: since the app is
free anyway we want to lead people to download
right away. Why not let the app speak for itself?

105. This is the current version which we are still
looking to improve, we would like a “happy”
version with a festival background.

106. This shows some of the steps involved in
creating this design: photography, logo and icon
creation forego the design process. You can’t
make anything cool without materials.

107. Thank you!
Follow me: @wolfr_ on Twitter
E-mail me: mail@wolfslittlestore.be
Read the blog: wolfslittlestore.be/journal
Subscribe to the blog: http://feeds.feedburner.com/Wolfslittlestore

108. Resources
Web content mentioned in this talk
LastConcerts http://www.lastconcerts.com/
Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071
The making of Spice Invaders http://on-5.com/2012/01/the-making-of-spice-invaders/
Repeat timer pro case study http://www.repeattimerapp.com/how/
App icon template pixel resort http://appicontemplate.com/
Teehan + Lax iPhone 4 GUI PSD http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/
Teehan + Lax iPad sketch elements http://www.teehanlax.com/blog/ipad-sketch-elements-ai/
Teehan + Lax iPhone sketch elements http://www.teehanlax.com/blog/iphone-sketch-elements-ai/
iPhone UI Vector Elements http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements/
Skala preview http://bjango.com/mac/skalapreview/
Prepo app http://itunes.apple.com/us/app/prepo/id476533227?mt=12
Automator (continued) http://wolfslittlestore.be/2012/03/07/automator-continued/
Designing for iOS http://wolfslittlestore.be/2012/02/29/designing-for-ios-continued/
Mou app http://mouapp.com/
List view PSD on Dribbble http://dribbble.com/shots/233036-iPhone-list-PSD
Mapbox http://mapbox.com/
Other essential web content around the subject
Apple iOS HIG http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html
Design then Code http://designthencode.com/
Almost everything on the Bjango blog: http://bjango.com/articles/

109. If you liked this presentation
Check out my previous presentations:
Designing better user interfaces
http://www.slideshare.net/Wolfr/designing-better-user-
interfaces
Design for Developers.
http://www.slideshare.net/Wolfr/design-for-
developersonlineversionlong

110. Hire me.
If you like what you’re seeing, I can apply my knowledge to your
application too. Get in touch: mail@wolfslittlestore.be