Challenge Summary
Welcome to the Umbrella City Builder Game - Challenge #1 design challenge.
This is an employee-facing game that will be viewed on desktop and mobile devices. This challenge covers designing desktop views, but the design should translate well to responsive design principles. The game is a light hearted take on the classic city builder game however it becomes an analog to building a modern IT ecosystems and it will serve as a corporate IT training tool.
In this challenge we will design the framework for the game. In the next challenge, we will start work on the more complex game illustrations and related graphics (city, neighborhoods, blocks, level / leaderboard related icons, etc).
Good luck on this challenge!
Round 1
Submit your initial design concepts storyboards for the Checkpoint:
1. Game Scenario / Solution Selection Screen
4. Game Solution / Feedback Screen - vC - SUCCESS
5. Leaderboard Screen
- Notes.jpg: Please include any comments about your design for the Client.
- Feel free to add additional views showing alternate states (drop select, hover states, etc).
- Make sure all pages have a logical flow / Use correct file numbering (01, 02, 03)
Round 2
Your final storyboard designs, based on the provided R1 winning design concept(s) / PSD(s), with all Checkpoint Feedback implemented.
1. Game Scenario / Solution Selection Screen
2. Game Solution / Feedback Screen - vA - FAIL
3. Game Solution / Feedback Screen - vB - PASS
4. Game Solution / Feedback Screen - vC - SUCCESS
5. Leaderboard Screen
6. Rules Screen
- Notes.jpg: Please include any comments about your design for the Client.
- Feel free to add additional views showing alternate states (drop select, hover states, etc).
- Make sure all pages have a logical flow / Use correct file numbering (01, 02, 03)
NEXT CHALLENGE / High Level Game Overview:
This will be a game built with more than one challenge. The main concept of the game will be players working to revitalize a city. The following notes are only meant to help you understand the game - The items listed here are NOT IN SCOPE FOR THIS CHALLENGE BUT WILL BE PART OF THE NEXT CHALLENGE!
- The intro screen will show a large city with a grid of neighborhoods (divided into city blocks) overlaid on it.
- A player will select a new neighborhood and complete a quiz for each of the four blocks in that neighborhood. His “budget” for revitalization will be related to success on the quiz and this will success will allow him to progress through neighborhoods.
- In the next challenge, we will start work on these more complex game illustrations and related graphics (city, neighborhoods, blocks, level / leaderboard related icons, etc)
Design Considerations:
Please:
- Make sure to logically group all PSD source file layers AND logically label both your individual layers and groups.
- Make sure your style guide matches your design
- Remember that this is responsive / for all device sizes, so use module design and good tap target sizes for tappable links.
Please take a look at this article on best practices for responsive web design: http://www.incomediary.com/best-practices-responsible-responsive-web-design
This will be a responsive website, so think in terms of content “modules”, which can easily be reorganized on the page when viewed on mobile devices. Also, see notes below (“design size”) on the requirements for a 3-column grid layout.
Included Assets:
- PSD Template (Project Template.PSD)
Colors Allowed:
In addition to black, white, and (any shade of) gray, you may use any of these colors, listed below.
Purple (HEX=B1*05*9D)
Orange (HEX=FF*6D*22)
Green (HEX=00*AF*3F)
Red (HEX=D5*2B*1E)
Blue (HEX=00*A1*DE)
Dark Green (HEX=27*5E*37)
Design Size:
YOU CAN USE THE PROVIDED PSD TEMPLATE FOR YOUR SOURCE FILE (Project Template.PSD). If you need the screen to be longer than the template allows, you may create your own PSD file - so long as the template guideline dimensions remain the same.
TEMPLATE NOTES:
Your PSD must be 1270 pixels wide, with all content areas -- header, main content, footer and legal sections -- living within a centered area that is 1170px wide (so there will be 50px on either side of this main design area, where we can see what your screen background will look like).
Note that the 1170px design framework is built to be responsive (ie reorganize itself to work on any size device) and it consists of three (3) columns at 380px each, with 15px of padding on either side of the center column. You may design elements that take up the space from one, two or all three columns, so long as they work within this responsive framework.
Height of the screen is open to the designer (no restrictions).
Please comment in the forums if you have any questions about the design size requirements!
Required Screens:
#1: Game Scenario / Solution Selection Screen
HEADER SECTION
GAME LOGO
- Please create a logo for the game, using the name “City Builder”
NAVIGATION
- Menu items are: Play | Leaderboard | Rules | Support. Please make sure to show the correct menu item as “active” for each of the required screens.
MAIN CONTENT AREA
PRIMARY REQUIRED CONTENT
This area will be where the quiz portion of the game takes place. For this screen show the following content (organized however you see fit):
- BLOCK: The player will see a thumbnail-sized icon related to his current neighborhood / block in the game (shown as a square placeholder for the thumbnail-sized icon here), along with a section name (Use “Acme Neighborhood | Acme Block”) and a short sentence of lorem subtext under the name.
- SCENARIO: This is the scenario which the player must consider and then select a related solution for - use “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec orci sem. Suspendisse vel sapien nec justo facilisis volutpat eu nec turpis. Suspendisse mollis enim volutpat augue vehicula elementum?”
- SOLUTIONS (3): There will be three (3) solutions for the player to choose from. Each one should be in it’s own container and the entire container will be selectable. Use 4 sentences of lorem ipsum for each solution and show that the user has selected one of the solutions.
- ACTIONS: Show some buttons for: go home / cancel, or submit solution.
SECONDARY REQUIRED CONTENT
These secondary elements must also be present on the screen:
- PLAYER BADGE & STATS MODULE
- You are free to organize these elements in any way you like, so long as all content is included:
- BADGE: The player will see an “badge” related to his current status/level in the game (shown as a square placeholder for the thumbnail-sized icon here), the related text label for his current status/level (shown as “City Janitor”), his own name (shown as “Jack Blacklongnamus”), and leaderboard status (placement number on the leaderboard leaderboard).
- STATS: The player will see his game stats, including: Budget (shown as “$xxx,xxx), Revitalization (shown as “6 Blocks in 2 Neighborhoods”)
FOOTER SECTION
This will be the main footer block, which contains the following content:
- Corporate logo placeholder
- “Copyright © 2016 UMBRELLA All rights reserved. Privacy Statement | Security Statement | Terms of Use” (where the text items after ‘all rights reserved” are displayed as text links)
#2: Game Solution / Feedback Screen - vA - FAIL
This screen assumes that the player has selected a solution and now sees the results and feedback, based on his selected solution. In this case, the user has failed to select an acceptable solution. The header, footer, and secondary content elements remain the same for this screen.
SOLUTION FEEDBACK
For this screen show the following content:
- SCENARIO: This is the same scenario as seen on the previous screen. The player still sees it here, so that he can review it against his selection and the related feedback.
- SOLUTIONS (3): These are the same solutions the player saw on the previous screen, only now it is visibly obvious which answer the player selected (some sort of highlight state on one of the answers).
- VISIBLE FEEDBACK ON SELECTED SOLUTION: There should be some visible solution indicator on the selected solution, so the user knows if his solution was: a) the best solution, b) an acceptable solution, or c) an incorrect / unacceptable answer. For this case, show the user selected an incorrect / unacceptable solution (fail).
- RESULT: The user has to change his answer in order to pass this level BUT he will lose some budget when he does so. Show some element which calls this out for the user - such as “Please select a different solution in order to complete this level. However, you will lose some budget for doing so.”
- ACTIONS: Show some buttons for: go home / cancel, or submit new solution (note: submit option will be inactive until user selects a different answer!)
#3: Game Solution / Feedback Screen - vB - PASS
This screen assumes that the player has selected a solution and now sees the results and feedback, based on his selected solution. In this case, the user has selected an acceptable solution. The header, footer, and secondary content elements remain the same for this screen.
SOLUTION FEEDBACK
For this screen show the following content:
- SCENARIO: This is the same scenario as seen on the previous screen. The player still sees it here, so that he can review it against his selection and the related feedback.
- MY SOLUTION: This is the solution the player selected on the previous screen. (note: we don’t show the other solutions, when the user has not failed!)
- VISIBLE FEEDBACK ON SELECTED SOLUTION: There should be some visible solution indicator on the selected solution, so the user knows if his solution was: a) the best solution, b) an acceptable solution, or c) an incorrect / unacceptable answer. For this case, show the user selected an acceptable solution (orange).
- RESULT: The user has lost some budget due to his need to re-select a solution. Show some sort of notice around this, like “Your solution is acceptable, but you have lost $xx,xxx..”
- OPTION: You can re-take this level, but it will cost you $xx,xxx”
- ACTIONS: Show some buttons for: go home, retake this level, or continue to the next block / scenario.
#4: Game Solution / Feedback Screen - vC - SUCCESS
This screen assumes that the player has selected a solution and now sees the results and feedback, based on his selected solution. In this case, the user has selected the best possible solution. The header, footer, and secondary content elements remain the same for this screen.
SOLUTION FEEDBACK
For this screen show the following content:
- SCENARIO: This is the same scenario as seen on the previous screen. The player still sees it here, so that he can review it against his selection and the related feedback.
- MY SOLUTION: This is the solution the player selected on the previous screen.
- VISIBLE FEEDBACK ON SELECTED SOLUTION: There should be some visible solution indicator ON the selected solution, so the user knows if his solution was: the best solution, an acceptable solution, or an incorrect / unacceptable answer. For this case, show the player selected the best possible solution.
- ANSWER FEEDBACK: When the player has selected the best solution, he will see an additional feedback element which congratulates him on his success and also contains 2-3 sentences of lorem ipsum explaining why this solution is awesome. He will also see an increase in his budget, so show some element which highlights this budget increase. Show some sort of notice around this, like “Awesome, you have gained $xx,xxx!”
- ACTIONS: Show some buttons for: go home, or continue to the next block / scenario.
#5: Leaderboard Screen:
The header and footer remain the same for this screen (though now “leaderboard” will be the active menu item).
The PLAYER BADGE & STATS content must still be visible on this screen (though you may move it on the screen or reorganize it if you like).
The current player must be one of the players on the leaderboard, and it must be easy for him to find his placement.
Please include an option “search” for another player’s name near the top, as well as an option to “view more”, near the bottom.
#6: Rules Screen:
This screen is where players can go to read the rules of the game. The header and footer remain the same for this screen (though now “rules” will be the active menu item).
This will contain clearly defined rules sections and related subtext. Use “Acme Lorem Section Title” for each section header and a paragraph of lorem ipsum for the descriptive subtext under each title. Please make this page easy to read, with clearly defined sections and good use of white space, both between sections AND between subtext sentences.
Target Audience:
- English speaking, diverse work force / employees.
Judging Criteria:
- Completeness (design includes all required elements).
- Cohesiveness (how well all elements work together, seamlessly).
- Cleanliness (successfully engage users in a simple way / ease-of use).
- Modernness / RESPONSIVE Design (how well your elements fit with the concept of responsive design).
- Source File Best Practice (how well your PSD source files are labeled and organized).
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.