Context

Assets are other visual elements that don't fit categories such as colors, fonts, etc. These can be images or logos, for example.

You can find all the default assets for Kiosk in this Figma file and use them as a template.

Home screen image

Use the whole safe area in the top part of the screen to show any neat visuals but also a clear call to action like 'ORDER HERE'. Tests prove that an obvious call to action embedded in the home image makes Users approach the Kiosk and use the Kiosk App. The bottom part of the screen is reserved for the Order Type and language buttons. Remember: don't place image elements that can interfere with the interface in that area.

The home screen image can be static - JPG, but also an animation in GIF format.

Requirements:

• Image resolution: 1080x1920px
• Maximum file size: up to 1Mb for JPG, up to 30Mb for GIF
• Image format: JPG, GIF
• File name: home_image

PLEASE NOTE: the seemingly 'blank' rectangular element of 1080x520x has to be an integral part of the file you provide. We need that 'blank' space to introduce the interactive content (like you see below on the left):

Header image

Used at the top part of the menu page, above the subcategories navigation. You can use this 

area for marketing purposes or to present your Brand. 

Note that majority of kiosk models already feature your logo just above it, so it's recommended not to show the logo in the header image.

Requirements:

• Image resolution: 1080x280px
• Maximum file size: 1Mb
• Image format: PNG, JPG
• File name: header_image

Store closed image

Used as the home screen image when a store is closed. Best practice is to leave the middle area for at least 800x1080px clear.

Requirements:

• Image resolution: 1080x1920px
• Maximum file size: 1Mb
• Image format: PNG, JPG
• File name: venue_closed_image

Scan Instructions

The Scan Instruction image is displayed on the sign-in screen guiding Users on the precise action they should take. Users can easily comprehend the image and understand the scanning process, which gives a seamless and intuitive user experience. Recommended to have a circular image style.

Requirements:

• Image size: 660x660px
• Image format: PNG
• Filename: scan_instruction.png