The game will consist of 4 main screens: “Play”, “Shop”, “Bosses”, “Leaderboard” (detailled description of each screen below). For the scope of this competition, we are only asking for the design of the main screen “Play”, but we would of course love to keep working with you in a 1-to-1 project after the competition for the design of the remaining screens. In case you already have ideas for the other screens, feel free to attach sketches.
For each of the 4 screens:
At the top, we would always show an xp and coins bar (see prototype attached):
- On the right: the amount of J-coins the player has (up to 5 digits), with a “+” icon (which will lead to the shop to buy more coins)
- On the left: the XP bar. Please use all the remaining available space
At the bottom, we would show the navigation bar (icons corresponding to the 4 screens), with ideally below each icon the name of the screen (“Shop”, “Play”, “Bosses”, “Leaderboard”). Feel free to use different icons than those of the prototype, especially for "Boss" for which the current icon is not fitting
Detailled description of the screens (only the first one is in scope of the current competition):
1) Play - MOST IMPORTANT. This is where the player can progress in the game. The game will contain thousands of “levels”, with each level being typically a mere dialog-box containing text or questions that the artificial intelligence 7805j tells/asks to the player. To move to the next level, the player simply needs to click on the bubble or answer the question asked.
The screen should be structured roughly as follows (see prototype below):
- Top left: current level
- Top right:
a) button to skip the current level, with price in J-coins (see prototype)
b) Next to it, small button to choose level (opens a pop-up where player can select level he wants to go back to. Currently represented by the white button in the prototype below, but please use a fitting icon)
- Below this: Logo and name of the person speaking to the player (typically 7805j). Depending on who speaks, this can be on the left or on the right of the screen.
- Below this: Dialog-box with text/content of the level, with a little arrow at the top that points to the logo/name of the speaker (like in a message chat or comics book. Please make sure to include the arrow, which is not present in the current prototype). For the content of the box, please create a sample with some text and text buttons. The buttons may contain short or long texts, so please show an example for both (e.g., an answer choice could be "Yes", or "Yes, this is a long button that will need more than one line to be shown on the screen").
- When the player enters the wrong answer, a pop-up dialog box opens, with a text message and a confirmation button (and an optional text field where the player writes in). Please design this pop-up message as well
Other 3 screens not in scope for competition:
2) Shop. Here the player could spend real money to buy “J-coins” or other in-game services. Each purchase option would be represented by a rectangle (see “Clash Royale” for inspiration).
- The shop would have the following categories:
- Time-limited offers
- Collect daily bonus (free J-coins)
- Removal of ads
- Coins purchase
3) Bosses. As the player progresses, he will unlock “Bosses”, which are series of mini-games (e.g., “Tetris”, “Snake”). Each boss contains at least 6 levels. The bosses will be listed as rectangle stickers on the screen, with the following elements:
- Top left: small icon of the boss
- Right of the icon: name of the boss, with indication of how many levels of the boss the player has completed (e.g., “2/6”). If the player has completed all levels, show the sticker in green
When the player clicks on a box, the sticker should extend to allow the player to select the level. The extended area should contain:
- At the top: Six (or more) squares representing the six levels of the boss. Depending on whether the level is unlocked or not, the icon could be different, e.g.:
1) Check mark: level completed already
2) Open lock: level to be completed
3) Lock being hit by a hammer: currently opening the level
4) Glowing closed lock: level not unlocked yet but can be activated
5) Greyed out closed lock: level not unlocked and not available yet.
Highlight differently when a level is currently selected by the player
- Below: A short description of the level selected by the player
- Below: The reward for completing the box (XP and J-coins)
- Below: A button with some text, referring to the level selected. Make the button long-enough, as it can take different text depending on case, e.g.:
- “Start” (if level unlocked already)
- “Unlock (8h)” (if level needs to be unlocked)
- “7h59 | Accelerate 124 J-coins”
At the top of the screen, show a search bar to search for bosses by name
4) Leaderboard. Contains the following elements (see mockup below):
- At the top left: button to open a pop-up showing the list of achievements (no need to design the popup)
- At the top right: very small button to open the settings
- Below: key stats of player, and where he stands vs. global pool of players
- Below: All Facebook friends, ranked based on the level they reached. Highlight the bar that represents the player in a different color