Challenge Summary
Welcome to the Topcoder Community Revamp Design Challenge! In this challenge we are looking to update the look and feel of a few pages from the community site and make them more exciting. Things to know:
Note: this challenge is a Sketch only challenge as we need to reuse existing elements defined in our GUI KIT which was created in Sketch.
Please read the challenge specifications carefully and let us know if you have any questions in the forums.
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- As part of your final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Project Background
Full Description & Project Guide
The time has come for us to update our site to have it all modern and beautiful as well as consistent with topcoder.com and TCO20. We have an existing GUI KIT, that we wish to use for this challenge to redesign the existing pages on our site. Here’s a tutorial on how to use the GUI KIT. Pay attention on how we use the typography on the banners and on the content area, how we add the photos (which are now all blobs), how we display cards, etc. If you are not clear about these, feel free to ask in the challenge forum.
The pages that need to be updated are all live on site, and you can use the same content.
1. Member Stories:
Link: https://www.topcoder.com/community/stories
This page is showing stories of different members and how Topcoder has changed their life. The page is pretty long now. Think how can you apply the existing GUI KIT to make the page look better and more exciting. Any idea how to make it more compact?
2. Member Programs
Link: https://www.topcoder.com/community/member-programs
Here you can see a list of the active programs Topcoder has. This can be a series of challenges or a tournament or the MVP programs, etc. The page is split into 2 sections: Hot Programs and Active Programs: each has specific content and descriptions.
3. Working Moms
Link: https://www.topcoder.com/lp/working-moms
This page shows how a mom can work at Topcoder and what the benefits of it are. There are several sections here and we would like to keep all of them in the new design:
4. Newsletter Archive
Link: https://www.topcoder.com/community/newsletterarchive
Over the years we have had various newsletter types for different tracks: design, development, and data science. Now we plan to add one newsletter per month only, we will call it the General Newsletter, so in addition to those newsletters that you see there, we should also include the general one.
5. Statistics Design
Link: https://www.topcoder.com/community/statistics/design
This page contains tables with various information about designers performance. In addition to updating the tables design, think about how you can make them more exciting for the user. Is there any other way to display data without tables? We’re open to your suggestions.
6. Contact
Link: https://www.topcoder.com/community/contact
We’re showing here different ways how the members can reach Topcoder support or how they can connect with other members. On the new GUI KIT, we have moved away from using cards too much. Show us how you envision this page so it looks amazing!
When redesigning these pages, think about creative ways to apply the GUI KIT and how you can you make the pages more exciting!
Branding Guidelines
Size
Stockphoto and Icons
Target Audience
Judging criteria
Marvel Prototypes
For this challenge you should submit your designs in Marvel. You can request one in the forums or email at keyla. blue1@gmail.com
Final Deliverables
Final Fixes
- We have existing content and layout
- You need to follow the existing GUI KIT
- Desktop and mobile size
Note: this challenge is a Sketch only challenge as we need to reuse existing elements defined in our GUI KIT which was created in Sketch.
Please read the challenge specifications carefully and let us know if you have any questions in the forums.
Round 1
Submit your initial design for a Checkpoint Feedback:- Member Stories (desktop)
- Member Programs (desktop)
- Working Moms (desktop)
- Newsletter Archive (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates:- Member Stories (desktop + mobile)
- Member Programs (desktop + mobile)
- Working Moms (desktop + mobile)
- Newsletter Archive (desktop + mobile)
- Statistics Design (desktop + mobile)
- Contact (desktop + mobile)
- As part of your final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Project Background
- 2020 is the year we are revamping the community website to have the same visual appearance as topcoder.com so we have consistency across the platform
- You have the exciting opportunity to redesign pages, that are seen by the entire community and be a part of this change
- It’s important that the redesign will follow the latest Topcoder GUI KIT as much as possible.
Full Description & Project Guide
The time has come for us to update our site to have it all modern and beautiful as well as consistent with topcoder.com and TCO20. We have an existing GUI KIT, that we wish to use for this challenge to redesign the existing pages on our site. Here’s a tutorial on how to use the GUI KIT. Pay attention on how we use the typography on the banners and on the content area, how we add the photos (which are now all blobs), how we display cards, etc. If you are not clear about these, feel free to ask in the challenge forum.
The pages that need to be updated are all live on site, and you can use the same content.
1. Member Stories:
Link: https://www.topcoder.com/community/stories
This page is showing stories of different members and how Topcoder has changed their life. The page is pretty long now. Think how can you apply the existing GUI KIT to make the page look better and more exciting. Any idea how to make it more compact?
2. Member Programs
Link: https://www.topcoder.com/community/member-programs
Here you can see a list of the active programs Topcoder has. This can be a series of challenges or a tournament or the MVP programs, etc. The page is split into 2 sections: Hot Programs and Active Programs: each has specific content and descriptions.
3. Working Moms
Link: https://www.topcoder.com/lp/working-moms
This page shows how a mom can work at Topcoder and what the benefits of it are. There are several sections here and we would like to keep all of them in the new design:
- Topcoder for Working Moms
- Topcoder Allows You To
- What is Topcoder
- Topcoder is More Than a Company
- What Can You Do at Topcoder
- Still Have Questions
- Sign Up Today!
4. Newsletter Archive
Link: https://www.topcoder.com/community/newsletterarchive
Over the years we have had various newsletter types for different tracks: design, development, and data science. Now we plan to add one newsletter per month only, we will call it the General Newsletter, so in addition to those newsletters that you see there, we should also include the general one.
5. Statistics Design
Link: https://www.topcoder.com/community/statistics/design
This page contains tables with various information about designers performance. In addition to updating the tables design, think about how you can make them more exciting for the user. Is there any other way to display data without tables? We’re open to your suggestions.
6. Contact
Link: https://www.topcoder.com/community/contact
We’re showing here different ways how the members can reach Topcoder support or how they can connect with other members. On the new GUI KIT, we have moved away from using cards too much. Show us how you envision this page so it looks amazing!
When redesigning these pages, think about creative ways to apply the GUI KIT and how you can you make the pages more exciting!
Branding Guidelines
- You can download the Topcoder GUI KIT from here
- Branding guidelines can be viewed here.
- Read the tutorial on how to use the Topcoder GUI KIT to apply this at best
- Note: we don't have an existing footer design now. Show us how that can look.
Size
- Desktop: width: 1440 x height as much as needed
- Mobile: width: 320 px x height as much as need. You should export your designs for presentation and in Marvel at 2X
Stockphoto and Icons
- Photos: you can only use photos from the members profiles or our Topcoder Flickr albums or from our site
- Icons: we will share them on forums. Only Streamline icons are allowed or those taken from the GUI KIT.
Target Audience
- Topcoder members and customers
Judging criteria
- How good is your design following the existing GUI KIT?
- How exciting is your work looking
- Completeness of your submission
Marvel Prototypes
For this challenge you should submit your designs in Marvel. You can request one in the forums or email at keyla. blue1@gmail.com
Final Deliverables
- Source.zip – All original source files.
All source files of all graphics created in vector format in either Adobe Illustrator or any similar software should be saved as editable files.
- Submission.zip – PNG/JPG files
Submit JPG/PNG image files based on the Challenge submission requirements stated above.
- Preview.png – Your preview image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72 dpi and place a screenshot of your submission within it.
- Declarations.txt – All your declarations and notes
This file must contain your notes if any, fonts used, links to the stock images and icons used and the link to your Marvel project.
Final Fixes
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall color
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.