Challenge Summary
CHALLENGE UPDATES
- Challenge is open to accept round 2 submissions from all members, not only checkpoint winners. Details are in the forum announcement.
- Clarified required sizes are only 2 - mobile and desktop;
- We don't want all tabs from a challenge page, just the one listeds. Clarified that full details should read "challenge specifrication tab".
Thank you all for the participation!
Welcome to Topcoder Challenges Details Page - Part 1 of 2 Redesign Challenge.
Topcoder and all of us from the product development team, are very excited to finally focus at updating and improving the Topcoder challenges pages. In this design concept challenge we want to hear to the voice of the community and collect novel ideas to enhance the user experiences on Topcoder. We want all designers to generate ideas on pages long neglected - Marathon Matches (MM), Single Round Matches (SRMs), and explore concepts on new challenge type - Learning.
For this Part 1 of Topcoder Challenges Details Page Redesign challenge, you need redesign Topcoder challenge details page for these 3 pages:
1). Design Challenge Details Page
2). Development Challenge Details Page
3). Marathon Match Details Page
Read more detail specification for all pages below.
Challenge Details
a). Goals
We want to identify what are the shared elements between all challenge types. Designing all pages and states will help us identify reusable components that we’ll develop. Our primary goal is to develop component and layout reusable systems that will be developed for the next version of challenge details.
What we want to explore:
- Designs for all Topcoder challenge types
- Responsive layout
- New ideas for fixing existing problems
- Novel ideas to improve the user experiences for all users
b). Users
Think about the goals and needs of each user when you design your version. Most of the time you have to satisfy more than one user. There is a difference between a new competitor and seasoned member, and we must serve both well.
1). Anonymous - potential customer or Topcoder member. They need to know
- What is this page?
- What can I do here?
- Where do I go next?
Goals:
- Learn about crowdsourcing (customer)
- Join the community (potential member)
2). New member - they don’t know much about Topcoder and what they can do. Help them find out
- How do I compete?
- What is a challenge?
- Did I do it right?
- What is my submission status?
Goals:
- Make the new members understand Topcoder challenge format quickly and recover from mistakes
- Get them excited about participating in challenges
3). Seasoned competitor - That is most probably you. Think somebody that spends a lot of time on challenges and knows the Topcoder in details.
- What’s the prize?
- How much time I have left?
- How does it stack with the rest of my work?
- What is my winning chance?
- What is my submission status?
Goals:
- Read through the specification quickly and understand what is required quickly;
- Understand who is participating;
- Follow submissions
- Manage the submission
- Get feedback from customer
4). Customer - these are the people that make it possible for Topcoder to continue existing. They want to get the best possible results and solutions from our amazing community.
- Identify who I am on my challenge. Think company branding
- Spread out the word, make it possible for competitors to know the right type of technology/capability/skills my challenge needs
- Clearly communicate my challenge specification and rules
- Get more good submissions to chose from
- Provide feedback easily, but do not answer the same questions twice
5). Copilot/Admin - They facilitate communication and help Topcoder run smooth all the time. Big thank you, Topcoder copilots!
- Create and make sure the challenge page looks good
- Make sure it will reach the right people; how can we popularize the challenge?
- How can I communicate easily with the competitors?
- Sometimes updates are needed. How do we communicate/spread the word?
- Manage multiple submissions and provide feedback
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- When you create icon/graphic, make sure they use vector shape format.
a). Screen Sizes:
- Design for Mobile and Desktop. Think about the difference of each device and what is the usual situation the app will be used. Example - on mobile the competitors would be checking notifications, reading specification, following challenge unfolding; on desktop they would be creating their solutions and managing submissions.
- Design Screen Size breakpoints:
1). Mobile Screen Size - Portrait (Required) : 320px(w) × height up to your design
2). Laptop/Desktop Screen Size (Required) : 1280px(w) × height up to your design
NOTE: Consider the viewport height when designing for desktops. Above the fold usually is around 480-600px. It is important to utilize the available space in all dimensions.
b). Design language, colors, typography.
- Topcoder has developed a new design language that is utilitarian, clean, and modern. Take a look at the provided design screens from Topcoder Connect and use them as source for your designs. Try to create matching pages that will feel in home with what you see, but also try to explore new ways to build your elements.
NOTE: Please do not redefine colors beyond the supplied pallette. We have a wide variety of colors to chose from. Do not use level-specific colors for anything but user level designators. Those are reserved for color-coding.
c). Visual hierarchy, UX.
- When you design your screens focus on reusability and repeatability. Try to create components that can be reused on all pages (avatar, heading, body, side navigation, timeline, calendar, tabs, tags, attachments, etc.). Once you explore the component on all pages you’ll know what are the states and the building blocks.
NOTE: Always keep in mind the importance of the information and order. Think what should be visible, what is the important information and for whom.
d). Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: vic@topcoder.com & lunarkid@copilots.topcoder.com
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Downloadable Files
Google Drive: https://drive.google.com/open?id=0B1LbmKnex41fbzFtQUxfMWd5WFE
Note: This folder contains of these following assets: Topcoder Logo, Fonts, Icons, Topcoder Color Palette, Topcoder Design UI Kit (Sketch format)
Submission Requirements
For all pages we will be very happy if you explore new ideas for improvements and new features! Start with the existing pages from Topcoder, and work your way through them. Analyze what are the current problems and explore possible solutions. Do not remove existing elements unless they are really a problem/not needed (explain why). We will be very happy if you explore new ideas for improvements and suggest new features for all the pages!
Main focus is on the following elements:
- Header (title, customer, challenge information);
- Timeline;
- Specification;
- Secondary information;
- Section tabs, including Forum/discussion section (in the challenge page) and submission management;
- Winners.
1). Design Challenge Details Page
The Design Challenge - visual or UX - should explain design problems to be solved, using application screens as the main problem container. Each screen has states to communicate different scenarios for the users.
- 1-A Public view / non-registered view (header and challenge intro)
- 1-B Registered for challenge - challenge details tab
- 1-C Completed challenge - winners statistic
Elements: How do we communicate rounds on the timeline, screen definition on the specification details, gallery with preview for all winners (not full submissions), stats.
Current Page Reference: https://www.topcoder.com/challenge-details/30056636/?type=design
2). Development Challenge Details Page
The Development Challenge aims to explain functional problem to be solved, using features as main problem container. Each function has specific requirements -- use cases -- that describe the system behavior, or problem to be solved
- 2-A Registered for challenge - challenge details tab
- 2-B Completed challenge - winners statistic
- 2-C Challenge forum (in page)
Elements: We want to illustrate code blocks in the specification, GitHub repo link/access, extended winner statistics.
Current Page Reference: https://www.topcoder.com/challenge-details/30056687/?type=develop
3). Marathon Match Details Page
The Marathon Match currently looks very differently than the system. Bring it back into the Topcoder!
- 3-A Registered view - challenge dtails tab
- 3-B Finished challenge - winners
Elements: We want to illustrate code blocks & scientific formulas in the specification, GitHub repo link/access, solution performance
Current Page Reference: https://community.topcoder.com/tc?module=MatchDetails&rd=16887
Problem statement: https://community.topcoder.com/longcontest/?module=ViewProblemStatement&rd=16887&pm=14543
Statistics: https://community.topcoder.com/longcontest/?module=ViewStandings&rd=16887
Target User
All user personas listed in users. There are different needs per page that you need to satisfy. Think about everybody that’s going to use the page, not only competitors.
Judging Criteria
- User Experience (45%)
- Cleanliness of your graphics and design. (35%)
- How well you create design for Topcoder Challenges Details Page Redesign Application (20%)
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 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 either Adobe Photoshop/Illustrator/Sketch and saved as 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.
- Challenge is open to accept round 2 submissions from all members, not only checkpoint winners. Details are in the forum announcement.
- Clarified required sizes are only 2 - mobile and desktop;
- We don't want all tabs from a challenge page, just the one listeds. Clarified that full details should read "challenge specifrication tab".
Thank you all for the participation!
Welcome to Topcoder Challenges Details Page - Part 1 of 2 Redesign Challenge.
Topcoder and all of us from the product development team, are very excited to finally focus at updating and improving the Topcoder challenges pages. In this design concept challenge we want to hear to the voice of the community and collect novel ideas to enhance the user experiences on Topcoder. We want all designers to generate ideas on pages long neglected - Marathon Matches (MM), Single Round Matches (SRMs), and explore concepts on new challenge type - Learning.
For this Part 1 of Topcoder Challenges Details Page Redesign challenge, you need redesign Topcoder challenge details page for these 3 pages:
1). Design Challenge Details Page
2). Development Challenge Details Page
3). Marathon Match Details Page
Read more detail specification for all pages below.
Round 1
Initial Topcoder Challenges Details Page Redesign for these following screens on Laptop/Desktop Screen Size:
1). Design Challenge Details Page
2). Development Challenge Details Page
3). Marathon Match Details Page
Note:
- For mobile and desktop versions you must add a suffix - ".mobile." and ".web."
1). Design Challenge Details Page
2). Development Challenge Details Page
3). Marathon Match Details Page
Note:
- For mobile and desktop versions you must add a suffix - ".mobile." and ".web."
Round 2
Final Topcoder Challenges Details Page Redesign combined with Checkpoint Feedback for these following screens on on Laptop/Desktop and Mobile Screen Size:
1). Design Challenge Details Page
2). Development Challenge Details Page
3). Marathon Match Details Page
Note:
- For mobile and desktop versions you must add a suffix - ".mobile." and ".web."
1). Design Challenge Details Page
2). Development Challenge Details Page
3). Marathon Match Details Page
Note:
- For mobile and desktop versions you must add a suffix - ".mobile." and ".web."
Challenge Details
a). Goals
We want to identify what are the shared elements between all challenge types. Designing all pages and states will help us identify reusable components that we’ll develop. Our primary goal is to develop component and layout reusable systems that will be developed for the next version of challenge details.
What we want to explore:
- Designs for all Topcoder challenge types
- Responsive layout
- New ideas for fixing existing problems
- Novel ideas to improve the user experiences for all users
b). Users
Think about the goals and needs of each user when you design your version. Most of the time you have to satisfy more than one user. There is a difference between a new competitor and seasoned member, and we must serve both well.
1). Anonymous - potential customer or Topcoder member. They need to know
- What is this page?
- What can I do here?
- Where do I go next?
Goals:
- Learn about crowdsourcing (customer)
- Join the community (potential member)
2). New member - they don’t know much about Topcoder and what they can do. Help them find out
- How do I compete?
- What is a challenge?
- Did I do it right?
- What is my submission status?
Goals:
- Make the new members understand Topcoder challenge format quickly and recover from mistakes
- Get them excited about participating in challenges
3). Seasoned competitor - That is most probably you. Think somebody that spends a lot of time on challenges and knows the Topcoder in details.
- What’s the prize?
- How much time I have left?
- How does it stack with the rest of my work?
- What is my winning chance?
- What is my submission status?
Goals:
- Read through the specification quickly and understand what is required quickly;
- Understand who is participating;
- Follow submissions
- Manage the submission
- Get feedback from customer
4). Customer - these are the people that make it possible for Topcoder to continue existing. They want to get the best possible results and solutions from our amazing community.
- Identify who I am on my challenge. Think company branding
- Spread out the word, make it possible for competitors to know the right type of technology/capability/skills my challenge needs
- Clearly communicate my challenge specification and rules
- Get more good submissions to chose from
- Provide feedback easily, but do not answer the same questions twice
5). Copilot/Admin - They facilitate communication and help Topcoder run smooth all the time. Big thank you, Topcoder copilots!
- Create and make sure the challenge page looks good
- Make sure it will reach the right people; how can we popularize the challenge?
- How can I communicate easily with the competitors?
- Sometimes updates are needed. How do we communicate/spread the word?
- Manage multiple submissions and provide feedback
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- When you create icon/graphic, make sure they use vector shape format.
a). Screen Sizes:
- Design for Mobile and Desktop. Think about the difference of each device and what is the usual situation the app will be used. Example - on mobile the competitors would be checking notifications, reading specification, following challenge unfolding; on desktop they would be creating their solutions and managing submissions.
- Design Screen Size breakpoints:
1). Mobile Screen Size - Portrait (Required) : 320px(w) × height up to your design
2). Laptop/Desktop Screen Size (Required) : 1280px(w) × height up to your design
NOTE: Consider the viewport height when designing for desktops. Above the fold usually is around 480-600px. It is important to utilize the available space in all dimensions.
b). Design language, colors, typography.
- Topcoder has developed a new design language that is utilitarian, clean, and modern. Take a look at the provided design screens from Topcoder Connect and use them as source for your designs. Try to create matching pages that will feel in home with what you see, but also try to explore new ways to build your elements.
NOTE: Please do not redefine colors beyond the supplied pallette. We have a wide variety of colors to chose from. Do not use level-specific colors for anything but user level designators. Those are reserved for color-coding.
c). Visual hierarchy, UX.
- When you design your screens focus on reusability and repeatability. Try to create components that can be reused on all pages (avatar, heading, body, side navigation, timeline, calendar, tabs, tags, attachments, etc.). Once you explore the component on all pages you’ll know what are the states and the building blocks.
NOTE: Always keep in mind the importance of the information and order. Think what should be visible, what is the important information and for whom.
d). Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: vic@topcoder.com & lunarkid@copilots.topcoder.com
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Downloadable Files
Google Drive: https://drive.google.com/open?id=0B1LbmKnex41fbzFtQUxfMWd5WFE
Note: This folder contains of these following assets: Topcoder Logo, Fonts, Icons, Topcoder Color Palette, Topcoder Design UI Kit (Sketch format)
Submission Requirements
For all pages we will be very happy if you explore new ideas for improvements and new features! Start with the existing pages from Topcoder, and work your way through them. Analyze what are the current problems and explore possible solutions. Do not remove existing elements unless they are really a problem/not needed (explain why). We will be very happy if you explore new ideas for improvements and suggest new features for all the pages!
Main focus is on the following elements:
- Header (title, customer, challenge information);
- Timeline;
- Specification;
- Secondary information;
- Section tabs, including Forum/discussion section (in the challenge page) and submission management;
- Winners.
1). Design Challenge Details Page
The Design Challenge - visual or UX - should explain design problems to be solved, using application screens as the main problem container. Each screen has states to communicate different scenarios for the users.
- 1-A Public view / non-registered view (header and challenge intro)
- 1-B Registered for challenge - challenge details tab
- 1-C Completed challenge - winners statistic
Elements: How do we communicate rounds on the timeline, screen definition on the specification details, gallery with preview for all winners (not full submissions), stats.
Current Page Reference: https://www.topcoder.com/challenge-details/30056636/?type=design
2). Development Challenge Details Page
The Development Challenge aims to explain functional problem to be solved, using features as main problem container. Each function has specific requirements -- use cases -- that describe the system behavior, or problem to be solved
- 2-A Registered for challenge - challenge details tab
- 2-B Completed challenge - winners statistic
- 2-C Challenge forum (in page)
Elements: We want to illustrate code blocks in the specification, GitHub repo link/access, extended winner statistics.
Current Page Reference: https://www.topcoder.com/challenge-details/30056687/?type=develop
3). Marathon Match Details Page
The Marathon Match currently looks very differently than the system. Bring it back into the Topcoder!
- 3-A Registered view - challenge dtails tab
- 3-B Finished challenge - winners
Elements: We want to illustrate code blocks & scientific formulas in the specification, GitHub repo link/access, solution performance
Current Page Reference: https://community.topcoder.com/tc?module=MatchDetails&rd=16887
Problem statement: https://community.topcoder.com/longcontest/?module=ViewProblemStatement&rd=16887&pm=14543
Statistics: https://community.topcoder.com/longcontest/?module=ViewStandings&rd=16887
Target User
All user personas listed in users. There are different needs per page that you need to satisfy. Think about everybody that’s going to use the page, not only competitors.
Judging Criteria
- User Experience (45%)
- Cleanliness of your graphics and design. (35%)
- How well you create design for Topcoder Challenges Details Page Redesign Application (20%)
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 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 either Adobe Photoshop/Illustrator/Sketch and saved as 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.