Challenge Summary
We’re excited to introduce the Topcoder Dashboard, welcome!
For this phase, we want to design a responsive page for the brand new dashboard page of the Topcoder website. We’re looking forward for a design that is consistent with the existing brand and also to convey the use of an easy tool for users.
It’s one page only, it’s that simple. Best of lucks!
Round 1
For your R1 deliverables please submit the requested screens design under “Design Requirements” section.
- Dashboard Desktop View
- Dashboard Mobile View
Round 2
Final design will contain all the requested screens under “Design Requirements” section plus any updates from client feedback.
- Dashboard Desktop View
- Dashboard Tablet View
- Dashboard Mobile View
The primary goal of this challenge is to design the look and feel of the Dashboard page for logged in members. This page is going to be displayed right when an user logs in from the current Topcoder website. We envision a good-looking user interface, very easy to use and intuitive, desktop, tablet and mobile views.
Environment and Dimensions
- Responsive web design (Provide desktop, tablet and mobile view of the screens).
- Dimensions 1010px wide for desktop, 768px wide for tablet, 320px wide for mobile at any height.
- Provided template (Baseline.zip) for reference. The content and layout must be something NEW.
Branding and Guidelines
- Follow the provided Website PSD GUI Kit. 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.
Design Requirements
Overall
- Follow the provided wireframes as layout guidance but that’s not mandatory. You’re totally encouraged to offer ideas in order to improve that initial mock up.
- The style we're looking forward is dashboard-like. You can see that in web applications that simulate a desktop application behavior by adding noticeable widgets into a workspace. See some Dashboard samples for reference but DO NOT COPY ANYTHING!!
- You can provide a compact version of the current header and footer if appropiate. In the case of the footer, don't re-use the blog feed since it's already in a gadget in the dashboard.
- The order of the required features is open to change. We’d be glad to see this layout improved and rocked out!
Member Profile
- Display a profile picture (placeholder) no larger than 400 x 400px.
- It would be interesting to see some icon designs here to represent the required data.
Member Program
- Design an area with the following information that represents the Swift Program (extract style and anything you need from the page) with the following:
Apple'����s latest and greatest programming language for iOS8 that will enable you to become a rockstar mobile developer and achieve fortune & glory untold.
We'll get you from a beginner to an expert and provide certifications to prove you are a great developer! Sign up now and check out the first mission.
Helpful Links
- These are static links that could be improved by using icons maybe? We’re open to ideas.
- Also, feel free to come up with another name for the section. Something more user friendly instead of “Helpful Links”.
Marketing Message
- Use a placeholder. This will display a banner for internal pages.
My Challenges
- Show a list of challenges the user is involved with.
- Each challenge should have:
-- Title (link)
-- Prize
-- Type (check icon from the provided UI Kit)
-- Current Phase
TC Blog Post / RSS
- Display a list of news feed.
- Each item should have:
-- Title (link)
-- Date
SRM
- Display a calendar of events for upcoming SRMs.
- See a rough sample here. Take data and layout sample making it feel part of your design.
Target Audience
- YOU! 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.