Challenge Summary
Welcome to TopCoder-CloudSpokes Registration and Profile Pages Storyboard Design.
We are building a NEW website from scratch and we need the Design Studio Community to help design it! The audience for our new site consists of both our customers and our community. It is our goal to give everyone a great user experience.
For this contest we need you to design some pages for registration and profile pages, by following the provided storyboard theme/look and feel from our previous contest.
So, what are you waiting for? Jump in now and get involve in our great change and improvements :)
Round 1
- Your initial submission screens for PC size.
- Any notes for client about your submission.
But we recommend you to submit the mobile screens too (if available).
Round 2
Your complete submissions with checkpoint feedback applied.
Primary Goal:
The goal of this contest is to design the registration, login, and profile pages for our new website. We are looking for your best approachment and concept how this should work by using the provided storyboard as your base design.
We are looking for a very clean, simple layout for these pages.
At the final you must provide your design in both devices, PC and mobile (see the provided storyboard as guidance)
Design Consideration:
- Please use the provided storyboard as your base design. Your design need to match the theme of this storyboard.
- These pages should be very clean and simple.
- Please keep things consistent.
- Follow the flat design theme in the storyboard and please consider great use of white space.
- Your design should be responsive, see the provided storyboard. We need you to design these pages in 2 (two) devices, pc and mobile.
- Feel free to design some icons or any other elements for these pages to make the design more standout where you think appropriate. But please keep in mind your graphics should follow the look and feel of the provided storyboard.
- Make sure your submission images name are arranged properly (i.e 01_Member_Profile.png, 03_a_Login_Error.png)
- Do some research how some other great website provide this information and functionality, simplicity etc. Remember, DO NOT copy anything, or you will get failed screening result.
Required Screens:
1. Member Profile Page
--This profile page is going to be very basic. We are not showing things like badges, graphs or other items in this first phase. Therefore, we need a very clean and simple layout for this page.
Required Page Elements (show this data):
- Member handle (use mahestro)
- Member photo (use placeholder no larger than 300x300 px)
- Member since Feb 16, 2007
- Country: Venezuela
- A table of the most recent forum posts (use data from here:http://apps.topcoder.com/forums/?module=History&userID=282718 )
- Current challenges the member is registered in. Show similar information that you see in the attached storyboard -- the grid view of the challenges.
---When designing this page, please keep in mind what will you want to see on a profile page.
---And also consider your layout to be responsive in smaller device too.
2. Registration Page
- Use the fields found in the png of the Cloudpsokes registration screen. Redesign however you see fit and match our theme.
Addition:
a. Somewhere on the page, you need to have the following content:
“Registering with CS-TC gives you access to the following sites:”
(Show logos for: TopCoder, Topcoder Studio, Cockpit, Cloudspokes)
b.Somewhere on the page, you need to show the following text with checkboxes in front of each option.
“Planning to compete?
* I’m a designer
* I’m a developer
* I’m an algorithmist
* I’m not sure yet”
--- This text and checkbox options are optional for the registrant, so find a way to make it feel separated from the form a little. Our concern is that it will make the form seem really long. How can you solve that problem?
--- It’s critical that this screen look very simple and enticing. Users typically don’t want to fill out a long registration screen, so it must look clean, simple and have good white space.
3. Validation & Errors on Registration screen
- Using your newly designed Registration screen, please show validation (show what a validation would look like when filling in the fields (weak or good password, missing field error, etc.))
- Do some research, we are welcome to see any ideas you have about this.
4. Check Your Email page
- Upon clicking the Register button succesfully, user will see this page.
- Use the following text:
“Thanks for registering. We have sent you an email with a activation instructions. If you do not receive that email within 1 hour, please email support@topcoder.com.”
5. Activation Confirmation page
- Upon clicking the link from the email for activation, user will see this page.
- Use the following text:
“Thank you for activating your account! We are in the process of merging two communities into one. As a member, you can now access all of the areas found within this site, plus TopCoder, TopCoder Studio, Cockpit and Cloudspokes.
- Place a button under this text that says “Show Challenges”
6. Login page
- Use the fields and social login options shown in the Login png screen from Cloudspokes. Redesign to match our theme.
- Login error -- please show the login screen you designed with an error message at the top that says "Your username or password are incorrect."
- “Forgot password” form (use styles from your register screen).
- Forgot password confirmation “Your password has been reset. Please check your email.”
IMPORTANT:
The social media buttons found on both the Registration screen and the Login screen must be redesigned to use APPROVED icons from each site. You will need to go to those social media sites and gather the icons they distribute to designers for this purpose. Questions about this? Ask in the forum!
Here are the links to the usage guideline and / approved icons:
- Facebook : https://www.facebookbrand.com/
- Github: https://github.com/logos
- G+ : https://developers.google.com/+/branding-guidelines
- Twitter: https://about.twitter.com/press/brand-assets
Target Audience:
- Current and potential customers
- Current and potential community (The entire TopCoder Community AND the entire Cloudspokes community)
Judging Criteria:
- How well your design follow and match the current theme of the provided storyboard
- Cleanliness and consistency of your graphics and design
- How well your layout work with the new theme of the site
- Is your design for all the screens responsive for all the devices?
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 contest submission requirements stated above.
Source Files
All original source files. Original source files should be saved as layered Photoshop PSD files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. If items were missed from the checkpoint round you may be asked to include them in your final design.
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.