Page Example > Application Multi-Download page

[B3nz01d]

Requirement

As a Developer creating pages I want an example page for users to download a mobile app So That I can propose a better user experience

• for a user with an iOS device to be presented with the app store icon & the app store link
• for a user with an Android device to be presented with the play store icon & the play store link
• for a user with a desktop browser to be presented with both icons & both links
• TBC: (for a user in France to be redirected to the FR Store or a User in the US to be redirected to the US store)

Page Description

Title: Orange Design System Mobile Library Implementation

Section 1: Hero Banner

Composition

• Hero image
• Hero Message

Elements Reference

Hero Image:

Hero Message An App to experience the Orange Design System

Section 2: ODS Description

Composition

• Text Block
  • Message Title
  • Message description
• illustration block The 2 block should be side by side

Elements Reference

Message title The Orange Design System

Message desciption: The Design System from Orange provides the reference information for it's digital branding for both design and development resources. The goal is to ensure a consistent user experience across all Orange digital touchpoints thanks to an extensive library of design resources conforming to accessibility and eco-design engagement.

Illustration TBD: A web page screenshot of the DSM

Section 3: ODS App

Composition

• block 1
  • App title
  • App Description
• block 2: App video demo

The 2 block should be side by side inverted from the previous one

Elements Reference

Title Orange Design System App

App Description In order to share a common usage experience of this Design System, we created a mobile app for both iOS and Android OS. With this app:

• A designer or digital service creator will be able to use these apps to experiment, in each OS, all the available assets and variants to adjust possible customization.
• A developer will be able to view the corresponding code customization and have a ready built app code base that shows how to best use the assets, conforming to the expected accessibility standards, for faster and more qualitative integration.

Video embed: https://mastermedia.orange.com/pmJLYXq6kC

Section 4: The Benefits

• Find all available elements in the code library
• Experience the available interactions on each components and select the right customization
• Save time and find the right code to use by selecting the right component variant and it's possible customization
• All components have been implemented to follow the Orange Design System requirement in order to reinforce the brand consistancy
• Available components have been tested with code example for their accessibility performance
• The App is available on both iOS and android
• The Orange Design System app and its SDK are available in an open-source

These benefits need to be displayed one under each other with each an illustration one on the right then the nex on the left...

Section 5: The SDK

Composition

Elements Reference

The code libraries references in the app can be found at

• iOS Orange Design System Code Library
• Android Orange Design System Code Library

Illustration?

Section 6 the Download links

Composition

• for Android (2 step process)
  • A link to the Beta program Registration
  • A badge to the Android Play Store
• For iOS
  • A badge to the Apple App Store
• A QR code

Elements Reference

iOS Link to Apple App Store

Android 2 step process To download the app:

1. Register your google store account in our beta program list
2. Download the app on the Google Play Store (with the download badge)

Store badges using the official ressources found here:

• https://play.google.com/intl/en_us/badges/
• https://developer.apple.com/app-store/marketing/guidelines/

QR Code A link to this page to recirculate to this page with your mobile

Header

App name

Footer

• Should link back to the design system DSM
• link to brand site
• the "feedback should link to the ios or android github issu trackers
• link to orange developpers

Design Examples

In order to design this page here are some examples to get inspired from:

• https://ware-app.webflow.io/
• https://www.spendee.com/
• https://www.kommgutheim.com/
• https://www.bigoven.com/our-apps
• https://soft-html-template.webflow.io/
• https://www.fitnessai.com/

[louismaximepiton]

Can the links be displayed in an Open-source project ? If yes, may you share those ? For iOS and Android users, do you want a redirection or only a page having this redirection link ? For desktop users, don't you want to display QR codes instead of links ? Since the links might be clickable but not that useful on desktop. For the optional part, we might be able to do the trick if the link is different between the stores.

[B3nz01d]

• The app links can be shared on the open source projects to allow user to install the app easilly.
• On a mobile the user should idealy be directly redirected to the corresponding store.
• a QR code is a very good idea
• the link to the store needs to be shown as on Android it is possible on the descktop to request the download on your mobile
• for the store country lets start with an initial implementation before taking this into account the android app store link is: https://play.google.com/apps/testing/com.orange.ods.app/

[B3nz01d]

an example of code that could help to build: https://github.com/danielgindi/app-redirect

[B3nz01d]

QR codes

About the QR code in this page, I think there should be only one QR code for all download recirculating to this same page. I can create this for you, but in order to create this QR code, do we know in advance the destination target for this page alraedy?

[B3nz01d]

Android Beta Store Specificity

Context

In the case of the demo app for android the app has been published in the beta store. In order to be in the beta store, you need to setup a google group dedicated to the users that have the rights to access the beta version of the app. To do so a user needs to go on the google group to register in the corresponding group. Once this is done, then the user will be able to view the app in the beta store.

Modification proposition

I propose to switch off the android auto-routing feature (keep it in the code with the apppropriate comment so that it can be reused by other developers) and propose a 2 step download process: To download the app:

1. Register your google store account in our beta program list

2. Download the app (with the download badge)

[B3nz01d]

Android Redirection

Tested on the following device and browsers:

• Huawei - chrome / mediatab - chrome
• Sony - chrome
• Samsung - native Samsung browser
• Pixel
  • chrome
  • firefox
  • opera
  • edge It works on all devices / browsers

[mccart77]

Developer.zip

Developer icon

[louismaximepiton]

Closed by #2146.