ui design for monetisation enablers for series 40 full touch

1

UI design for monetisation enablers for Series 40 Full Touch

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

Overview

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

• Advertisement • Nokia store considerations • Subscription and shop considerations • Further guidelines • Purchase flow examples • UX offering • Take home messages • Exercises

Advertisement

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

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

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

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

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

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

?

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

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

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

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

Nokia Store considerations

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

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

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

Bundled in the app: Nokia DRM. On a back-end server: Your solution.

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

Nokia DRM Custom solution

Nokia DRM: Nokia restoration policy. Your solution: Your restoration policy.

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

Nokia DRM Custom solution

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

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

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

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

Further guidelines

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

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

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

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

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

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

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

Mark sold items.

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

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

Purchase flow examples

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

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

In-App-Purchase: Purchase a product.

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

Application UI Application UI

In-App-Purchase: Purchase a product.

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

Application UI Application UI Application UI

In-App-Purchase: Purchase a product.

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

Application UI Application UI Nokia Account UI

In-App-Purchase: Purchase a product.

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

Application UI Nokia Account UI Nokia Account UI

In-App-Purchase: Purchase a product.

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

Nokia Account UI Nokia Account UI Nokia Account UI

In-App-Purchase: Purchase a product.

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

Nokia Store UI Nokia Account UI Nokia Account UI

In-App-Purchase: Purchase a product.

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

Nokia Store UI Nokia Account UI Application UI

In-App-Purchase: Purchase a product.

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

Nokia Store UI Application UI

In-App-Purchase: Restore a product.

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

Application UI Application UI

In-App-Purchase: Restore a product.

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

Application UI Application UI Application UI

In-App-Purchase: Restore a product.

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

Application UI Application UI Application UI

In-App-Purchase: Restore a product.

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

Application UI Application UI Application UI

In-App-Purchase: Restore a product.

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

Application UI Application UI

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

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 47

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 48

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 49

Series 40 UI Design

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

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_enablers_webinar_-_companion_article

Further readings about mobile design

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

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).

Take home messages

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

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

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

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

Exercises

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

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

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

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

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

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

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

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