SCALAR offers a limited customization of the Traveler App. To get the app customized, please choose all elements to adapt from the options below and then provide the Customer Success Manager with the required branding material as detailed for each element.
Theme (color palette) #
The dominant brand color of the app can be customized, for example on the Action buttons. The color should be provided to ZF in Hex code format (e.g. #0000FF). If you have a digital graphic chart or other marketing material, please do not hesitate to share a link or pdf with ZF.
App icons #
The customization options vary based on the operating system (iOS and android).
Details | Example |
Launcher icon The launcher icon is the miniature icons displayed on a user’s home screen or app drawer. – Squared – Foreground: .svg image – Background: solid color (provide Hex code) or .svg if gradient color.
NOTE:
The UX team will derive all needed variations for iOS launcher icons. | |
(Android) Push notification icon for the status bar Push notifications are displayed in different instances of the booking flow. – Format .svg – White or any solid color – Transparent background | |
(optional) Custom vehicle icon displayed on the map. Color restrictions might apply. – Format .svg and .pdf – 24×42 px for car – 24×50 px for van |
Splash screen #
Technical details | Example |
---|---|
The splash screen is displayed every time the user starts the app.Option A: Solid background Foreground: logo – Format .svg – White or colored if it matches the background of the splash screen – Transparent background Background: solid color (provide Hex code) or .svg if gradient color | |
Option B: Gradient background Foreground (logo): – Format .svg – White or colored if it matches the background of the splash screen Background: solid colors (provide Hex code) | |
Option C: Image background Foreground (logo): – Format .svg – White or colored if it matches the background of the splash screen Background – High resolution image (.png or .pdf) |
Welcome screen #
Technical details | Example |
---|---|
The Welcome screen is displayed after the Splash screen, when the user starts the app, if the traveler is not logged in or is not registered yet. Title – “Welcome to the “name” Traveler App“ – The example has 34 characters, for reference of the text length Description – “Your transport service for “city name”. Book a ride, track your vehicle coming to pickup and your arrival time to travel serenely. – ”The example with 131 characters, for reference of the text length Illustration – Format .svg and .pdf – 200W x 150H px |
About and Help screens #
Technical details | Example About | Example Help |
---|---|---|
In the Menu screen, the user can find the About and Help pages of the service provider. The two web pages are hosted by the customer. Full ownership and immediate access allows you to be flexible and independent whenever content needs to be updated. Requirements for each: – Create a mobile-friendly web page. – Provide the link (URL). |
Only one link per section (About and Help) is supported, possible translated versions should be hosted in the same link, i.e. the should access the link and be able to change the language directly in the page, for example by having a language selection drop down.
(optional) Android store banner #
Technical details | Example |
---|---|
The banner is visible in the web Google Play store. (when the user goes in the Google Play store from the mobile app they only see the launcher icon). – Format .png – 1024W x 500H px |
(optional) Edge case screens #
By default, the app applies the default ZF designs with a color palette derived from the primary color. It is however possible to provide your own designs for the images, but it is not possible to change the text. Note that the ZF’s default designs are updated regularly.
Technical details | Out of service hours | Service not available |
---|---|---|
Edge cases: – Out of service hours – Service not available – No Internet connection – Generic error – Pending traveler – Blocked traveler – New version of the app For each image: – Format .svg and .pdf – 200W x 150H px | Service is not available at the moment. You can book a ride only during service hours. | We cannot provide this ride. Please select origin and destination within the service area. |
No Internet connection | Generic error | Pending traveler |
The connection to the network is impossible. Please check the status of your connection or again in a few minutes. | Something went wrong. Sorry, we are having some technical issues. Please try again later. | Thank you for registering. You are currently on the waiting list. You will be informed as soon as you will be able to use our services. |
Suspended traveler | New version of the app | |
Your account had been suspended. For more information please contact us. | The current version of this application is no longer supported. For a better user experience, please upgrade this app. |
Customizable wording #
It is also possible to customize the wording of some of the screens. For example:
- Service hours (long and short versions) displayed in Home, Scheduling, and Outside of service hours screens
- Pending screen message, if waiting list is activated before launch (optional)
These can be further discussed at the start of the project.