Designing Background Images For Your CityGro Kiosk

Designing Background Images

It's easy to brand your kiosk to your business by adding background images. Here's what you need to know:

• Image Size - 1024px X 768px (or 2048px X 1536px for retina iPads)
  
  
• *Be aware of page overlays (included in the PSD template below). Page overlays, including the number pad and go/back buttons, are added automatically by the CityGro app. You can design behind them but don't save your design with any of the overlays showing.
  
  
  
  Here is an example with a background added:
  
  
  
  Most inner pages have next/back buttons as shown below:
  
  
  
  

Below are descriptions of common background images needed for the standard kiosk flow.

The Welcome Page 

The Welcome Page is the first page customers will see and needs to drive action. Here are some tips for creating a successful Welcome Page.

• Use Your Logo and Brand: Your Welcome Page should represent your company image. Design your kiosk using your company's logo and colors as if it were an extension of your brand.
  
  
• Offer a Clear Incentive to Check-in: Give customers a reason to participate by providing a clear incentive to check in. Make sure the incentive can be read quickly and easily by using large letters, high contrast, and by using less words. 
  
  
• Highlight the Benefits: In addition to providing clear incentives, make sure the benefit for joining is very obvious. 
    
• Keep it Simple: The average customer only looks at the kiosk for a moment. Be cautious not to put too much information on the page and make sure to keep your design simple.  
  
  
• Use Rotating Images: Bring some attention to your kiosk by rotating through several background images. Please note: Rotating through completely different background images can cause confusion and be hard to read. Try changing out minor pieces of the background like products and colors but keep the layout and the text the same. 
  

*The keyboards in the examples above do not need to be added in the background, they are overlays from the CityGro Kiosk Application.

Splash Pages

Splash pages typically pop up for 2-3 seconds while the kiosk is loading or transitioning to a new page. It creates a great opportunity to advertise upcoming events, ongoing promotions, or create awareness. 

• Don't Overdue It: While you can use as many Splash Pages as you'd like, be careful not to overdue it. Splash Pages fit very natural after the Welcome Page as well as at the end of the page flow. Adding too many Splash Pages may come across as spammy.
  
  
• Use "Loading" Phrases: Add words such as "Loading..." or "Retrieving Data..." to your Splash Pages help customers know that they have more coming. Adding these phrases will also help justify the need for the screen and helps it feel more natural. 
  
  
• Use Templates to Change Splash Screens Out Regularly: Rather than creating new Splash Pages from scratch, create a simple template that can be modified easily. Now you can change the screen out for holidays, upcoming promotions, news, events, etc. Please note: If you change your Splash Page out regularly, make sure you set reminders to change the page back when it is no longer applicable. Keep a generic Splash Page on hand that can be loaded in at any time. 

Background Images for Data Pages, Selection Pages, Offers Pages, etc. 

Many of the inner pages of the kiosk will need some basic background images. 

• Don't Block Your Logo: Each kiosk page has overlays in different positions. To make sure you never block your logo, you will want to save different versions of your background image with your logo in the top left, top middle, and bottom middle. 
  
  
• Keep It Simple: Busy backgrounds make the overlay hard to read. Use simple backgrounds without images to avoid confusion. 

Thank You Page 

The Thank You Page is another use of a Splash Page. This page helps complete the process and lets your customers know it is ok to walk away. It's a great place to say what has been done, add next steps, or simply say, "thanks for stopping by!"