Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The age of apps as a service layers

The age of apps as a service layers

Mobile, app, design

william el kaim

December 11, 2016
Tweet

More Decks by william el kaim

Other Decks in Technology

Transcript

  1. This Presentation is part of the Enterprise Architecture Digital Codex

    http://www.eacodex.com/ Copyright © William El Kaim 2016 2
  2. Plan The Mobile Revolution • The Age of Apps As

    Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 3
  3. The Rise of Smartphones Jan 2014. Mobile Apps Overtake PC

    Internet Usage In U.S.A. Copyright © William El Kaim 2016 6
  4. The Rise of Smartphones Source: Kantar Worldpanel SmartPhone OS Market

    Share Vary Widely Copyright © William El Kaim 2016 7
  5. It’s No Longer Just About Smartphones! Most week day tablet

    usage occurs between 8 and 9pm Copyright © William El Kaim 2016 8
  6. It’s No Longer Just About Smartphones! Source: Mobile Megatrends 2012

    Key ecosystems are expanding across 4 screens Copyright © William El Kaim 2016 9
  7. It’s No Longer Just About Smartphones! Source: Mobile Megatrends 2012

    Convergence will be around ecosystems and experience roaming across many types of devices Copyright © William El Kaim 2016 10
  8. Plan • The Mobile Revolution The Age of Apps As

    Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 13
  9. From Mobile App to Apps As A Service • First

    generation: ‘information appliance’ model. • Using software, you transformed your phone into a mostly mono-purpose device just like it said on the tin. Now it’s a phone. Now it’s a calculator. Now it’s a messaging tool. • The second generation: the ‘home screen’ era • The prevailing wisdom was that you had to cram everything your service offered into mobile, using a form of design-driven gavage to stuff your app until it was positively groaning with tabs and gutters and drawers. • Thrid Generation : The Age Of Apps As Service Layers • They aren’t for ‘idle browsing’, they’re purpose built and informed by contextual signals like hardware sensors, location, history of use and predictive computation. • These ‘invisible apps’ are less about the way they look or how many features they cram in and more about maximizing their usefulness to you without monopolizing your attention. Source: TechCrunch Copyright © William El Kaim 2016 14
  10. The Age Of Apps As Service Layers Hailo New Google

    Now Card • Hailo has teamed up with Google to introduce a Now card that will help make the commute a little bit easier for its customers. • Instead of poking around in apps and web pages to find what you need, Now cards in the Google app can give you the right information at exactly the right time. • For people who have opted in to Google Now and have downloaded the Hailo app, the Hailo Now card will send an alert to anyone who has booked a journey from outer London zones in to Central London between 7-10am in the morning an offer of a cab home if the passenger is still in the same London location after 5pm. https://blog.hailoapp.com/2015/02/02/hailo-google-now/ Copyright © William El Kaim 2016 17
  11. The Age Of Apps As Service Layers Calendar42: Mobility Attached

    to Agenda http://site.calendar42.com/ Copyright © William El Kaim 2016 19
  12. The Age Of Apps As Service Layers From AdWords to

    AppWords • New technology that lets mobile apps reach outside of their respective walled gardens so that users can search and navigate between specific places within them. • Israel’s Deeplink.me launched AppWords, a mobile search and ad platform that uses keywords to trigger relevant content between one app and another. • Installed Apps will bid for displaying the ads and link to them. • Several Taxi Apps can bid for an ad on an Itinerary http://deeplink.me/appwords Copyright © William El Kaim 2016 20
  13. The Age Of Apps As Service Layers URX: Ads as

    News https://urx.com/ Copyright © William El Kaim 2016 21
  14. The Age Of Apps As Service Layers Connected App Experiences

    Source: Button http://applinks.org/ Copyright © William El Kaim 2016 22
  15. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 23
  16. Past Generations (from Mainframe to Web) • Mainframe model (1st

    Gen) • Everything on the server but the keyboard and [green] screen, which resulted in low user experience but high application access. • Client/Server model (2nd Gen) • Desktop computing became mainstream, • Moving all application logic to the client side, trading application distribution for higher user experience. • This gave birth to the suite of productivity applications we still use today, such as Adobe Photoshop, Microsoft Office, and Autocad. • Web 1.0 (3rd Gen) • As the Web started to be recognized as a new way to publish and share content, it started to get used for application as well, and its usage and enhancement quickly escalated ( Web 1.x, Web 2.0/Ajax) to provide what the Client/Server model was not suited for: instant access and update of a server-driven application with relatively decent interactive user interfaces. Copyright © William El Kaim 2016 25
  17. 4th Generation: Mobile App Model and Its App Store •

    Web 2.0 and Mobile (4th Gen) • Though we believed that the Web was going to be the future of application development and distribution, the iPhone popped out • Not only kick-started a new generation of computing devices (i.e., the “touch era”), but also initiated a new way to build, distribute, and monetize applications, referred as the Mobile App model (4th Gen). • Address some of the limitations of its predecessor • by providing a more efficient platform for users to discover, install, update, and pay for their applications or features. • Regarding platform dependency, “going native” means going OS-specific. • However, for most companies this is a very costly approach. • Mashup and API needed to send content to Mobile • Mobile Backend as a service Copyright © William El Kaim 2016 26
  18. 4th Generation: Mobile App and App Store • The biggest

    limitations of this new app store model • Come from its client/server heritage, as application updates are still user-initiated (as they should be), which increases the support cost (especially when server API are involved) • Exclusive and over-controlling application store rules such as those maintained by apple and microsoft’s app stores. • Companies need to be able to select and control the mobile app and web site that their users could use. • Need to be able to create a simple and quick way to build an app store and to be able to brand it for our clients. • New role: The app store • Load all Android and (Enterprise only) Iphone apps • Create and add users • Generate the mobile app store application use to access the content of the store Copyright © William El Kaim 2016 27
  19. 5Th Gen.: HTML5 & Hybrid Not every customer or potential

    customer will have your native app installed Cost of Acquisition extremely expensive Source: Jason Grigsby Copyright © William El Kaim 2016 29
  20. 5th Gen.: HTML5 & Hybrid • As the software market

    was getting stormed by mini applications, the Web also went through a transformative evolution, under the HTML5 moniker. • During this time, the biggest Internet technology providers such as Mozilla, Google, Apple, and even Microsoft began fiercely competing on compliance and performance of a single spec, HTML5. • The truly disruptive aspect of HTML5 is that, in a world with an ever- increasing number of devices, HTML5 has become the only truly cross- platform application environment of Moore’s law. • HTML5 and JavaScript have never been a better bet for the future, and any software companies, especially enterprise ones, should seriously consider this opportunity to go where the puck will be and lead their respective markets for many years to come. Copyright © William El Kaim 2016 30
  21. Next Generation (HTML5 & Hybrid) Why HTML 5? Many benefactors,

    but no clear leader all pushing and hyping HTML5 for their own unrelated reasons Copyright © William El Kaim 2016 31
  22. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 32
  23. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture Native vs. Cross-Platform vs. Web • Progressive Web Apps • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 35
  24. New Web Application Architectures Progressive Web Apps Introduction • Progressive

    Web Apps bring features we expect from native apps to the mobile browser experience in a way that uses standards-based technologies and run in a secure container accessible to anyone on the web. Source: Google Copyright © William El Kaim 2016 36
  25. New Web Application Architectures Progressive Web Apps Properties • Progressive

    • Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. • Responsive • Fit any form factor, desktop, mobile, tablet, or whatever is next. • Connectivity independent • Enhanced with service workers to work offline or on low quality networks. • App-like • Use the app-shell model to provide app-style navigations and interactions. • Fresh • Always up-to-date thanks to the service worker update process. • Safe • Served via TLS to prevent snooping and ensure content hasn’t been tampered with. • Discoverable • Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them. • Re-engageable • Make re-engagement easy through features like push notifications. • Installable • Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store. • Linkable • Easily share via URL and not require complex installation. Copyright © William El Kaim 2016 37
  26. New Web Application Architectures Progressive Web Apps: Blazzing Fast Performance

    Google Plus hit their goal of never downloading more than 60k of HTML, 60k of JavaScript and 60k of CSS at any one time! Source: Eugene Mutai AliExpress (Alibaba’s eBay) saw 82% increase in iOS conversion rate after building a PWA. Copyright © William El Kaim 2016 38
  27. New Web Application Architectures Progressive Web Apps: App Shell •

    An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications. • The app "shell" is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits. • This means the application shell is not loaded from the network every time the user visits. • For single-page applications with JavaScript-heavy architectures, an application shell is a go-to approach. • This approach relies on aggressively caching the shell (using a service worker) to get the application running. • Next, the dynamic content loads for each page using JavaScript. An app shell is useful for getting some initial HTML to the screen fast without a network. Copyright © William El Kaim 2016 39
  28. New Web Application Architectures Progressive Web Apps: Service Worker •

    Under Standardization within W3C • Service Worker is a worker script that works behind the scenes, independent of your app, and runs in response to events like network requests, push notifications, connectivity changes, and more. • Today, they already include features like push notifications and background sync. • Allows to support offline experiences, giving developers complete control over the experience. • Mozilla offers a great reference for service worker recipes and Google also has a slew of Service Worker Samples. • States of Browser support is available at “Is service worker ready?” or at “Can I Use” Copyright © William El Kaim 2016 40
  29. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture Native vs. Cross-Platform vs. Web • Web Components • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 41
  30. New Web Application Architectures W3C Web Components • Web components

    are a collection of specifications that enable developers to create their web applications as a set of reusable components. • Web Components provide a paradigm shift from the traditional approach of web design by fundamentally changing the way we build and conceive web apps. • The promise is to put the power and extensibility necessary to build sophisticated widgets and applications right into core web feature set. • Imagine the capabilities of libraries like Angular, Ember, and Backbone, but as a foundation of the platform, standardized across all browsers. http://webcomponents.org/ Copyright © William El Kaim 2016 42
  31. New Web Application Architectures W3C Web Components • A good

    introduction here and here • Web components are made up of four different specifications: • Custom Elements – These enable developers to create their own elements that are relevant to their design as part of the DOM structure with the ability to style/script them just like any other HTML tag. • HTML Templates – These let you define fragments of markup that stay consistent across web pages with the ability to inject dynamic content using JavaScript. • Shadow DOM – This is designed to abstract all the complexities from the markup by defining functional boundaries between the DOM tree and the subtrees hidden behind a shadow root. • HTML Imports – Similar to import one CSS file into another, these allow you to include and reuse HTML documents in other HTML documents. • Major libraries for working with and extending web components: • X-Tags by Mozilla • Polymer by Google • Bosonic Copyright © William El Kaim 2016 43
  32. New Web Application Architectures W3C Web Components: Shadow DOM When

    rendered, the shadow tree takes place of the shadow host's content Source: Fu Cheng Copyright © William El Kaim 2016 44
  33. New Web Application Architectures W3C Web Components: Polymer • Polymer

    library, created by Google, offers to use W3C Web Components features in modern browsers today. • Polymer provides a set of “polyfills” enabling to use web components in non- compliant browsers with an easy-to-use framework. • polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. • Polymer does this by: • Allowing us to create Custom Elements with user-defined naming schemes. These custom elements can then be distributed across the network and used by others with HTML Imports. • Allowing each custom element to have its own template accompanied by styles and behavior required to use that element. • Providing a suite of ready-made UI and non-UI elements to use and extend in your project. http://www.polymer-project.org/ Copyright © William El Kaim 2016 45
  34. New Web Application Architectures W3C Web Components: Polyfill • In

    web development, a polyfill is code that implements a feature on web browsers that do not support the feature. • Most often, it refers to a JavaScript library that implements an HTML5 web standard, either an established standard (supported by some browsers) on older browsers, or a proposed standard (not supported by any browsers) on existing browsers. • Polyfills allow web developers to use an API regardless of whether it is supported by a browser or not, and usually with minimal overhead. • Typically they first check if a browser supports an API, and use it if available, otherwise using their own implementation. • Example: HTML 5 cross-browser Polyfill by Paul Irish. Copyright © William El Kaim 2016 46
  35. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture Native vs. Cross-Platform vs. Web • Backends For Frontends • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 47
  36. Backends For Frontends From Thick-client Applications To Interfaces Delivered Via

    The Web • With the advent and success of the web, the de facto way of delivering user interfaces has shifted from thick-client applications to interfaces delivered via the web, a trend that has also enabled the growth of SAAS-based solutions in general. • The benefits of delivering a user interface over the web were: reduction of the cost of releasing a new functionality and the no more client-side installs. Source: Sam Newman Copyright © William El Kaim 2016 48
  37. Backends For Frontends From Thick-client Applications To Interfaces Delivered Via

    The Web From a Typical Enterprise Web Stack To a Full JavaScript Stack Source: IBM Strongloop Copyright © William El Kaim 2016 49
  38. Backends For Frontends The Single Server-side API • This simpler

    world didn't last long though, as the age of the mobile followed shortly afterwards. • With a system that had initially been developed with a desktop-web UI in mind, using server-side approach, we now face a problem in accommodating these new types of user interface, as we have a tight coupling between the desktop web UI and the backend services. • The first step in accommodating more than one type of UI is normally to provide a single, server-side API • And add more functionality as required over time to support new types of mobile interaction Source: Sam Newman Copyright © William El Kaim 2016 51
  39. Backends For Frontends Issue With The Single Server-side API •

    If these different UIs want to make the same or very similar sorts of calls, then it can be easy for this sort of general-purpose API to be successful. • However the nature of a mobile experience often differs drastically from a desktop web experience. • So, an additional layer need to be added to the API backend to support mobile interfaces. • To provide functionality to multiple, user-facing applications. This means that the single API backend can become a bottleneck when rolling out new delivery, as so many changes are trying to be made to the same deployable artifact. • It often results also in a team being created specifically • This can make the problem much worse, as now front-end teams have to interface with a separate team to get changes made Copyright © William El Kaim 2016 52
  40. Backends For Frontends The Solution … • One solution to

    this problem is to have one backend per user experience or as Phil Calçado called it a Backend For Frontend (BFF). • Conceptually, you should think of the user-facing application as being two components: • A client-side application living outside your perimeter, • A server-side component (the BFF) inside your perimeter. • The BFF is tightly coupled to a specific user experience • Typically be maintained by the same team as the user interface, thereby making it easier to define and adapt the API as the UI requires • while also simplifying process of lining up release of both the client and server components. Copyright © William El Kaim 2016 53
  41. Backends For Frontends “One Experience, One BFF” • The BFF

    is tightly focused on a single UI, and just that UI. • That allows it to be focused, and will therefore be smaller. • When it comes to delivering the same (or similar) user experience on different mobile platforms it is better to have a single BFF for each different type of client. Copyright © William El Kaim 2016 54
  42. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture Native vs. Cross-Platform vs. Web • Tools to Build and Manage Mobile App • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 55
  43. Tools Examples • Web to Native • Angular + NativeScript

    • Apache Cordova and PhoneGap • Electron • Hyperloop (Titanium + JS) • Nativescript • REACT Native • Rubymotion • Language Translation • Equela • J2ObjC is an open source tool created by Google to translate Java code into corrresponding Objective- C code that can be run on iOS • Metismo bought by SoftwareAG • Oxidizer • XmlVM • Cross-platform • Apportable • AppCelerator • Configure.it • Embarcadero • Go Language (+ Gomobile) • Ionic • Silver • Xamarin Copyright © William El Kaim 2016 58
  44. App Diagnostic Tools application planning retailing & discovery develop &

    debug market readiness in-use distributiion & monetisation Copyright © William El Kaim 2016 63
  45. Distribution and Monetization application planning retailing & discovery develop &

    debug market readiness in-use distributiion & monetisation Copyright © William El Kaim 2016 64
  46. Retailing and Discovery application planning retailing & discovery develop &

    debug market readiness in-use distributiion & monetisation Copyright © William El Kaim 2016 65
  47. Application Analytics application planning retailing & discovery develop & debug

    market readiness in-use distributiion & monetisation Copyright © William El Kaim 2016 66
  48. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture Native vs. Cross-Platform vs. Web • Decision Tree • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 67
  49. Native or Cross-Platform? • Go Native if: • You have

    high levels of usage and engagement in your platform and need the performance that coding native will give you across Android, And IoS. • Companies with large user bases, expected high usage rates, and the need for intensive graphic processing should develop native mobile applications. • It may also benefit you to program natively if you are a mobile first company that will not be going the web route. • Go Mobile Site if: • Your site analytics show you need it! Then choose an HTML5 based solution, responsive design method, or build small format html pages with larger elements for touch. • One of the benefits to doing a mobile site is that it can run on any mobile browser unlike native apps that can only run on specific platforms. • You encounter performance issue, and you want to benefit from SEO and Search Engine. Copyright © William El Kaim 2016 68
  50. Native or Cross-Platform? • Go Browser-based (Native wrapper) if: •

    You want to use a single HTML5 technology such as jquery mobile or sencha touch to work across several platforms with only the native wrapper to control your installation. • When building your project in html5 you simultaneously accomplish your mobile site, as the same code can be run uncached via url. • Go Responsive if: • Your company possesses a significant amount of user experience design and development resources capable of maintaining a great brand experience across all unique screen layouts, targeted device resolutions, and screen orientations. • The notion of having one website that can work well on web, mobile and tablet can be really powerful, especially when you’re talking about seo. • Unfortunately, most current responsive designs dilute the overall user experience to accommodate all use cases. Copyright © William El Kaim 2016 69
  51. Native or Cross-Platform? Usage, Context and User Segments • Segmentation

    could also be based on usage frequency (occasional, regular and intensive) and user experience • Mobiles Sites are for occasional users not willing (knowing how) to search/find/install an app, and to multiply this procedure by the number of devices they have (Smartphone, tablets, feature phones, etc.) • Hybrid Apps for users wanting to have access regularly to a first level of service on all features and content available on smartphones and Tablets • Native App for intensive users, using extremely often a precise feature. • Amazon offers a Mobile web site (for occasional shopper) and Dedicated apps for intensive shoppers. • They even offer now dedicated devices. Copyright © William El Kaim 2016 70
  52. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 71
  53. Backend As A Service (BAAS) • BaaS is an approach

    for providing web and mobile app developers with a way to connect their applications to backend cloud storage and processing while also providing common features such as user management, push notifications, social networking integration, and other features that mobile users demand from their apps these days. • This new breed of BaaS services are provided via custom software development kits (SDK) and application programming interfaces (APIs). • BaaS is a relatively recent development in cloud computing, with most BaaS start-ups dating from 2011 or later. • The global BaaS market is estimated to grow from $216.5 million in 2012 to $7.7 billion in 2017 from a report published by MarketsandMarkets. Source: API Evangelist Copyright © William El Kaim 2016 73
  54. How Does BaaS Differ From IaaS and PaaS? • Baas

    has evolved out of frustration around deployment of IaaS platforms like Amazon Web Services, just to fire up a single new mobile application. • BaaS is about abstracting away the complexities of launching and managing your own infrastructure, then bridging a stack of meaningful resources targeting exactly what developers need to build the next generation of mobile apps. • BaaS, has a lot of the same intent as PaaS, to speed up the application development process, but BaaS is purely a backend • Providing an infrastructure that automatically scales and optimizes, bundled with a set of essential resources developers require Source: API Evangelist Copyright © William El Kaim 2016 75
  55. What Are The Benefits of BaaS? • Efficiency Gains •

    Reducing overhead in all aspects of app devt, increasing efficiency at all stages of development • Faster Times to Market • Reducing the obstacles to take a mobile app from idea to production and overhead with operations once in production • App Delivery With Fewer Resources • Optimize for Mobile and Tablets • providers have put a lot of time and resources into optimization of data and network for mobile apps, and reduce fragmentation problems across multiple platforms and devices. • Secure and Scalable Infrastructure • Stack of Common API resources • BaaS brings common and essential 3rd party API resources into a single stack, preventing developers from having to go gather them separately Source: API Evangelist Copyright © William El Kaim 2016 76
  56. Other BAAS Providers • Amazon AWS Mobile Services • Anypresence

    • Apache Usergrid (open source) • Apigee App Services • Apiomat • APISpark • Appery.io • Build.io • IFFT • Iknode • Kidozen • Kinvey • Oracle Mobile Services • Proxomo • RedHat Mobile App Platform • Verivo Akula Copyright © William El Kaim 2016 83
  57. BaaS: Extract Web Data • Apache Nutch • Diffbot •

    Gargle • Import.io • PromptCloud • Quickcode • Scrapy Copyright © William El Kaim 2016 84
  58. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 85
  59. Key Business Models for Mobile App • Freemium • Free

    To Play • Pay per Download • In-app Payment (micro-transaction) • Subscription • M-commerce • Advertising: display • Affiliation (coupons, etc…) Copyright © William El Kaim 2016 86
  60. Key Business Models for Mobile App Freemium • Free to

    download and obtain the basic usage of the App, but if a user wants to have an even better experience, they can pay for more. • Advantages • Get as many users as possible to the pay threshold as quickly as possible, by enticing them to go further with the experience. • Provide enough in the Free Version of the Application to build interest and stickiness for a period of time. • Huge download make you visible in the appstore • Drawbacks • Conversion rate to paid version are very low … Copyright © William El Kaim 2016 87
  61. Key Business Models for Mobile App Free to Play •

    F2P is the hottest new category of direct monetization today! • Advantages • play the game, or use the application for free, but advance more quickly through the game by buying virtual goods. • This monetization model can incorporate other forms of monetization for these virtual goods—in-app payment, offers, or in-app advertising. • Some publishers allow players or users to purchase virtual goods in exchange for watching advertising, and then the publishers get paid directly by the advertisers. • Drawbacks • Mainly Adapted to Games … Copyright © William El Kaim 2016 88
  62. Key Business Models for Mobile App Pay per download •

    The user must pay to download the mobile app. • Advantages • Product is paid immediately (at the source) and revenue are easy to track • Good model for transient hits with big buzz (short-lived) • Drawbacks • Users do not pay an app without testing it. • Android capability to get refund if you’re not satisfied with the app is use to crack app • Prefer creating a “lite” functioning version instead • Price for the most downloaded app is around 1-2 euro • Need high volume. • A costly app is not highly bought and not visible in top 15/50 apps. • No recurring fees (once paid, you’re done …) Copyright © William El Kaim 2016 89
  63. Key Business Models for Mobile App In-app Payment (micro-transaction) •

    Use micro-payment within your application, mainly for digital goods buying. • Charge inside the application itself to unlock more features and capabilities. • Advantages • Recurring fees • Micro payment is simple to use (today mainly on iOS) and favor impulsive buying • Drawbacks • Need to use the specific API of each Appstore • Difficult to add without sacrifying in the App User Experience Copyright © William El Kaim 2016 90
  64. Key Business Models for Mobile App Subscription • Users must

    subscribe to pre-defined set of services (package) leading to a recurring monthly or yearly fee. • Advantages • Couple Mobile/desktop experience. • Recurring Fees • Price is defined freely by app editor (not limited by micropayment). • Drawbacks • You need to offer a great level of service to keep your clients over time • Better adapted to news/publishing genre Copyright © William El Kaim 2016 91
  65. Key Business Models for Mobile App M-commerce • Generally users

    for buying physical goods • Advantages • Very promising approach, not fully used yet • ebay estimates 1.5 B buying's through its mobile app in 2010 • Today lots of app used for shopping phase • Drawbacks • Payment system still the first barrier of adoption • user needs to enter its Credit card information or to use its existing account at the merchant or a standard Paypal, Google Checkout or Amazon one. • Customers not yet fully accustomed with mobile e-commerce • PCI compliance should be ensured Copyright © William El Kaim 2016 92
  66. Key Business Models for Mobile App Advertising • Classic model

    for advertising (CPC, or CPM). The more the ads are displayed and clicked, the more you earn money. • There are several business models to consider for mobile advertising and over 200 companies • Advantages • Easy to setup (need to use an ad agency). • CPM et CPC higher than the ones on the web. • Drawbacks • Requires a huge volume of downloaded apps • Could be intrusive and painful for the user Copyright © William El Kaim 2016 93
  67. Key Business Models for Mobile App Mobile Advertising: Blind Networks

    • On one end of the spectrum is Blind Networks, which work on a CPC basis (cost per click). • These networks serve a high volume of advertising largely from independent mobile app developers and offer self-service tools to help advertisers track and optimize campaigns. • Blind networks include companies like AdMob, InMobi, Madvertise, Adfonic, and BuzzCity. Copyright © William El Kaim 2016 94
  68. Key Business Models for Mobile App Mobile Advertising: Premium Ad

    Networks • On the other end of the spectrum are Premium Ad Networks tend to focus mostly on brand advertising CPM campaigns and therefore use a smaller number of more premium publishers like big-ticket mobile sites, mobile operators, and top-tier publishers. • Premium networks can also offer performance advertising (CPC), but the cost of running these campaigns is typically much more expensive than it would be on a blind ad network. • Sometimes CPA (cost per action/acquisition) is also available through Premium networks. Copyright © William El Kaim 2016 95
  69. Key Business Models for Mobile App Mobile Advertising: Premium Blind

    Networks • Premium blind networks fall somewhere in the middle of Blind networks and Premium networks. • They typically have a higher number of premium publishers than blind networks and attract a higher proportion of brand advertisers. • Premium blind networks usually offer both CPC advertising as well as CPM. • The cost of advertising on these networks varies significantly and is often negotiable. • Premium blind networks include Millennial Media, Greystripe, Jumptap and others. Copyright © William El Kaim 2016 96
  70. Key Business Models for Mobile App Mobile Advertising: Ad Exchange

    • An Ad Exchange enables cross-platform mobile application developers to maximize revenues with one embedded SDK that serves ads from multiple ad providers. • Inneractive, Tapjoy, Mobclix, Smaato and Nexage. • An Ad Exchange partners with global ad networks and local premium agencies to provide developers a global coverage of local-targeted ads. • The exchange provides high fill rates, CTR and eCPM. • An exchange also offers developers and brands to directly buy inventory from publishers to run their own campaigns on. • An App Monetization Exchange is the next generation of Ad Exchanges offering multi-monetization streams on top of Display and Rich Media ads, including Search, Hyper-Local and virtual Currency, all integrated to a single robust SDK, which is offered by companies like Inneractive. Copyright © William El Kaim 2016 97
  71. Key Business Models for Mobile App Mobile Advertising: Recommendations •

    If you plan to manage mobile advertising on your own, don’t put all of your eggs in one basket. • Test different advertising channels to see which work best before making too large of an investment in any one network. • If you invest the time in getting to know folks at mobile ad networks, you should be able to get a few test campaigns for free or at a reduced rate to trial the network. • Focus on the Primary Countries • In terms of geographies, the following locations consistently produce a relatively high CTR, and advertisers recognize the quality of the clicks from the following locations by paying more per click • U.S, UK, Italy, Spain, South Africa, Australia Copyright © William El Kaim 2016 98
  72. Key Business Models for Mobile App Affiliation (coupons, etc.) •

    Like on the web, you earn money through your users actions’ (like bringing new client to a supplier loyalty card web site) • Advantages • High revenue per action • Couponing on mobile web phone seems to have a great future • Drawbacks • Need to have huge downloads volumes, since conversion rates are generally very low (1% to 3% - 3% in Travel). Copyright © William El Kaim 2016 99
  73. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 100
  74. Good User Experience Recipes • GoodUI: 75 GoodUI ideas that

    we are about to show you, are being actively A/B tested by us and others. • User Interface Design patterns: recurring solutions that solve common design problems. • Dark Patterns: fighting user deception worldwide • UX Companion: A handy glossary of user experience (UX) theories, tools and principles. • Service Design Tools: Open Collection of communication tools • Microinteractions: The Secret of Great App Design • Web Design Newsletter • InspireUX: Digital newspaper Copyright © William El Kaim 2016 103
  75. Wireframe and Prototyping • JustinMind & Axure: Industry leading tool

    widely used. • Adobe Experience Design & InDesign: if you can afford them! • inVision, Marvel or UXPin: Focus on prototyping and collaboration • Uxtools:Tools Comparison • Atomic • Basalmiq • Codepen • Framerjs • Origami by Facebook • Sketch and Xcode (tutorial) • Wireframe.cc Copyright © William El Kaim 2016 104
  76. Interesting Tools • Elasticode: Optimize Mobile User Onboarding • Patternry:

    Build, manage and share living style guides and design systems • VerifyApp: Pre-development A/B Testing, design surveys, etc. • SolidifyApp: Multi-device user testing, behavior analysis, etc. User Testing • MindNode: For paper-less brainstorming of site user flows, etc. • Lucid Chart: For clean and fast process flow creation for digital strategies, and site architecture maps. • Random User Generator: A free, open- source API for generating random user data. Like Lorem Ipsum, but for people • Keynotopia: Transforms Keynote and PowerPoint into mobile, web and desktop app mockups/ • FullStory: lets your company easily record, replay, search, and analyze each user's actual experience with your website • FastLane: Automate build and release of iOS and Android apps Copyright © William El Kaim 2016 107
  77. Google RAIL Performance Model • Focus on the user •

    The end goal isn't to make your site perform fast on any specific device. • Respond to users immediately • Acknowledge user input in under 100ms. • Render each frame in under 16ms and aim for consistency • Maximize main thread idle time. • Keep users engaged • Deliver interactive content in under 1000ms. https://developers.google.com/web/fundamentals/performance/rail Copyright © William El Kaim 2016 109
  78. Unified Experience https://developer.chrome.com/apps/getstarted_arc The App Runtime for Chrome, or ARC,

    lets you run your favorite Android apps on Chrome OS. Copyright © William El Kaim 2016 110
  79. The House of Cards • Touch screens and, more recently,

    weareable devices are beginning to change the dynamics of content consumption • While most apps still ask to use fingers and thumbs to scroll down pages of content and poke at buttons, they are now increasingly favoring gestures • swiping, pinching, tapping, and even clawing • With apps like Apple’s Siri and Google Now, developers should be looking to a far more futuristic paradigm: the natural-language, contextually aware human-computer “conversation.” • Move from “applications” to “in context cards” (like Google Now cards or Apple Passbook) • Wearable devices using voice command Copyright © William El Kaim 2016 111
  80. Information Pushed To Me In Context • Load contextual content

    onto the “back” of a card to design a distraction-free front side that well shows off the anchor content. • Many of cards (built in HTML5) will ultimately be portable • They can be transported intact from app to app, platform to platform without losing their design context or in-built architecture. • Examples • Cards are now a major feature of Google+ and Google Maps, complementing the existing experience on Google’s newest and most innovative projects, Glass and Google Now (opening its API …) • Apple Passbook • Twitter cards • Summary Card, Large Image Summary Card, Photo Card, Gallery Card, App Card, Player Card, Product Card Copyright © William El Kaim 2016 112
  81. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 114
  82. Mobile App and App Store: Introduction • App Stores are

    a great way to reach potential customers and users of your apps • They offer relatively easy reach to a huge range of people, and handle the billing and delivery of your products. • But while they may provide a nice storefront, they don’t do a lot to help market your apps • Submitting an application to an App Store is often times more difficult and time-consuming than you’d expect • This burden, added to the ongoing management of each submission, means it’s likely that you will want to choose a small number of stores to work with, rather trying to hit most of the 120+ that exist. • Some App Stores make difference between B2C store (public), B2B store and B2E (enterprise) • Apple is offering different types of developer subscriptions Copyright © William El Kaim 2016 115
  83. Choosing Your App Stores • Major Platform Stores • These

    remain the most likely place users will go looking for apps, so even if your outside marketing may focus on other stores, it’s worth putting your apps in these. • Apple itunes store, Google Google play, and Microsoft Marketplace • Niche Market Stores • Does your app have a strong draw to a particular market niche, based on geography, type of content, or even device type? • For instance, if you have an app for Android tablets, there are stores that focus on them; local stores such as Yandex in Russia have strong user bases; if your app appeals to bookworms, you might want to check out the Barnes and Noble NOOK store; and so on. • These smaller stores often attract more dedicated users—and offer up a smaller pool of applications and have stronger marketing outreach. Copyright © William El Kaim 2016 116
  84. Choosing Your App Stores • Operator Stores • Many mobile

    operators now support their own App Stores , which can offer a few benefits. • Many of them support carrier billing, which has been shown to have a dramatic increase on app sales. • Others can offer marketing support, such as featured placement, advertising on operator web sites and other collateral, and more. • However, working with these stores and operators can often be a time-consuming and slow-moving process, so it definitely is a risk-reward scenario. • Another good angle here is to look outside your home market: many operators from smaller markets are now actively recruiting applications for their stores, and are willing to help with converting them to local languages and marketing them to their user base. Copyright © William El Kaim 2016 117
  85. Multi-store vs. Single-Store • Many developers take only a single-store

    strategy, but • Many successful developers work with multiple stores to maximize their exposure and use different business models (such as ad supported vs. paid download) to maximize their revenues. Copyright © William El Kaim 2016 119
  86. Public Marketplace Management Apple • Each Marketplace provides its own

    legal contracts, payment solutions and way of working. • Apple is by far the most complex. • Guide available here • Two different subscriptions mode exist • Developer for publishing in itunes (cost per year $99) and enterprise for the employees, not in the store (cost per year $299) • https://developer.apple.com/ • Submit an app for the store • Validation time is around one or two weeks, and cost nothing • Payments • Managed by the store Copyright © William El Kaim 2016 120
  87. Public Marketplace Management Deploying the App in Itunes Connect •

    Itunes Connect is used for managing the app in the marketplace once developped • https://itunesconnect.apple.com/WebO bjects/iTunesConnect.woa • Certificates • Are created in the marketplace • Proves that the person or organization uploading the code is the app owner, which has legal and Sales implications • Are used to encrypt the app, to enforce our ownership and forbid piracy Copyright © William El Kaim 2016 121
  88. Public Marketplace Management Deploying the App in Itunes Connect •

    To deploy an app to the marketplace you have to provide • The app Logo • The app category (travel, etc.) • The app keywords • The app version number and Description of features • The app screenshots • The languages supported • Test account for Marketplace to test the app • Link to the company web site owning the app • Link to the company support web site • Its price tiers (you can not put 37,52$, you have to follow a grid of pricing) • Etc. Copyright © William El Kaim 2016 122
  89. Public Marketplace Management Marketing the App • The app is

    now in marketplaces, so it’s time to do digital and print marketing to • Make people aware of this app • to boost download or in-app purchase • For example • Create a dedicated microsite • Send newsletter • Create ad banner • Acquistion per user is around several dollars Copyright © William El Kaim 2016 128
  90. Lifecycle of an App Deploying the App – Results for

    To Go Copyright © William El Kaim 2016 129
  91. Lifecycle of an App Supporting the App • The support

    web site or the dedicated email address for feedback need to be monitored • Bugs need to be found and solved • Every comment put in Marketplace along with a rating could not be commented • Except in Google Play, where owner can now answer comments • 90% of apps downloaded are the ones found in the top 10 visible in the marketplace landing page or featured for a day or a week in marketplace • Several alternative marketplaces exist for Android like Amazon app store, GetJar, Slide Me, Appoke, appbrain • Or make a deal with phone or Telco to pre-install the app Copyright © William El Kaim 2016 131
  92. Other Public Marketplaces Management • Android • Very different from

    previous ones • Requires a gmail address, One time fee =25€ • Recognize only a developer, not an enterprise. • http://support.google.com/googleplay/android-developer/bin/answer.py?hl=en&answer=113474 • Now require usage of Google Pay • Mobile Web Site • No marketplace exit today for mobile web site yet. • Payment • Payment could be done using a credit card payment solution or via a mobile payment company (Boku, Zong, Paypal, Amazon, google, Facecash, Square) Copyright © William El Kaim 2016 132
  93. Plan • The Mobile Revolution • Evolution of Mobile Software

    Architecture • Mobile Business Models • The Search for the Ultimate User Experience • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile App and App Store Creating a Private App Store • Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 133
  94. Corporate Application Store Cornerstone Of Mobile Management Services • The

    mobile application store is the central source of corporate-approved applications that have been developed internally or by external, third-party resources. • Employees use a self-service approach to download role-specific line-of- business applications, as well as horizontal applications (time capture and expense reporting). • Factors driving the use of internal versus external mobile applications include availability of mobile application development expertise, back-end system interface requirements, security, and need for control. • Providers will vet third-party applications to ensure they meet usability, security, and scalability requirements before they can reside on the corporate mobile app store. • Over time, these corporate application stores will evolve beyond employee focused stores to include applications for customers, partners, and suppliers. Copyright © William El Kaim 2016 134
  95. Corporate Application Store Pricing Model • Pricing models will evolve

    away from per-device models toward per-user models • Today many of the pricing models are based on a per-device, per-month model. • This pricing model is appropriate if employees carry one type of mobile device or smartphone. • However, some mobile worker segments such as corporate executives or sales professionals use two or more mobile devices (e.g., smartphones, tablets) to access work-related mobile applications. Copyright © William El Kaim 2016 136
  96. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store Lessons Learned and Best Practices • Real Examples Copyright © William El Kaim 2016 140
  97. Craftsmanship is key • Craftsmanship is key • You need

    to master and DO some key phases of the building process of your product (get your own mobile developers). • The company publishing the app in the marketplace is the owner of the app • The learning curve for mobile is quite high • We began by app made by suppliers • Then we built our apps, with all content store locally • Now we want to sell app to the world, put advertising and in-app purchase • Not one size fits all • Do not neglect mobile web site for occasional users and SEO. • Native app for “heavy user”. Copyright © William El Kaim 2016 141
  98. Make Some Noise … • Bought media • Refers to

    media/ads that are purchased through either third party ad networks, or platforms like Google Adwords to drive traffic to your app. • The average CPA for this activity is roughly $2–$3 per user! • Owned media • Media properties that YOU own that, if managed well through community outreach, can serve to drive traffic. • These include your website, social media properties, as well as the app description itself, which often determines whether someone will • Earned media • Refers to 3rd party “endorsements” who then act as referral sources for your app. • This could include everything from a popular blog that reviews your app to a top tier media outlet like Mashable covering your app in a roundup or feature story. Copyright © William El Kaim 2016 142
  99. Measure Customer Engagement with Key Performance Indicators (KPIs) • Your

    Key Performance Indicators (KPIs) will be unique to your specific app, but there are six basics that apply to everyone: • New Users: These are the users who have downloaded and launched your app for the first time. • Active Users: A user is defined as “active” if they have launched an app during a specific time frame. Common measures of active users are Daily Active Users (DAUs), Weekly Active Users (WAUs), and Monthly Active Users (WAUs). • Engagement: DAU/MAU is an indication of how sticky an app is. • Retention: Retention measures the percent of new users who come back within a specified period of time. Common measures are 1-day, 3-day, and 7-day retention. • Frequency of Use: show how often users interact with an app. • Session Length: how long a user spends in an app. Copyright © William El Kaim 2016 143
  100. Carefully Select and Manage App Stores • Mobile is by

    essence cross-functional and any group within the company could need to build a mobile app or a mobile web site • New roles and responsibility in the company • Digital • Create your own App Store for Internal app • Use Public store for external app. • Define the process to publish an app • Create plan for app marketing … • Select countries where to launch your app • Internationalize when possible • Business model: Free/freemium/paid/ads Copyright © William El Kaim 2016 144
  101. Never Under-Estimate Back Office and API Serving Your App •

    Mobile is driving the adoption of API/Cloud in the enterprise • Mobile needs access to Internal company systems and services, so Open-up … with API and Backend as a service • Make sure the architecture accounts for cloud-based data delivery, with the flexibility to run on public and private clouds. • Hardware / Platform flexibility • Enterprises need to support new platforms all the time because their employees use all kinds of devices and OS platforms (BYOD trend). • Apps need to run on all those platforms, and therefore, the mobile developer needs the freedom and choice to use the best SDK that fits the app experience required. Don’t lock them in. Copyright © William El Kaim 2016 145
  102. Be Strong on Security and Compliance • Enable agility with

    security • Enterprise mobile developers need to build and launch apps quickly, while IT still needs the solution to be compliant with their governance needs. • Mobilize legacy enterprise data and authentication systems • Securely connect mobile apps with on-premise systems that sit inside enterprise firewalls. • Ensure secure, compliant app use • Monitor data on the network, ensure only authorized users have access to the app, every transaction is recorded for audit, and apps, users and data can be de-provisioned on-demand. • Do not forget Data Protection and Usage License Agreement (terms & conditions) • Can be extremely costly the first time if you involve legal support Copyright © William El Kaim 2016 146
  103. What is needed • A clear way of how to

    use which brand for what kind of apps • look and feel and digital marketing + external/internal communication • A process for approving release of an App internally or publically and the associated steering committee • People in charge of managing market place for all mobile projects • Impact sales and download, legal duty, IP, etc. • A unique Legal Contact – terms of use for apps • Already done, Innovation paid for this several times • An operational support process and team • Later • A Finance/tax contact + bank account + mobile payment solution Copyright © William El Kaim 2016 147
  104. Plan • The Mobile Revolution • The Age of Apps

    As Service Layer • Evolution of Mobile Software Architecture • Native vs. Cross-Platform vs. Web • BackEnd As A Service • Mobile Business Models • The Search for the Ultimate User Experience • Mobile App and App Store • Creating a Private App Store • Lessons Learned and Best Practices Real Examples Copyright © William El Kaim 2016 148
  105. CWT Reports TMI Digital Publications App • The CWT Travel

    Management Institute conducts in-depth research into effective travel management practices to help clients worldwide derive the greatest value from their travel program. • Providing all CWT Travel Management Institute publications on tablets • iPad and Android • Enabling automatic notifications of latest studies • Providing dynamic and immersive digital access to Information • Interactive graphics for quick and better understanding • Videos • Sharing to Social Media Copyright © William El Kaim 2016 149
  106. CWT Reports Looking for the Best Solution • Start with

    Mockup (wireframe) • Then select Technologies • Evaluate the Cost • Launch the development • Test • App marketing Copyright © William El Kaim 2016 150
  107. CWT Reports Step 2: Creation of The App • Decision

    taken to in-source the development from the same team doing the “print” version • Use Adobe Digital Publishing Saas Platform • Enable to reuse Adobe Tooling • Some JavaScript to be done to make it more interactive • Better control of cost and delay Copyright © William El Kaim 2016 152
  108. CWT 78BizDays App Objectives • A tool that will help

    global business executives and personal travelers plan international phone and in place meetings or events more easily. • Makes it easy to find the right day and the right time to schedule your next meeting! • 78BizDays is both available as • A free web site (with advertising), dedicated to assistant and travel / organizer arranger • A free Apple iOS app with 2 months of data free and in-app buying for 3, 6 or 1 year of data. Copyright © William El Kaim 2016 155