Challenge Summary
Welcome to the TopCoder Cockpit - Contest Launch Flow Design Updates. TopCoder is looking to add new screens to the "Launch a Contest" flow within Cockpit. This is the flow clients and copilots use when launching a contest within the TopCoder platform. The new screens add a layer of simple choices to the process. Your goal is to make these 4 screens look engaging, easy-to-understand, “graphical” and simple.
Round 1
For the Milestone round, please show us your user interface designs (4 screens total) using the provided attachments.
- Main screen showing three First-level choices (platforms)
- Studio screen showing 6 Second-level choices (tracks)
- Software screen showing 14 Second-level choices (tracks)
- Analytics screen showing 1 Second-level choice (track)
Round 2
Your storyboards with milestone feedback incorporated for the following pages:
- Main screen showing three First-level choices (platforms)
- Studio screen showing 6 Second-level choices (tracks)
- Software screen showing 14 Second-level choices (tracks)
- Analytics screen showing 1 Second-level choice (track)
TopCoder wants to improve the user experience for launching a contest in Cockpit. We are looking for you to make these 4 screens look engaging, easy-to-understand, "graphical" and simple. Reference the attached screens and design the listed pages based on the content provided. Think about how the user (copilots and clients) will use this "launch new contest" area. By changing the look and flow for selecting contest tracks in Cockpit, TopCoder hopes to make it easy for copilots and clients to sucessfully launch a new contest.
Required concepts:
You will design a total of 4 screens:
- Main screen showing three First-level choices (platforms)
- Studio screen showing 6 Second-level choices (tracks)
- Software screen showing 14 Second-level choices (tracks)
- Analytics screen showing 1 Second-level choice (track)
TopCoder Cockpit Launch New Contest required content:
---- Use the provided Cockpit screen as a template for your design (reference file: template.png)
---- Use the colors found within the (reference file: screen1.png). DO NOT use the text/tracks shown there.
-------Colors for the platforms: (below are two options, RGB and hex the file Spoke-Graphic-Icons-Source.ai has been provided to reference the colors ONLY do not use the icon tracks found in this file. The list in the (reference file: track-names_and_content1.docx) file gives the updated contest tracks)
-----------Blue: RGB 63/169/245 hex #3fa9f5
-----------Green: RGB 122/201/67 hex #7ac943
-----------Orange: RGB 255/147/30 hex #ff931e
---- Use the icon shapes found within the icon source file. (reference file: "Contest Track Icons_Final File.zip) You may resize them to fit your needs but do not modify the shape or aspect ratio. Note: you will not use the "Idea Generation" icon at this time.
---- On overview of the screen flow can be viewed in (refernce file: Basic_Screen_flow_ROUGH.pptx)
---- Questions need to appear on the first and second level screens. Insert and design how these questions will appear on their designated screens.
-----------Question to appear on screen 1: What kind of contest do you want?
-----------Question to appear on screen 2: What track best solves your design problem? (also include space for a short sentence after this question using lorem ipsum copy.)
Challenges:
----- Second Level screens must be able to accommodate new tracks – make sure think about this and incorporate it into your design.
----- Show us your designs to make all three Second Level screens look clean and match each other even though each track has a different number of options.
Elements on the First Level Screen (platforms):
Graphics---
--- Show each platform with name and icon. Platforms can be shown within a shape, without a shape – however you want!
Content
--- Each platform will show some brief information. Use the sample text found in the document (reference file: Track-names_and_content1.docx) and show us how a platform will look highlighted with the text. (See “screen1.png” file for example, but DO NOT copy this design).
---- Insert and design how this question will appear at the top of screen 1: What kind of contest do you want?
Elements on the Second Level Screens (tracks):
Graphics---
--- Show each track with name and icon. Tracks can be shown within a shape, without a shape – however you want!
--- You must also show the “category” for the tracks. The category is not clickable – it is just there to break the tracks up into the right area. (reference file: screen2.png) file for example. (reference file: Track-names_and_content1.docx) for each category and track name.
Content
--- Each track will show three “points” of information. We do not want them to be actual bullet points, but they must be called out as three separate items. Use the three points found in the document and show us how a track will look highlighted with the points. (reference file: screen2.png) file for example, but DO NOT copy this design.
---- Insert and design how this question will appear at the top of screen 2: What track best solves your design problem? Also include space for a short sentence after this question using lorem ipsum copy.
Branding Guidelines
- Must use the provided template (flat PNG files you can just drop into your PSD) (reference file: template.png)
- Your design must be on a white background and complement existing Cockpit pages
- Colors for the platforms: (below are two options, RGB and hex the file Spoke-Graphic-Icons-Source.ai has been provided to reference the colors ONLY)
----Blue: RGB 63/169/245 hex #3fa9f5
----Green: RGB 122/201/67 hex #7ac943
----Orange: RGB 255/147/30 hex #ff931e
Target Audience
- TopCoder Copilots
- TopCoder Clients
- TopCoder Admin and Staff
Judging Criteria
- User Experience!
- How well you create the "Contest Launch Flow Design Updates" graphics and screens to look engaging, easy-to-understand, “graphical” and simple
- How well you enhance the user experience and make navigating through the contest launch flow easier
- Cleanliness of your graphic design
What to Submit
Preview JPG/PNG Image File
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 ZIP File
All requested contest requirements/screens as JPG or PNG files.
Source ZIP File
All fully editable original source files of the submitted design as required by the contest under "Source Files" in the side bar.
Final Fixes
As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.
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.