Challenge Summary
We are looking for a new Community Landing page that is able to tell clearly what our community is made of (provide clear information) and at the same time, it needs to look Fresh, Exciting, and Tempting for anyone to join the community. From Code to Design, From Newbie to Expert, this Community Landing Page should be able to embrace anyone to join the community!
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial Landing Page design for a Checkpoint Feedback (Desktop + Mobile)- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp 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 Landing Page Design plus Checkpoint Updates (Desktop + Mobile)- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
BACKGROUND OVERVIEW
- This new Community Landing Page page will serve as the main landing page for the marketing of our community side
- The main target audience is unregistered members. The goal is to showcase to potential visitors the benefits of joining our community and converting them into registered members
CHALLENGE GOAL
- Create the Best possible UI/UX design for Our New Community Landing Page that able to engage and attract more people to join the Topcoder Community as registered members and actively participate in the community!
CHALLENGE FORUM
- If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=686116
ACCESSIBILITY COMPLIANT
- We are trying to make the platform more accessible for persons with disabilities
- For more information about accessibility compliance: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=332#labels-or-instructions
- Make sure your design support this accessibility compliant standard. Here is a good checklist that you can follow in your design: https://accessibility.voxmedia.com/#designers
SCREEN FEATURE REQUIREMENTS
For this challenge, we are looking for the below screens to be designed/considered in your submission. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
00) General Requirements
- Your Design MUST align with our Topcoder GUI KIT (See documentation area). We have provided a couple of example pages for reference. Make sure to use a similar clean style in your design. Pay attention to colors, fonts, image treatments, white space, etc.
- Do not create or put information into a pop-up/modal windows. All information should be clear from the first visit
- The CTA (Click to Action) needed here is "join the Topcoder Community". Make sure the overall design brings/engage them to join the community
- You need to offer it in a straight simple way
- PLEASE DO NOT ADD Anything about Topcoder Open (TCO) in this page - New members should know about Topcoder Community First before able to understand or know about what TCO is
- If you want to draw/create an awesome design illustration, that is definitely fine, BUT, it needs to be your own creation (3rd Party/Stock Illustration IS NOT ALLOWED)
- Our priority is to have a clean and minimalistic design and layout
- Remember this page is for a NON LOGGED IN Users, means they are not yet registered as a Topcoder Members, a big chance they probably never heard about Topcoder before, or just heard some random or unclear information about Topcoder Community. This is you before joined the community. So please think, what kind of information that will convince you to register as a member of Topcoder Community (advantage and benefit of being Topcoder member)? Put your thoughts and visualize it in the design!
01) Community Landing Page
- Please find the content for the new community landing page from this link: https://docs.google.com/document/d/1-wGC_dYJHyYehgCCAEUbE0EJRdOEfrkEs0HJmjinoFs/edit?usp=sharing
- There are 8 Sections needed in the Community Landing Page, it needs to be created in the same order that we provide in the above docs
- Feel free to alter the text provided in the above docs, we are OPEN to better marketing content!
- Okay, we thought we already think about all aspects for the Landing page, but we probably Wrong! Are we missing something here? What would you want to see in the landing page actually? Tell us!
REFERENCES (DO NOT COPY IT):
- https://fairygodboss.com/ (very clean, uncluttered, not very much text)
IMPORTANT:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
MARVEL PROTOTYPE
- We need you to upload your screens to Marvel App
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comments this link while you upload).
BRANDING GUIDELINES
- Follow Topcoder Branding Guidelines:
- Topcoder Branding Guideline: TC New GUI KIT (Marketing).sketch
- Example Screen: Example Screens.sketch (Use it as Reference)
DOCUMENTATION
- Topcoder Community Photos Gallery: https://www.flickr.com/photos/53993064@N03/albums/
TARGET DEVICE
- Web/Desktop: 1440px width with Height adjusted accordingly
- Mobile: 750px width with Height adjusted accordingly
TARGET AUDIENCES
- New Potential Members from around the Globe
- You and more than a Million+ Members that we currently have
JUDGING CRITERIA
- Your submission will be judged on the following criteria:
- Clear CTA
- How engaging is the page to First Time Visitor and Potential Members
- The Overall idea, Creative use of design, and execution of concepts
- How well does your design align with the objectives of the challenge
- Creative but clear ability to integrate content into the page
- Execution and thoughtfulness put into solving the problem
- Cleanliness of screen design and user flow
SUBMISSION AND 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 image files based on Challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
- All source files of all graphics created in Sketch and saved as an editable layer
FINAL FIXES
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors
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.