Challenge Summary
Welcome to The Brain Architecture Game Moderator and Admin Portal Challenge!
The Brain Architecture Game is currently played as a tabletop game experience that builds understanding of the powerful role of experiences on early brain development – what promotes it, what derails it, with what consequences for society.
We’ve digitized the elements of the game so that it can be played ?as an app, but what we need now are designs for the web-based Moderator and Admin portal. The portal will allow an Admin to manage the app’s settings, manage Moderators’ permissions and activities, upload and manage game materials, and will allow the Moderator to set up sessions for each game played, view the progress of the teams, interact with them during game play, and view the details of all the past sessions.
Screen 1: 01-LandingPage-and-Nav
Screen 2: 02-EditRules-AdminView
Screen 3: 03-EditBrainBasesMaster
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
All designs to reflect feedback from checkpoint review.
Screen 1: 01-LandingPage-and-Nav
Screen 2: 02-EditRules-AdminView
Screen 3: 03-EditBrainBasesMaster
Screen 4: 04-EditExistingConfigurations
Screen 5: 05-ManageCardsLibrary-Admin
Screen 6: 06-ManageCardSets-CreateNewCard
Screen 7: 07-Initiate Session-ModView
Screen 8: 08-SessionView-Started
Screen 9: 09-SessionDetail-TeamView
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
We are looking for your help in designing out a series of screens that will help shape the content of our Moderator and Admin portals. The goal of this challenge to is integrate the existing look and feel from the supporting website (https://dev.thebrainarchitecturegame.com/), along with the guidelines found in the attached style guide. You will be provided with wireframes to build the screens needed for this portal.
To be successful in this challenge you MUST use the existing style guide. We are not looking for new concepts or design styles, just ways to handle this new content that coordinates with the current look and feel.
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. Good luck!
Background Information:
The Brain Architecture Game is currently played as a tabletop game experience that builds understanding of the powerful role of experiences on early brain development – what promotes it, what derails it, with what consequences for society. It can be played in small workshops, conferences, and large events, with as few as 8, or as many as 300 participants.
We’ve digitized the elements of the game so that it can be played ���as an Android app (note: Android app design is NOT part of this challenge). This challenge focuses on the Admin and Moderator web portals used to setup and manage gameplay. The portals will allow the Admin to manage the app’s settings, manage Moderators’ permissions and activities, upload and manage game materials, and allow the Moderator to set up sessions for each game played, view the progress of the teams, interact with them during game play, and view the details of all the past sessions.
Learn more about the game here.
Screen Sizes:
Desktop Resolution: Design for 1280px width and height as required.
- Make sure you create icons in vector format, so when we resize, graphics will still look sharp!
Branding Guidelines:
- Use the existing website and style guide as your MAIN source of design and branding input. In terms of colors, leverage the secondary palette as you’ll see that this aligns closely with the website (https://dev.thebrainarchitecturegame.com/).
Design Goals:
- Expand upon the existing wireframe content with designs that reflect the current website look and feel and branding guidelines.
- Appropriate use of primary and secondary colors to highlight areas of importance, calls to action, links, etc.
- Consistent use of primary, secondary, and tertiary buttons
Required Content:
- The screens you design will act as templates for additional screens with similar content, so please consider this when naming and arranging layers in the source files.
Screen 1: 01-LandingPage-and-Nav
http://sf9upi.axshare.com/#p=01-landingpage-and-nav
- Provide layout for landing page content, along with header and nav
Screen 2: 02-EditRules-AdminView
http://sf9upi.axshare.com/#p=02-editrules-adminview
- Content as shown on wireframe
- Click “View and edit this language set” button to activate the Edit Rules overlay
- Editing: Rules in [current language] overlay content as shown on wireframe
Screen 3: 03-EditBrainBasesMaster
http://sf9upi.axshare.com/#p=03-editbrainbasesmaster
- Content as shown on wireframe
- Layout must be able to accommodate dozens of these Brain Bases
- Brain Base shape, clearly labeled with # of pipes and straws
- Toggle for Active/Inactive
- Delete
Screen 4: 04-EditExistingConfigurations
http://sf9upi.axshare.com/#p=04-editexistingconfigurations
- Content as shown on wireframe
- Brain Base shapes can vary
- Provide way to designate one item as the default
- Toggle for Active/Inactive
- Delete
Screen 5 - 05-ManageCardsLibrary-Admin
http://sf9upi.axshare.com/#p=05-managecardslibrary
- Content as shown on wireframe
- Multi-select for language
- View one year at a time
- View multiple card types at a time
- Card text should be able to accommodate up to 3 lines of text
- Layout must be able to accommodate dozens of these cards
Screen 6 - 06-ManageCardSets-CreateNewCard (Create/Edit/Clone Card Set overlay)
http://sf9upi.axshare.com/#p=06-managecardsets-createnewcard
- You’ll be designing the overlay that is activated from this page. It should be activated on first view, but if not, click “Create New Card Set” button to activate
- Content as shown on wireframe
Screen 7 - 07-Initiate Session-ModView
http://sf9upi.axshare.com/#p=07-initiate_session-modview
- Content as shown on wireframe
Screen 8 - 08-SessionView-Started
http://sf9upi.axshare.com/#p=08-sessionview-started
- Content as shown on wireframe
Screen 9 - 09-SessionDetail-TeamView
http://sf9upi.axshare.com/#p=09-sessiondetail-teamview
- Content as shown on wireframe
- Icon that you see next to the content for Red X cards is a placeholder only and is being designed separately - you do not need to design it.
Supporting Docs:
All can be found -challenge-assets.zip:
- Style guide.
- Logos and imagery referenced in style guide
- Wireframes:
- Here are the wireframes specific to the screens listed in this challenge: http://sf9upi.axshare.com
- For your reference, here are the complete sets of wireframes that the challenge-specific screens were extracted from, for greater context around what you’re designing: http://5tz09y.axshare.com/ and http://82x7kv.axshare.com/
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Judging Criteria:
- How well your design match the current designs and general user mechanics/ UX
- How well you execute the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
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
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Sketch.
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.
The Brain Architecture Game is currently played as a tabletop game experience that builds understanding of the powerful role of experiences on early brain development – what promotes it, what derails it, with what consequences for society.
We’ve digitized the elements of the game so that it can be played ?as an app, but what we need now are designs for the web-based Moderator and Admin portal. The portal will allow an Admin to manage the app’s settings, manage Moderators’ permissions and activities, upload and manage game materials, and will allow the Moderator to set up sessions for each game played, view the progress of the teams, interact with them during game play, and view the details of all the past sessions.
Round 1
Submit your initial design for a checkpoint feedback:Screen 1: 01-LandingPage-and-Nav
Screen 2: 02-EditRules-AdminView
Screen 3: 03-EditBrainBasesMaster
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final design plus checkpoint feedback:All designs to reflect feedback from checkpoint review.
Screen 1: 01-LandingPage-and-Nav
Screen 2: 02-EditRules-AdminView
Screen 3: 03-EditBrainBasesMaster
Screen 4: 04-EditExistingConfigurations
Screen 5: 05-ManageCardsLibrary-Admin
Screen 6: 06-ManageCardSets-CreateNewCard
Screen 7: 07-Initiate Session-ModView
Screen 8: 08-SessionView-Started
Screen 9: 09-SessionDetail-TeamView
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
We are looking for your help in designing out a series of screens that will help shape the content of our Moderator and Admin portals. The goal of this challenge to is integrate the existing look and feel from the supporting website (https://dev.thebrainarchitecturegame.com/), along with the guidelines found in the attached style guide. You will be provided with wireframes to build the screens needed for this portal.
To be successful in this challenge you MUST use the existing style guide. We are not looking for new concepts or design styles, just ways to handle this new content that coordinates with the current look and feel.
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. Good luck!
Background Information:
The Brain Architecture Game is currently played as a tabletop game experience that builds understanding of the powerful role of experiences on early brain development – what promotes it, what derails it, with what consequences for society. It can be played in small workshops, conferences, and large events, with as few as 8, or as many as 300 participants.
We’ve digitized the elements of the game so that it can be played ���as an Android app (note: Android app design is NOT part of this challenge). This challenge focuses on the Admin and Moderator web portals used to setup and manage gameplay. The portals will allow the Admin to manage the app’s settings, manage Moderators’ permissions and activities, upload and manage game materials, and allow the Moderator to set up sessions for each game played, view the progress of the teams, interact with them during game play, and view the details of all the past sessions.
Learn more about the game here.
Screen Sizes:
Desktop Resolution: Design for 1280px width and height as required.
- Make sure you create icons in vector format, so when we resize, graphics will still look sharp!
Branding Guidelines:
- Use the existing website and style guide as your MAIN source of design and branding input. In terms of colors, leverage the secondary palette as you’ll see that this aligns closely with the website (https://dev.thebrainarchitecturegame.com/).
Design Goals:
- Expand upon the existing wireframe content with designs that reflect the current website look and feel and branding guidelines.
- Appropriate use of primary and secondary colors to highlight areas of importance, calls to action, links, etc.
- Consistent use of primary, secondary, and tertiary buttons
Required Content:
- The screens you design will act as templates for additional screens with similar content, so please consider this when naming and arranging layers in the source files.
Screen 1: 01-LandingPage-and-Nav
http://sf9upi.axshare.com/#p=01-landingpage-and-nav
- Provide layout for landing page content, along with header and nav
Screen 2: 02-EditRules-AdminView
http://sf9upi.axshare.com/#p=02-editrules-adminview
- Content as shown on wireframe
- Click “View and edit this language set” button to activate the Edit Rules overlay
- Editing: Rules in [current language] overlay content as shown on wireframe
Screen 3: 03-EditBrainBasesMaster
http://sf9upi.axshare.com/#p=03-editbrainbasesmaster
- Content as shown on wireframe
- Layout must be able to accommodate dozens of these Brain Bases
- Brain Base shape, clearly labeled with # of pipes and straws
- Toggle for Active/Inactive
- Delete
Screen 4: 04-EditExistingConfigurations
http://sf9upi.axshare.com/#p=04-editexistingconfigurations
- Content as shown on wireframe
- Brain Base shapes can vary
- Provide way to designate one item as the default
- Toggle for Active/Inactive
- Delete
Screen 5 - 05-ManageCardsLibrary-Admin
http://sf9upi.axshare.com/#p=05-managecardslibrary
- Content as shown on wireframe
- Multi-select for language
- View one year at a time
- View multiple card types at a time
- Card text should be able to accommodate up to 3 lines of text
- Layout must be able to accommodate dozens of these cards
Screen 6 - 06-ManageCardSets-CreateNewCard (Create/Edit/Clone Card Set overlay)
http://sf9upi.axshare.com/#p=06-managecardsets-createnewcard
- You’ll be designing the overlay that is activated from this page. It should be activated on first view, but if not, click “Create New Card Set” button to activate
- Content as shown on wireframe
Screen 7 - 07-Initiate Session-ModView
http://sf9upi.axshare.com/#p=07-initiate_session-modview
- Content as shown on wireframe
Screen 8 - 08-SessionView-Started
http://sf9upi.axshare.com/#p=08-sessionview-started
- Content as shown on wireframe
Screen 9 - 09-SessionDetail-TeamView
http://sf9upi.axshare.com/#p=09-sessiondetail-teamview
- Content as shown on wireframe
- Icon that you see next to the content for Red X cards is a placeholder only and is being designed separately - you do not need to design it.
Supporting Docs:
All can be found -challenge-assets.zip:
- Style guide.
- Logos and imagery referenced in style guide
- Wireframes:
- Here are the wireframes specific to the screens listed in this challenge: http://sf9upi.axshare.com
- For your reference, here are the complete sets of wireframes that the challenge-specific screens were extracted from, for greater context around what you’re designing: http://5tz09y.axshare.com/ and http://82x7kv.axshare.com/
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Judging Criteria:
- How well your design match the current designs and general user mechanics/ UX
- How well you execute the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
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
Please provide all original source files of the submitted design. Files should be created in Adobe Photoshop (layered PSD file) or Sketch.
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.