Challenge Summary
Welcome to the My Topcoder Settings Design Challenge. We are looking to redesign and improve the “My [topcoder]” settings page and how a [topcoder] member users the setting controls. In this challenge we are providing an existing base design (the new site!) and we are focusing in navigation.
Round 1
For your R1 deliverables please submit the requested screens design under “Design Requirements” section.
- Navigation
- Content
1) Personal Information
4) Other Preferences
- Improvements
- Desktop and Mobile views
Round 2
Final design will contain all the requested screens under “Design Requirements” section plus any updates from client feedback.
- Navigation
- Content
1) Personal Information
2) Profile Picture
3) NDA
4) Other Preferences
- Improvements
- Desktop and Mobile views
Challenge Details
The goal of this challenge is to redesign the existing user experience of the My [topcoder] account settings page so it is a more efficient and useful page for YOU - our community member! This challenge is focused on designing (adjusting) the navigation. We are providing a baseline mockup for you to work on.
Design Problem
- The current My [topoder] account settings page is outdated and was a quick color fix to fit within our new branding by using a provided baseline (Baseline.zip).
- Create storyboards that represent the navigation from the Help Center with some modifications (attached TC_HelpCenter_Storyboards.zip for you to extract navigation), four (4) pages in total.
- Implement page content (UI Forms) into your new work (MyTopcoder_Storyboards.zip)
Design Requirements
Navigation
- See Mockup.png. This defines the layout we’ll use. You must represent this into the baseline PSD files (desktop and mobile).
- Design an icon that represents "my [topcoder]" and “settings”. It should be placed over the blue flag on the page title. See the GUI Kit different icons so you follow the same style.
- Design icons for each of the left navigation items.
- Show the following items for the navigation (similar the provided mockup):
-- Personal Information
-- Profile Picture
-- NDA
-- Other Preferences
Content
Follow the GUI kit to provide the same look-and-feel to the UI forms from MyTopcoder_Storyboards.zip in the following pages:
1) Personal Information
- See 06 MyAccount_Name and Contact.PNG and 07 MyAccount_Name and Contact_Edit.PNG for guidance.
- Use the following fields only:
-- Handle (required).
-- First Name (required).
-- Last Name (required).
-- Email (required).
-- Secondary email.
-- Password (required).
-- Confirm password.
-- Address.
-- Phone.
-- Country to represent.
-- Time Zone.
-- Shirt size.
-- Member since date (read only).
2) Profile Picture
- See 08 MyAccount_My Profile Photo.PNG.
3) NDA
- Place a simple "NDA status" (signed or not with date).
- Place a widget/placeholder, big square, similar to a text editor to represent the widget.
4) Other Preferences
These items doesn’t have content to display individually. You must design hyperlinks, buttons or whatever you find suitable for them. Provide an alternative version with these items as indented item of the navigation level.
- Payments Center.
- Forum Preferences.
- Blacklist.
- Privacy Preferences.
- Email Notifications.
- Referrals.
- Visa Letter status.
Improvements
- We are open to suggestions and proposals for navigation organization or layouts. You are encouraged to provide that extra plus to make us think about your ideas.
- We’re not graying out non-selected icons in the 2nd level nav as the help center navigation does.
- Perhaps the profile picture itself can be presented, with controls available on hover to update it, rather than requiring a separate preferences section.
- Think of better ways to display the links in “Other Preferences” (maybe individual 2nd level nav items for Forum and Payment center?).
Branding and Guidelines
- The [topcoder] website is responsive. We need you to provide desktop and mobile views of the screens.
- Desktop: 1010px wide.
- Mobile: 320px wide.
- Follow the flat design theme in the storyboard and please consider great use of white space.
- See the provided Website PSD GUI Kit. The design needs consistency among all the features you create.
Target Audience
- YOU!
- New and existing [topcoder] community members; clients also.
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.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.