Branding and User Interaction elements

Introduction

Fidesmo provides a set of graphical and textual branding elements so you can define the look and feel of your card application and services within the Fidesmo App’s user interface. These branding elements are designed to work either for standalone applications, or for services that are components of an overall solution. Your users will perceive your brand or company as the service supplier, while benefitting from the Fidesmo user interaction flows especially designed for our service delivery process.

Graphical elements

Logo

What it is

A simple image that identifies your company or your brand

Format

SVG, Scalable Vector Graphics. It is important that it is resolution-independent, because it is displayed in several places.

Where it is used

In the “Cardapps store” in the Fidesmo App, if you have published the recipe for your service.

In the list of installed applications in the Fidesmo App, when a user holds her Fidesmo Card to check her applications.

In the application screen, heading above the list of available services for the application.

In the screens showing how the service delivery process is progressing: confirmation (if required by the service), during interaction with the Fidesmo Card, in the screen showing the completion status of the service delivery process.

How to set it up

You can upload it from your application’s setting page, or directly using curl as in the example below (don't forget to use your app-id and app key)

cmd> curl -v -H "app_key:[your app key]" -X PUT "https://api.fidesmo.com/apps/[app-id]/logo" -H 'content-type: image/svg+xml' --data-binary @cthulhu_logo_green.svg

Feature Graphic

What it is

A large image (can be a photograph) that completes your company’s branding.

Format

JPEG or PNG bitmap. We require a resolution of 2560 x 1185 pixels to ensure adequate reproduction in high-end mobile phones.

Where it is used

In the application screen, as the background image of the upper part of the list of available services for the application.

As the background of the screens showing how the service delivery process is progressing: confirmation (if required by the service), during interaction with the Fidesmo Card, in the screen showing the completion status of the service delivery process.

How to set it up

You can upload it from your application’s setting page, or directly using curl, as with the logo before:

cmd> curl -v -H "app_key:[your app key]" -X PUT "https://api.fidesmo.com/apps/[app-id]/feature" -H 'content-type: image/png' --data-binary @ctulhu_feature.png

Textual elements

Application Name

What it is

A name that identifies your “application”: a group of services that are based on the same card application (you can read more here).

Format

A short text string.

Where it is used

In the “Cardapps store” in the Fidesmo App, if you have published the recipe for your service.

In the list of installed applications in the Fidesmo App, when a user holds her Fidesmo Card to check her applications

In the application screen, as the title heading the list of available services.

In the confirmation screen, as the provider of the service being requested.

How to set it up

In the Fidesmo Developer’s Portal, when you define an application. The Application Name can be modified.

App Description

What it is

A short description of the application. Like Service Descriptions, it is a multilanguage string, so the user will read the description in his/her phone's language. It may contain basic markdown elements like bold, emphasis or links.

Where it is used

In the application screen, the app description is shown above the list of available services for the application.

How to set it up

The app description is set using curl, as with the graphical elements above:

cmd> curl -v -H "content-type: application/json" -H "app_key:[your app key]" -X PUT "https://api.fidesmo.com/apps/[app-id]/description" -d '{ "name": "MIFARE Tutorial App", "description" : { "en": "Simple app implementing a counter on **MIFARE Classic** sectors, see [this tutorial](https://developer.fidesmo.com/tutorials/mifare-classic)", "es": "Sencilla app que implementa un contador sobre sectores **MIFARE Classic**, vea [este tutorial](https://developer.fidesmo.com/tutorials/mifare-classic)" }, "organization": { "name": "Fidesmo Developer Portal" }}}'

Service Title

What it is

A name that identifies each of the services provided by your application. For example, in a public transportation application, one service can be “top-up card” and a second service can be “check balance on card”.

Format

A short text string.

Where it is used

Once the user has selected an application, a list of clickable buttons appears, each button showing a service title.

A name that identifies each of the services provided by your application. For example, in a public transportation application, one service can be “top-up card” and a second service can be “check balance on card”.

How to set it up

The Service Title is defined as part of the Service Description. As explained in the link, a service description can be served as a Service Recipe, or it can be sent by the Service Provider servers.

Status Message

What it is

A short message that informs the user of the success or failure of the service delivery process.

Format

A text string.

Where it is used

At the end of the service delivery process.

How to set it up

The Status Message is served as a one of the parameters of the “Complete delivery of a service” endpoint of the Fidesmo API.

An example

In the screenshots above we have always used as an example the application developed in the MIFARE Classic tutorial. These are the elements used:

  • Application Name: MIFARE Tutorial App
  • Service Title: Ctulhu invocation
  • Status Message: CTULHU IS PLEASED. You have invoked Him XX times. The number of times is read from the card and incremented during the service delivery process.
  • Logo
  • Feature Graphic
  • App Description

    This is how the app description in English and Spanish for our MIFARE Classic tutorial looks like. It uses markdown to emphasize MIFARE Classic and a link to the tutorial:

    {
      "name": "MIFARE Tutorial App",
      "description" : { 
        "en": "Simple app implementing a counter on **MIFARE Classic** sectors, see [this tutorial](https://developer.fidesmo.com/tutorials/mifare-classic)",
        "es": "Sencilla app que implementa un contador sobre sectores **MIFARE Classic**, vea [este tutorial](https://developer.fidesmo.com/tutorials/mifare-classic)"
      }, 
      "organization": { "name": "Fidesmo Developer Portal" }
    }