Challenge Summary
With the gift of the Internet comes the ability to share information - an intangible yet priceless resource. Despite the fact that knowledge is readily available on the Internet, not all of its information is curated and put together in a meaningful way for students to access. Our goal is to connect students with those that are willing to give.
Welcome to our Hubs - Responsive Engagement Site Design Concepts Challenge! In this challenge we are looking for your design concepts and ideas for a responsive (desktop and mobile) student engagement site that introduces a new resource-sharing and idea-incubation platform for children, parents, and educators.
Good luck and as always, ask any questions in the forums.
01 Gallery
02 Learning Center
03 Incubation Center
04 Experience Center
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
01 Gallery
02 Learning Center
03 Incubation Center
04 Experience Center
05 Profile
06 Contact Us
07 About Us
08 Interface for administrator
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description
We are designing a responsive engagement website for Hubs, an education platform for students of age 6 to 18. This is a website where students and scholars can engage with each other to create an enriched experience and form communities. The site will be heavily content-driven:
- What – pool from different industries and charitable organizations their idle/unused resources, to help connect students with industry leaders who care and want to develop new talent from a young age.
- Why – to challenge the education system and our current modes of resource distribution
The design of the site is open and we are looking for your design concepts and ideas on what is the responsive layout and the best way to organize the content. Content is also open, but we do have loose pages or content sections that should be included in your designs (see screen/ functionality requirements below).
Branding:
At Hubs, we want to emphasize the value of hope and love. Hope for the students that even though they don’t have the resources, there’ll be others out there willing to lend a hand. Love is something that is offered from above, either by teachers, enterprises, or parents.
- These two values should only be abstracted and implied everywhere, but NOT mentioned anywhere.
- Our Chinese name is
which translates back to English as “Learning Forum”, it’s a general and motivational name for students to exchange intellectual information and resources. After some competitions and candidacy, bigger entities will offer programs where students are able to contribute to the causes that different organizations sponsor, thus creating a community of ideas and information. This is to give them real-life and practical experience that can help achieve exposure and cultivate talent.
- Branding is open, but should be positive - through the use of colors, modern fonts, etc.
- Learning should be fun and challenging. Love and hope should be fun, too, while being deeply rooted in our very nature.
- Hubs is a temporary name. If you have something better you would like to offer, or (even better) willing to draw us a logo, don’t hesitate!
Screen Sizes:
- This is going to be a web application.
- Desktop: Should be lightweight, not too much graphics. After all, site should be functional. Desktop version should be “showcase oriented”, so audience can feel the program / event messages in a bigger form factor
- Mobile: site should move from “showcase oriented” layout to “information oriented” layout. Big buttons, easily accessible but powerful search. Larger text, smaller pictures.
- Desktop view: Design for desktop display 1366px and height as required.
- Mobile view (Mobile Resolution: Design for iPhone 6S Display 750px x 1334px).
- Make sure you create your graphics in 'shape' format, so when we resize graphics will still look sharp!
- Make sure your design consider responsiveness and will look good on both tablet and mobiles.
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Although knowledge of Bootstrap 4, Zurb Foundation and Google Material is not required, and deliverable of this challenge only calls for graphics source files, without clear concepts of responsive web and material design frameworks, designers will be inclined to create inconsistent and impractical user experience designs, and it will be very difficult to them win this challenge.
Contestants should footnote or provide separate document stating how they envision different audiences to use/ interact with each type of device (web and mobile), and the reason behind all major elements of user experience design for each type of device.
Loose Requirements
Below are screens and/or required functionality that could be included in your site design. We are open and looking forward to other ideas. We are also open to other site structures and different pages, as long as it makes sense and includes all of the “necessary” functionality. We want innovative ideas that promote dynamic interaction with users and can attract a wide range of audiences. The grouping logic below are just for your reference, but - if you have a better idea, show us!
Design Guidelines
- A menu so intuitive that upon landing the user can understand immediately where they need/want to go.
- A simple color scheme, but fitting an education platform for users of all ages.
- A playful and welcoming site that can catch the eye of students between ages 6-18.
Function Guidelines
- Landing page gallery - of different projects & current events on-site, matching our theme of being a hub for students to reach out to the world.
- Learning Center - a catalog of our offerings, which includes one of most valuable resource - a video learning platform for English (and other languages in the future)
- Incubation Center - a platform where students are selected, groomed, and given the opportunity to experience and learn from industry experts
- Experience Center - interactive displays, exhibits, and museum type information, virtual field-trips, lesson demos, and more.
- Profile - where students and “givers” (these include teachers, schools, charities, enterprises, and to a certain extent, parents) sign-up and perform their respective functions.
- Contact Us - the different methods for reaching our staff
- About US
- ...And any more you can think of!
Optional Terminal Design:
- Interface for administrator - for approval of “giver” registration, events, generate reports, and etc
As a footnote, we want you to tell us what you would want in a site like this - better yet, show us your vision through your design! As a bonus resource, https://medium.com/facebook-design is a community blog from some of the world’s best designers. Use them if you’re running short on ideas - or can’t decide on what’s better functionally, aesthetically, or philosophically.
Target Audience:
- Students – to be offered a place of learning.
- Teachers – to inspire students.
- Enterprises, charity organizations – to give resources, to be given ideas, and to promote their brand.
- Parents – to give support and to be given information about their kids through achievement points (and not through detail activities).
Judging Criteria:
Your submission will be judged on the following criteria:
- Cleanliness of screen design and user flow
- Overall design and user experience
- Simplicity, clarity, and strength in the design concept
- How well the design aligns with the objectives and conveys the messages of the challenge definition without the use of words, i.e. in form, not in description.
- Demonstration of in-depth understanding of UX design, solid understanding of RWD and MD frameworks - including subtle differences among web and mobile usage behavior in separate document and/or in footnotes explaining most major UX design choices.
- Mastery of Material Design is not required, but we love to see architecture that looks and feels right. If you need additional resources, check out https://material.io/guidelines/
Stock Artwork:
- Stock Artwork policies:
-- https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies:
-- http://help.topcoder.com/hc/en-us/categories/202610437-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
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI 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.
Welcome to our Hubs - Responsive Engagement Site Design Concepts Challenge! In this challenge we are looking for your design concepts and ideas for a responsive (desktop and mobile) student engagement site that introduces a new resource-sharing and idea-incubation platform for children, parents, and educators.
Good luck and as always, ask any questions in the forums.
Round 1
Submit your initial design for a checkpoint feedback:01 Gallery
02 Learning Center
03 Incubation Center
04 Experience Center
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : 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:01 Gallery
02 Learning Center
03 Incubation Center
04 Experience Center
05 Profile
06 Contact Us
07 About Us
08 Interface for administrator
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Readme.txt : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Description
We are designing a responsive engagement website for Hubs, an education platform for students of age 6 to 18. This is a website where students and scholars can engage with each other to create an enriched experience and form communities. The site will be heavily content-driven:
- What – pool from different industries and charitable organizations their idle/unused resources, to help connect students with industry leaders who care and want to develop new talent from a young age.
- Why – to challenge the education system and our current modes of resource distribution
The design of the site is open and we are looking for your design concepts and ideas on what is the responsive layout and the best way to organize the content. Content is also open, but we do have loose pages or content sections that should be included in your designs (see screen/ functionality requirements below).
Branding:
At Hubs, we want to emphasize the value of hope and love. Hope for the students that even though they don’t have the resources, there’ll be others out there willing to lend a hand. Love is something that is offered from above, either by teachers, enterprises, or parents.
- These two values should only be abstracted and implied everywhere, but NOT mentioned anywhere.
- Our Chinese name is
which translates back to English as “Learning Forum”, it’s a general and motivational name for students to exchange intellectual information and resources. After some competitions and candidacy, bigger entities will offer programs where students are able to contribute to the causes that different organizations sponsor, thus creating a community of ideas and information. This is to give them real-life and practical experience that can help achieve exposure and cultivate talent.- Branding is open, but should be positive - through the use of colors, modern fonts, etc.
- Learning should be fun and challenging. Love and hope should be fun, too, while being deeply rooted in our very nature.
- Hubs is a temporary name. If you have something better you would like to offer, or (even better) willing to draw us a logo, don’t hesitate!
Screen Sizes:
- This is going to be a web application.
- Desktop: Should be lightweight, not too much graphics. After all, site should be functional. Desktop version should be “showcase oriented”, so audience can feel the program / event messages in a bigger form factor
- Mobile: site should move from “showcase oriented” layout to “information oriented” layout. Big buttons, easily accessible but powerful search. Larger text, smaller pictures.
- Desktop view: Design for desktop display 1366px and height as required.
- Mobile view (Mobile Resolution: Design for iPhone 6S Display 750px x 1334px).
- Make sure you create your graphics in 'shape' format, so when we resize graphics will still look sharp!
- Make sure your design consider responsiveness and will look good on both tablet and mobiles.
- Feel free to suggest any tools/functions that can bring good User Experience for this tool.
Although knowledge of Bootstrap 4, Zurb Foundation and Google Material is not required, and deliverable of this challenge only calls for graphics source files, without clear concepts of responsive web and material design frameworks, designers will be inclined to create inconsistent and impractical user experience designs, and it will be very difficult to them win this challenge.
Contestants should footnote or provide separate document stating how they envision different audiences to use/ interact with each type of device (web and mobile), and the reason behind all major elements of user experience design for each type of device.
Loose Requirements
Below are screens and/or required functionality that could be included in your site design. We are open and looking forward to other ideas. We are also open to other site structures and different pages, as long as it makes sense and includes all of the “necessary” functionality. We want innovative ideas that promote dynamic interaction with users and can attract a wide range of audiences. The grouping logic below are just for your reference, but - if you have a better idea, show us!
Design Guidelines
- A menu so intuitive that upon landing the user can understand immediately where they need/want to go.
- A simple color scheme, but fitting an education platform for users of all ages.
- A playful and welcoming site that can catch the eye of students between ages 6-18.
Function Guidelines
- Landing page gallery - of different projects & current events on-site, matching our theme of being a hub for students to reach out to the world.
- Learning Center - a catalog of our offerings, which includes one of most valuable resource - a video learning platform for English (and other languages in the future)
- Incubation Center - a platform where students are selected, groomed, and given the opportunity to experience and learn from industry experts
- Experience Center - interactive displays, exhibits, and museum type information, virtual field-trips, lesson demos, and more.
- Profile - where students and “givers” (these include teachers, schools, charities, enterprises, and to a certain extent, parents) sign-up and perform their respective functions.
- Contact Us - the different methods for reaching our staff
- About US
- ...And any more you can think of!
Optional Terminal Design:
- Interface for administrator - for approval of “giver” registration, events, generate reports, and etc
As a footnote, we want you to tell us what you would want in a site like this - better yet, show us your vision through your design! As a bonus resource, https://medium.com/facebook-design is a community blog from some of the world’s best designers. Use them if you’re running short on ideas - or can’t decide on what’s better functionally, aesthetically, or philosophically.
Target Audience:
- Students – to be offered a place of learning.
- Teachers – to inspire students.
- Enterprises, charity organizations – to give resources, to be given ideas, and to promote their brand.
- Parents – to give support and to be given information about their kids through achievement points (and not through detail activities).
Judging Criteria:
Your submission will be judged on the following criteria:
- Cleanliness of screen design and user flow
- Overall design and user experience
- Simplicity, clarity, and strength in the design concept
- How well the design aligns with the objectives and conveys the messages of the challenge definition without the use of words, i.e. in form, not in description.
- Demonstration of in-depth understanding of UX design, solid understanding of RWD and MD frameworks - including subtle differences among web and mobile usage behavior in separate document and/or in footnotes explaining most major UX design choices.
- Mastery of Material Design is not required, but we love to see architecture that looks and feels right. If you need additional resources, check out https://material.io/guidelines/
Stock Artwork:
- Stock Artwork policies:
-- https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies:
-- http://help.topcoder.com/hc/en-us/categories/202610437-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
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI 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.