Challenge Summary
Welcome to Topcoder Code Your Way In Storyboards Design Challenge. We need you to design storyboards for one single website that will be held under the [topcoder] website, 4 unique pages in total with some tweaks. We’re looking for a very fun micro site to entice coders to submit a challenge.
NOTICE this is a FAST and tight deadline. Jump in now!!
Round 1
For your R1 deliverables please submit the requested screens design under “Design Requirements” section.
1) How’s It Work Page (Desktop View)
3) Get Your Golden Ticket Page (Mobile and Desktop View)
Round 2
Final design will contain all the requested screens under “Design Requirements” section plus any updates from client feedback.
1) How’s It Work Page (Mobile and Desktop View)
2) Solve The Problem Page (Mobile and Desktop View)
3) Get Your Golden Ticket Page (Mobile and Desktop View)
4) Confirmation Email Design
The primary goal of this challenge is to design a brand new micro site that shows information about an interesting contest to attend the TCO14. We’re looking forward to create a simple site, that follows the current branding of the [topcoder] website and it’s fun to see for any competitor.
About Code Your Way In
TCO14 is running a fun little competition to help attendees defray some or all of the cost of entry this year. It’s called “Code Your Way In”, and it works like this:
There is a micro site (http://codeyourwayin.topcoder.com) where anyone that plans on attending TCO14 can visit. Obviously, this needs better user experience, creativity with font treatment and graphics. This is what you will focus in mostly.
After signing in with their [topcoder] handle, visitors will use a web-based Arena to code a solution to a problem. There is a simple interface to: select a language; enter your code using a provided simple editor; test the code; and finally submit. Once a visitor has submitted a successful solution to the problem, they are rewarded with a ‘Golden Ticket’ that will grant them a partial (or possibly complete) refund for TCO admission fees.
Design Requirements
Overall
- Replace navigation items with: “How’s It Work”, “Solve The Problem”, “Get Your Golden Ticket”. Design something according to the current look of the site (see GUI Kit).
- Secondary navigation would be: “Login”, “Register”.
- Improve user experience of the page and content.
1) How’s It Work Page
- See http://codeyourwayin.topcoder.com. Your design will replace this page (desktop and mobile).
- We would like it to have a welcoming, approachable design that basically summarizes the process described in “About Code Your Way In” (see WelcomeWorkflow.jpg attached). It would be great if this information could be presented pictorially, as a 3-4-step diagram, that culminates in a fun illustration of a ‘Golden Ticket’ (w/TCO logo embossed in gold maybe). We’re open to ideas.
- Create an eye catching “Get Started” button nearby the graphic.
- IMPORTANT! Show the steps in a fun way! We envision an infographic-style workflow. See these samples we’ve created before. Use them as inspiration for this part of your design and DO NOT COPY ANYTHING.
-- Appirio Sales Infographic.
-- Appirio Customer Workflow.
-- [topcoder] 500k Community.
2) Solve The Problem Page
- See http://codeyourwayin.topcoder.com/login. Use the exact same content from this page.
- Format text and layout properly according to the site consistency guidance (GUI Kit).
- This page has two states (show them both, desktop and mobile):
2.1. User not logged in. Show the same page content from the link.
2.1. User is logged in. Login into this page and see the content, that’s what you will display.
3) Get Your Golden Ticket Page
- This page should be fun, and very simple. It has three states possible (show the three of them, desktop and mobile):
3.1. User not logged in. Display this message ‘Sign in Now on Topcoder.com’ (link/button) to claim your golden ticket.
3.2. User is logged in but hasn’t solved the problem. Display a big, bold graphical illustration of a Golden Ticket, but the ticket should be CUT OUT (dotted lines, no fill) with “You haven’t earned your Golden Ticket yet! Solve the problem first, then come back over here to get your ticket.”
3.3. User is logged in and has solved the problem. Display a big, bold illustration of a Golden Ticket, along w/a unique code displayed in the middle of the ticket. There will also be some explanatory text (use “lorem ipsum”) that will explain to user how to redeem / take advantage of the ticket.
4) Confirmation Email Design
- Maximum width is 620 pixels. Height is up to you.
- Design a simple email-friendly page that will work as a confirmation for users who complete the challenge. This design should be based off of the design for the State 3 of “Get Your Golden Ticket”. It should show basically the same content (illustrated ticket, unique code, and instructional text) in a format for email.
- See samples for reference. DO NOT COPY ANYTHING, use as inspiration only.
-- Studio Newsletter.
-- Topcoder Newsletter.
Branding and Guidelines
- Provide desktop and mobile view of the screens. Specific limitations 1010px wide for desktop and 320px wide for mobile, as the provided baseline (Baseline.zip).
- You can redesign header, footer and navigation. Use TCO14 logo instead of the [topcoder] logo on the header. The content and layout must be something NEW.
- Follow the provided Website PSD GUI Kit and TCO14 website. The design needs consistency among all the features you create.
- Follow the flat design theme in the storyboard and please consider great use of white space.
- You are encouraged to create icons and quality graphics for your design to standout where you think appropriate. Keep in mind your graphics should follow the look and feel of the site.
- Keep the same fonts. If you have any issue with the provided source files fonts just replace those fonts with a regular one (like Arial) and add a note in your submission explaining you made the change. You will be asked to replace those fonts if you become the winner. Declare your fonts according to the Studio font’s policies.
Target Audience
- YOU!
- Potential new members.
- Current community members and clients.
Judging Criteria
- Originality.
- Quality of design execution.
- Consistency. Design must feel part of the branding.
Submission File
Submit JPG/PNG image files based on challenge submission requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create one 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
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.