How you design and present monetisation interactions requires as much attention to user experience as does the rest of your app. If you use in-app ads or in-app purchasing, this UX webinar presentation is for you. The presentation walks you through the recommended flows of various monetisation stories in Series 40 full touch. It also demonstrate common mistakes that developers make and will propose solutions for those problems.

1. UI design for
monetisation enablers for
Series 40 Full Touch
1 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

2. Overview
• Advertisement
• Nokia store considerations
• Subscription and shop considerations
• Further guidelines
• Purchase flow examples
• UX offering
• Take home messages
• Exercises
2 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

3. Advertisement
3 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

4. Use advertisements correctly to stay in
the business.
4 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

5. Banner size is 216 x 36 pixels.
5 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

6. Ads could be repeated at key breaks
inside long content.
6 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

7. Ads being part of the chrome should
always appear at the same position.
7 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

8. The ad should always be selectable and
not interfere with any chrome.
?
8 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

9. Differentiate the ad from the actual
content.
9 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

10. Full screen ads should be used at
breakpoints, not within tasks.
10 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

11. Allow to opt out advertisements with
in-app purchase.
11 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

12. Test with real-life ads in real phones,
not only with optimized placeholders.
12 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

13. Nokia Store considerations
13 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

14. Nokia store allows applications and app
extensions for sale.
14 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

15. Nokia store does not allow physical
goods or event tickets for sale.
15 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

16. Bundled in the app: Nokia DRM.
On a back-end server: Your solution.
Nokia DRM Custom solution
16 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

17. Nokia DRM: Nokia restoration policy.
Your solution: Your restoration policy.
Nokia DRM Custom solution
17 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

18. Subscription and shop
considerations
18 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

19. Make register and login equal.
19 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

20. Do not re-invent login. Make it easy
and let it appear late in the flow.
20 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

21. A pre-filled checkout form allows
convenient checkout.
21 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

22. Further guidelines
22 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

23. Promote the items you are selling. Do
not hide them in menus only.
23 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

24. Explain what you are selling.
24 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

25. Show the full price you will charge as
early as possible.
25 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

26. The app must work without additional
purchases.
26 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

27. Costs relate to money and download
size.
27 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

28. Reserve ”buy” or ”purchase” for the
actual purchase.
28 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

29. Mark sold items.
29 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

30. Support your users if you want them to
buy again from you.
30 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

31. Purchase flow examples
31 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

32. In-App-Purchase uses application UI, Nokia
Account UI and Nokia Store UI.
32 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

33. In-App-Purchase: Purchase a product.
Application UI Application UI
33 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

34. In-App-Purchase: Purchase a product.
Application UI Application UI Application UI
34 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

35. In-App-Purchase: Purchase a product.
Application UI Application UI Nokia Account UI
35 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

36. In-App-Purchase: Purchase a product.
Application UI Nokia Account UI Nokia Account UI
36 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

37. In-App-Purchase: Purchase a product.
Nokia Account UI Nokia Account UI Nokia Account UI
37 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

38. In-App-Purchase: Purchase a product.
Nokia Account UI Nokia Account UI Nokia Store UI
38 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

39. In-App-Purchase: Purchase a product.
Nokia Account UI Nokia Store UI Application UI
39 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

40. In-App-Purchase: Purchase a product.
Nokia Store UI Application UI
40 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

41. In-App-Purchase: Restore a product.
Application UI Application UI
41 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

42. In-App-Purchase: Restore a product.
Application UI Application UI Application UI
42 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

43. In-App-Purchase: Restore a product.
Application UI Application UI Application UI
43 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

44. In-App-Purchase: Restore a product.
Application UI Application UI Application UI
44 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

45. In-App-Purchase: Restore a product.
Application UI Application UI
45 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

46. UX offering for Series 40
46 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

47. There is a UI style guide.
47 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

48. The Nokia’s Series 40 stencils support
Inkscape.
48 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

49. Series 40 UI component demos app
showcases UI and code.
49 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

50. Series 40 UI Design
UX Library for Series 40 : http://www.developer.nokia.com/Resources/Library/Full_Touch/
In-app advertising: http://www.developer.nokia.com/Distribute/In-app_advertising/
In-app purchase:
http://www.developer.nokia.com/Resources/Library/Full_Touch/#!in-app-purchase.html
Battle Tank (Nokia DRM demo app): https://projects.developer.nokia.com/JMEBattleTank/
Tourist Attraction (Custom DRM demo app):
https://projects.developer.nokia.com/JMETouristAttractions/wiki
UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation
Functional description of in-app purchase:
http://www.developer.nokia.com/Resources/Library/Java/#!developers-guides/in-app-
purchase/introduction/functional-description.html
Wiki companion article for this webinar:
http://www.developer.nokia.com/Community/Wiki/Series_40_UI_design_for_monetization_e
nablers_webinar_-_companion_article
50 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

51. Further readings about mobile design
Jacob Nielsen’s show case “Why WSJ Mobile App Gets **
Customer Reviews”.
http://www.useit.com/alertbox/mobile-startup-
screen.html
Mobile Design Pattern Gallery: UI Patterns for Mobile
Applications. Theresa Neil (2012).
Designing Mobile Interfaces. Steven Hoober, Eric Berkman
(2011).
51 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

52. Take home messages
52 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

53. Be honest if you want people to
continue making business with you.
53 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

54. Do not reinvent login and checkout.
54 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

55. Ad placement is very delicate and
requires UX tests with real-life ads.
55 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

56. Exercises
56 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

57. Exercise: Where would you place “buy
more levels” button(s) in a game?
57 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

58. Exercise: What is wrong with this
layout?
58 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

59. Exercise: Which problems occur if you
place the ad at the bottom of the
view?
59 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

60. Exercise: What is wrong with this flow
(assume you are signed-in already to
Nokia Store).
60 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

61. Exercise: Which checkout concept do
you prefer and why?
61 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

62. Thanks to:
Sanna Hiukka
Tuomo Kekoni
62 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber

63. Thanks 
ext-jan.krebber@nokia.com
63 © Nokia 2012 UI design for monetisation enablers for Series 40 Full Touch.pptx v.01 2012-11-13 Jan Krebber