How to navigate the front-end?

• What is the front end?

• Side Navigation

• Page Menu

• Navigation bar

• User Menu

The front end is the publicly accessible website built with the g2g platform. This includes hubs for each of a Studio’s Universes with a page for each enabled feature. When they first visit the front end, users can register for an account. Registered universes can interact with a Universe through the front end.

The Side Navigation is the front end’s main navigation menu. It is a collapsible menu located on the left-hand side. When collapsed, the menu is a thin bar with a series of icons. The bar is separated into three sections.

The middle section of the collapsed menu has an icon for each Universe. Hovering over an icon will display the Universe’s submenu. Clicking on an icon will take you to that Universe’s home page.

Hovering over a Universe icon in the collapsed Side Navigation displays a submenu.

The Side Navigation can be expanded by clicking on the arrow icon at the top of the collapsed menu. Clicking on the same icon when the Side Navigation is expanded will collapse the menu.

The arrow icon that can expand or collapse the Side Navigation is highlighted in dark blue on the left.

When the Side Navigation is expanded, a Universe submenu can be accessed either by hovering over a Universe name or by clicking on the Universe name.

Here, a Universe submenu has been expanded by clicking on the Universe name.

Note: A Universe’s submenu can include off-site links, such as linking to a wiki or an e-commerce page.

The page menu is a horizontal menu at the top of all Studio or Universe pages. It sits below the header image.

A Universe’s page menu is made up of the same links as the Universe’s submenu in the Side Navigation. This includes links to feature pages, as well as possible off-site links.

A Studio’s page menu has links to each of its Universe’s home pages.

The page menu on a Universe’s home page is highlighted in dark blue.

Note: The landing page does not have a horizontal page menu.

The navigation bar is a static menu at the top of a G2G site. Central to the navigation bar is the search bar. Typing a keyword in the search bar and hitting enter will search for that keyword across all Universes.

When a registered user is logged in, their avatar and name can be found to the right of the search bar. Clicking on the user’s name or avatar will open the user menu.

The navigation bar is highlighted in dark blue.

Additional user tools are found on the right-hand side of the navigation bar. The user’s total number of G2G points is displayed next to the user’s name. Clicking on the number of points will open the Studio’s leaderboard.

Three icons to the right of the displayed G2G points are helpful shortcuts to the user’s profile page.

The gift icon in the navigation bar links to the “Rewards” page of the user’s profile.

Clicking the gift icon leads to the “Rewards” page. When a user is able to claim new rewards, the number of new rewards will appear at the bottom of the icon.

The envelope icon in the navigation bar links to the user’s inbox.

Clicking the envelope icon leads to the user’s inbox. When a user has unread messages, the number of unread messages will appear at the bottom of the icon.

The dialogue bubble icon in the navigation bar links to the user’s feed.

Clicking the dialogue bubble icon leads to the user’s feed. When a user has new notifications, the number of new notifications will appear at the bottom of the icon.

The user menu is a dropdown menu where users can find the settings page and their profile. A registered user can access the user menu by clicking on their avatar and name in the navigation bar.

An example of a button with the user’s avatar and name which opens the user menu is highlighted in dark blue.

From the user menu, users can access:

• Their profile, which includes their rewards, inbox, and interactions.

• The leaderboard, which displays where the user ranks relative to other users.

• The settings page, from which users can update their information and link other accounts.

• Cookie controls, where users can change their cookie settings.

• The logout button.