In this guide, we will empower you with the knowledge and skills to customize and manage your branded app’s home screen configuration. Following your app on-boarding you will have the tools to effectively modify and manage your apps home screen tiles. Whether you want to update existing tiles, add new tiles or even completely re-order and re-design your home screen layout, this comprehensive guide will provide an overview of all the key functionalities at your disposal.
Some of the most important benefits your app provides are:
- Member Experience Continuity
- Brand Image Continuity
- Contextualized Communication
To maximize your ability to build on these benefits, MiGym allows you to fully configure your app’s home screen layout. You can customize the graphics and appearance of your apps home screen in order to achieve a unique customer touch point, that is entirely on brand and in sync with your member experience! Colors, backgrounds, icons, tiles, tile sizes & positioning, captions and dynamic text is all configurable on the home screen tab of your MiGym admin portal.
Overview
MiGym apps use a tile-based home screen to provide contextual information and navigation to your users. The tile designs use 3 columns of square or rectangular tiles and an unlimited number of rows that users can scroll down to see any content flowing beyond the height of the screen. Each tile has a specific function or purpose, and some may require further input from you in order to meet your needs. A new tile will have the classic MiGym default appearance, but can be customized extensively to meet your brand image.
Getting Started
Log into the MiGym admin portal at https://admin.migym.com , using your MiGym admin user credentials.
Go to the home screen tab which is found along the top of the admin portal
Your apps existing home screen design will appear on the left side of the page, and the details for the selected tile will appear on the right side of the page.
Set your active home screen to ‘Draft Home Screen’ using the drop-down menu. This will allow you to make changes to your home screen design without affecting your users live app experience.
*OPTIONAL* Import tiles to draft using the import tiles button above your design.
If you ever need to reset your home screen design to the default layout, the above option can be used to restore the default MiGym tile set and design for your app.
Tiles
To add new tiles to your home screen click the add new tile button above your home screen layout
This will open a list of the available tiles that can be added to your home screen with a description of their purpose and functionality.
Favorites - The favorites tile displays the next upcoming class from the users list of favorite sessions, instructors, or locations. The default size for this tile is 3 columns wide to accommodate the space required for the dynamic middle caption
YouTube - The YouTube tile can be linked to your own YouTube account and will take the user to this via the in-app browser.
Contact - The contact tile will open your apps contact and hours page for your users to view facility contact and location details
My Schedule+ - The My Schedule+ tile will display as a standard schedule tile for new users.
Once a user logs in and set up their favorites, this tile will show the user their favorite sessions by default.
The default size for this tile is 3 columns wide to accommodate the space required for the dynamic middle caption.
Pages CMS - The Pages CMS tile will display a blog style list of your articles categorized and created in your apps news & info feature.
Instagram - The Instagram tile can be linked to your own Instagram page and will take users to this via the in-app browser.
Self Service/My Account - The Self Service/ My Account tile can be linked to your self-service URL which will take users to your self-service log in page via the in-app browser.
Submit Feedback - The submit feedback tile will open the feedback form which will allow your users to submit opinions, suggestions, feedback, and support requests via your app
Notifications - The notifications tile is linked to your app’s notifications feature. This tile will display a list of all notification received by the user within the last 30 days. The tile will display a preview of the most recent unread notification received by the user. The default size for this tile is 3 columns wide to accommodate the space required for the dynamic middle caption.
Twitter - The Twitter tile can be linked to your Twitter account and will take the user to this via the in-app browser.
Social Checkin - The Social Checkin tile allows users to check into your facility using their own social media accounts. This tile can also be used to share the facility details via other mobile messaging services.
Switch Locations - The Switch Locations tile is for use with multi location facilities whose members can visit multiple locations. This will allow users to switch between the location on the app allowing them to view multiple location schedules more easily.
Logo - The Logo tile will display your company’s logo. This tile will be linked to your company website URL and when clicked will take the user to this via the in-app browser.
Homescreen Gallery - The Homescreen Gallery tile can be used to display a selection of images in a scrolling gallery format.
Recommended tile size for this tile is 3 columns by 2 rows and the images for this should be about 600px high by 900px wide.
It is important to match the image dimensions to the size of the tile.
This tile does not support custom tile design and can only display uploaded images.
Services - The Service tile will open your apps services list which provides users a list of quick links and contact details for additional services or partners listed under your services feature.
Announcements - The announcement tile will open your apps announcements feature. This will show users a rotating preview of your announcement images and allow them to click any of these that are linked to a specific URL. This will take the user to this via the in-app browser. The default size for this tile is 3 columns wide to accommodate the space required for the dynamic middle caption.
Image - The image tile can be used to display a single image in your apps home screen. This tile cannot be linked to any other app features or website URLS.
App Link - The App Link tile can be used to navigate your clients to another app if required. If the user has the app installed the app will be opened when this tile is selected. If the user does not have the app installed, they will be navigated to the relevant app store to complete the download.
Facebook - The Facebook tile can be linked to your Facebook account and will take the user to this via the in-app browser.
Schedule - The schedule tile will show the user the next upcoming sessions or events on the facilities schedule.
The default size for this tile is 3 columns wide to accommodate the space required for the dynamic middle caption.
New Weblink - The weblink tile can be linked to any website URL and when clicked will take users to this via the in-app browser.
Trial Pass - The Trial Pass tile will open the free trial feature which allows users to register for your facilities free trial option by completing a submission form providing their details and agreeing to your terms and conditions. The free trial will need to be created and managed externally on your booking system.
Membership Card - The membership card tile will open the membership card feature which is used to display the user’s membership barcode for use with scanning at your facilities check in. This can be set to auto generate or be added manually according to your app’s settings.
Articles - The Articles tile will open an article or set of articles within your app’s news & info feature.
Tile Layouts
Tiles can be moved and resized within the 3 column grid system.
To move a tile, drag and drop it to the location you want it in the home screen. It will push any overlapping tiles up or down to make room the tile you are moving.
To resize a tile, select the tile and hover over the bottom right corner of the tile until an anchor point arrow appears. Drag the tile to the desired size and release the corner.
To remove a tile, once the tile is selected click the X symbol in the top right corner of the tile.
Tile Icons and Backgrounds
MiGym provides a set of default tile icons that appear for each type of tile. These icons default to the color set for your app design color scheme. The default background color for your tiles is also predetermined by the color set for your app design color scheme. Your app design color scheme is set up and agreed as part of the app design process during the initial app configuration.
Click a tile to review the tiles properties on the right-hand side of the page.
To move or resize the icon image, click the icon image on the tile and an orange box will appear around the border.
You can then resize the icon image by dragging any of the anchor points. You can move the icon image within the tile by clicking and holding the icon image and dragging it to the desired location.
Once you have selected a tile you can adjust the design properties on the right-hand side.
- Tile Icon: Click choose file button to change the tile icon by uploading a new image. Images with transparent background and minimal empty border work best here as this will allow you to resize the image to the maximum size within the tile. Click the trash icon to remove the icon from the tile completely. Tiles that include dynamic text content will anchor the icon to the bottom right of the tile and appear cropped slightly to match the original tile design. If you wish to keep the default icons but wish to change the color of these, please contact the MiGym support team and provide the desired hexadecimal color value.
- Background color: Set the background color for the tile. The color picker includes a transparency slider the set the opacity of the tiles background color.
- Background image: You can use this setting to set the background of the tile as an image instead of a color. The image will be resized without affecting the aspect ratio. Please take note of the recommended dimension for each tile. Click the trash icon to remove the background image from the tile completely.
- Border: You can add a border to your app tiles by ticking the enable border box and selecting a color using the color picker tool. Below this you can set the width of the border added and can choose to round the corners of the tile if you wish.
Tile Labels and Captions
Most tiles include options to add text to some of the three following area (Top Caption, Middle Caption, Bottom Caption)
The tile caption settings for the tile can be found on the right hand side when a tile is selected underneath the tile icon and background design settings.
Most tiles will include a default text option in some or all of the caption areas of the tile.
Dynamic Text Content
Tiles that include the {dynamic_text} include :
- Announcements tile
- Schedule Tile
- Schedule+ Tile
- Favorites Tile
- Notifications Tile
These tiles all include the dynamic caption function which will generate text based on the context and usage of the app. This will be shown as {dynamic_text} in the caption preview.
An example of the Dynamic Text is the My schedule+ tile will default to schedule for new users and will open to display the facilities full schedule, but once a client has set up their favorites this text will change to favorites and will open to display the facility schedule based on the users favorites settings.
You can check the dynamic text settings for each tile in the tile description at the top of the tile settings on the right hand side.
For example here is the description for the Announcements tile
Dynamic captions can only be supported by tiles of at least 2 columns wide.
Customizing Captions
- Text - This field is where you can enter the custom text you want to appear in this caption space.
- Alignment - This option allows you to choose the alignment of the caption. You can choose left justified, centralized or right justified.
- Font Color- The option allows you to use the color picker tool to select the color for the caption.
- Font - Use this drop-down field to select the font for this caption. (Default, Verdana, Sans Serif)
- Text Style - Use this drop-down field to select the text style for the caption. (Light, normal, medium, bold, condensed, condensed bold, black)
- Additional Styles - Use this drop-down field to select some additional text styles for this caption. (Oblique, italic, normal)
- Text Size - Use this field to select the text size for the caption. (8px -30px)
- Background - Use this color picker field to add a background color to appear behind the caption. This color picker tool includes the opacity slider for the background. These are set to transparent by default.
- Padding - Use this field to adjust the vertical padding size behind the caption.
- Margin - Use this field to adjust the margin size around the caption background.
Additional App Design Settings
Above your app home screen layout your will see a few additional settings to edit for your app tiles and app background.
- Tile Padding This drop-down field will control the padding space between your app’s tiles.
- Background Color This color picker field will control the background color for your app that appears behind the app’s tiles and other areas.
- Background Image- This option allows you to upload an image to appear as your apps background instead of a single color. You can use the trash icon to delete this image if required.
Designing custom tiles
The MiGym platform can accommodate completely custom home screen designs. You can work with our designer to create a fully custom home screen design for your app, export your design assets and manage your tile design and content yourself independently.
Tile sizes and setup
The tile designs use 3 columns of square or rectangular tiles. Square tiles are usually 1:1 ratio (or optionally 2:2 or 3:3), and rectangle tiles spanning two or three columns are usually 1:2 and 1:3 ratio (especially those tiles with dynamic content), with additional allowance for the padding between tiles. As a general rule, we suggest you design the tiles using the standard 375pt mobile device width at @1x for vector tools like Sketch or Illustrator, with each tile 120pt x 120pt and 5pt gutter padding (2.5pt on the edges). Alternatively, 125pt tiles with 0pt gutter are a common starting point for MiGym custom tile designs. A custom background color behind the tiles is also available.
Tile Padding
Tile padding is a screen-wide setting from 0 to 25pts @2x pixels per point. 1:2 tiles should add enough width to cover padding once, while 1:3 tiles should include the width of twice the padding.
Example A) 1:2 tile with 5pt of tile padding would be 300px tall by 610px wide.
Example B) 1:3 tile with 0px of tile padding would be 300px tall by 900px wide.
Tile Background Images
Tile background images will be centered, resized to fill the tile but maintain their aspect ratio. You can achieve a background image that spans multiple tiles by carefully slicing to the above noted pixel specs and gutter padding.
Captions
Custom designed Home Screens often incorporate centered captions, which can be achieved with a combination of the alignment setting along with the right amount of caption padding and margin. Note that the margin will increase the space around the entire caption and caption background color, while the padding will increase the space between the caption and the edge of the caption background color.
In order to accommodate dynamic middle captions into your design (schedules, announcements, notifications), the width of the middle caption is set to 1 column width less than the width of the tile, so a 3 column wide tile will have a 2 column wide middle caption, and a 2 column wide tile will have a 1 column wide middle caption. Single column width tiles cannot accommodate dynamic text in middle captions.
Custom Home Screen Design Example:
Comments
0 comments