Program Imagery and Character Recommendations

Imagery and language work together within a program to create a unique experience that gets a user's attention, conveys a message, and elicits an emotional response. We recommend using these elements to help users understand their progress within a program as an individual, a group, and part of a community.

The following recommendations help display images appropriately and eliminate word wrapping and truncation. In a customized program, sizing and character limits can be adjusted to fit your design.

Note: Blocks use Roboto as the default font. Other supported fonts vary based on browser, operating system, and theme.

Blocks

Element	Recommended Size	Use
Imagery
Badge and level icon	400x400px (max file size of 500KB)	Badges and level icons display in At a Glance, the trophy case, and the mission detail view.
User/Profile image	400x400px (max file size of 500KB) Supports PNG, JPEG, and GIF when added via Nitro Studio. Supports PNG and JPEG when added via the block.	The user image displays in the user's profile, leaderboards, and recognition. Learn more User images are pulled from: 1 - The image set in the userPhotoUrl user preference or 2 - The user's initials (when a name is set) or 3 - The default profile icon
Mission background image and Default Featured Mission image	2000x2000px (max file size of 1MB) Flexible, center-orientated or forgiving crop. Show me an example Focal point of image should be centered/within 1/3 of the center of the frame. Show me an example Images with an offset focal point can work, but the crop must be tested across all devices. Show me an example Images with diagrams, text, and graphics are to be avoided if possible. Show me an example	The background image displays in the mission tile. If no background image is set, a gradient displays that can be styled to your brand standards. If you have no featured missions available, a default image and description can be set to display in the Featured section until a mission becomes available.
Point category icons	60x60px (max size 500KB) Use a minimalistic design in a color that displays best on mission tiles with background images and without. In most cases, a white icon is preferred unless you're using very light colors in the gradient background.	Icons display in place of the point category name in mission tiles, leaderboards, etc. The point category order is: 1 - The point category icon or 2 - The short name or 3 - The full name
Group image	400x400px (max file size of 500KB)	A personalized group image displays with the group name in leaderboards. The image is set in the group's properties.
Recognition category icons	400x400px	Category icons display in the recognition detail.
Text Elements
Mission name and description	Mission name - 50 characters or less Mission description - 250 characters or less	Names and descriptions display on the mission tile. The mission name displays in the trophy case. Names and descriptions tell users about a mission and what they should do to complete it. Short, but informative descriptions are recommended.
Level name and description	Level name - 15 characters or less Level description - 255 characters or less	Level names indicate how users are progressing through the program. Descriptions only appear to administrators in Nitro Studio.
Rule descriptions	40 characters or less	Rule descriptions describe the task the user must complete.
Point category name	10 characters or less	The name displays when no point category icon or short name are set.
Point category short name	3 characters or less	The short name displays when no point category icon is set.
Quiz questions and answers	Quiz questions - 100 characters or less Quiz answers - 4 or fewer answers with 100 characters or less	Quiz questions and answers display best when using short, descriptive text. If your answers are longer, consider having fewer answers. For example, if your answers have 15 characters, you can have 5 answers. If your answers have 150 characters, you can have 3 answers.
User name		A user name personalizes the greeting, leaderboard, and other areas in the program.

Web Components and Bunchball Go

Element	Recommended Size	Use
Imagery
Badge, mission icon, level icon	400x400px (max file size of 500KB)	Missions web component - Mission icons display with the mission description. If no mission icon is set, a default is used (show me). Badges display in the detail view rewards section. Trophy case web component - Badges and level icons display with the mission description. Events web component - Badges, mission icons, and level icons display with the action phrase when a user completes a mission or changes levels. The events feed includes the action phrase plus an image. The image order is 1) the badge image or 2) the mission icon or 3) the default mission icon. When the event is a level change, the web component uses the level icon and action phrase unless your configuration does not include them. Learn more Typically, the badge is used as the mission image. If no badge is awarded, a mission icon is used. A mission icon can be specific to a mission, be used for a group of missions, or be one image that is used as the default for all non-badge missions.
User/Profile image	400x400px (max file size of 500KB) Supports PNG, JPEG, and GIF when added via Nitro Studio. Supports PNG and JPEG when added via the Profile web component.	The user image displays in the user's profile, leaderboards, and recognition. Learn more For the Profile and Leadersweb components, user images are pulled from: 1 - The image set in the userPhotoUrl user preference or 2 - The level image (which will change as the user moves through levels) or 3 - The default profile icon
Group image	400x400px (max file size of 500KB)	Leaders web component - A personalized group image displays with the group name in leaderboards. The image is set in the group's properties.
Recognition category icons	400x400px	Category icons display with the category's action phrases.
Quiz banner/Intro image	600x150px Although the height can be any size, using an image of 150px or less keeps the quiz's Get Started! button above the fold.	Quiz web component - A banner image displays between the quiz name and description.
Text Elements
Mission name and description	Mission name - 50 characters or less Mission description - 250 characters or less	Missions and Trophy Case web components - Names and descriptions tell users about a mission and what they should do to complete it. Short, but informative descriptions are recommended.
Level name and description	Level name - 15 characters or less Level description - 255 characters or less	Profile web component - Level names indicate how users are progressing through the program. Descriptions only appear to administrators in Nitro Studio.
Action phrases	200 characters or less	Events and Recognition web components - Action phrases describe an activity a user has completed. Use the mission Action Phrase, level Action phrase, and recognition Community/Giver/Recipient Phrase fields to describe the activity that occurred.
Rule descriptions	40 characters or less	Missions web component - Descriptions describe the task the user must complete.
Point category name	10 characters or less	Profile web component - Displays the point category name to show progress in the program.
User name		Profile web component - A user name personalizes the user's profile. The userId is used if no name preference is set. Events web component - When you use tokens within an action phrase, the user's name (first, last, or initial) is used to personalize the activity.
Web component titles	30 characters or less	All web components - By default web component titles display in all caps. Quiz web component - The quiz's name appears as the web component title.
Bunchball Go Elements
Banner	600x338px (max file size of 500MB)	A banner image displays on the Home page introducing your program or communicating program updates.
Content link images	100x100px (responsive design sizes at a range between 70 to 93px)	The images to display with static content links.
Header image	120x40px	The image to display as your company or program logo.
Program icon	512x512px Must be a PNG	An icon for your program that users will see on their mobile device's home screen when Bunchball Go runs as a Progressive Web Application.