UI design for monetisation enablers for series 40 full touch

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

Overview

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


Use advertisements correctly to stay in
the business.


Banner size is 216 x 36 pixels.


Ads could be repeated at key breaks
inside long content.


Ads being part of the chrome should
always appear at the same position.


The ad should always be selectable and
not interfere with any chrome.

?

Differentiate the ad from the actual
content.


Full screen ads should be used at
breakpoints, not within tasks.


Allow to opt out advertisements with
in-app purchase.


Test with real-life ads in real phones,
not only with optimized placeholders.


Nokia Store considerations


Nokia store allows applications and app
extensions for sale.


Nokia store does not allow physical
goods or event tickets for sale.


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


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


Subscription and shop
considerations


Make register and login equal.


Do not re-invent login. Make it easy
and let it appear late in the flow.


A pre-filled checkout form allows
convenient checkout.


Further guidelines


Promote the items you are selling. Do
not hide them in menus only.


Explain what you are selling.


Show the full price you will charge as
early as possible.


The app must work without additional
purchases.


Costs relate to money and download
size.


Reserve ”buy” or ”purchase” for the
actual purchase.


Mark sold items.


Support your users if you want them to
buy again from you.


Purchase flow examples


In-App-Purchase uses application UI, Nokia
Account UI and Nokia Store UI.


In-App-Purchase: Purchase a product.
Application UI Application UI


Application UI Application UI Application UI


Application UI Application UI Nokia Account UI


Application UI Nokia Account UI Nokia Account UI


Nokia Account UI Nokia Account UI Nokia Account UI


Nokia Account UI Nokia Account UI Nokia Store UI


Nokia Account UI Nokia Store UI Application UI


Nokia Store UI Application UI


In-App-Purchase: Restore a product.


UX offering for Series 40


There is a UI style guide.


The Nokia’s Series 40 stencils support
Inkscape.


Series 40 UI component demos app
showcases UI and code.


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


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


Take home messages


Be honest if you want people to
continue making business with you.


Do not reinvent login and checkout.


Ad placement is very delicate and
requires UX tests with real-life ads.


Exercises


Exercise: Where would you place “buy
more levels” button(s) in a game?


Exercise: What is wrong with this
layout?


Exercise: Which problems occur if you
place the ad at the bottom of the
view?


Exercise: What is wrong with this flow
(assume you are signed-in already to
Nokia Store).


Exercise: Which checkout concept do
you prefer and why?


Thanks to:

Sanna Hiukka
Tuomo Kekoni

Thanks 

ext-jan.krebber@nokia.com


UI design for monetisation enablers for series 40 full touch

More Related Content

What's hot (10)

Similar to UI design for monetisation enablers for series 40 full touch (20)

More from Microsoft Mobile Developer (20)

Recently uploaded (20)

UI design for monetisation enablers for series 40 full touch