Challenge Summary
Welcome to the FAST!! Hestia Password Reset Page Design Updates. The main goal of this contest is to create new Hestia "login password page". When users click on “Forgot Password” here (Forgot password page), they get the “Password Reset” link sent to their email address. The email link then sends the Hestia Customer to the “Create New Login Password” page.
We are looking for a new page design!
Milestone submission is FAST!!. Make sure you join NOW and submit as soon as possible!
Round 1
We are looking for your initial design solutions for a client review:
- Notes.jpg: Any comments about your design for the Client
- NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.
Round 2
Final Design
- Any Milestone updates requested by the client
- Notes.jpg: Any comments about your design for the Client
- NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.
Contest Details
For this contest we are providing the latest design of the Hestia "create new password" screen (03_create_new_password.jpg). We would like you to update/improve it further based on thought in Password Checker wireframe image (Password_checker_wireframe.png) NOTE: This wireframe image is only a reference and does not depict the design.
Improvements on the functionality:Usually passwords are characterized by conditions that they need to contain at least 8 characters, contain at least 1 letter, contain at least 1 symbol or number etc. These password requirements are very common and are usually seen when creating new passwords for websites. For the Hestia application we are looking to improve the user experience and show a dynamic status when entering a password whether any of the above condition is met or not.
Initially we will show each of the following conditions (password checker) with a red indicator icon,
- Contain at least 8 characters.
- Contains at least 1 letter.
- Contains at least 1 symbol or number.
- Only valid characters used in password.
- Confirm New Password matches New Password.
As the user types in the “New Password” field, we need to dynamically indicate whether the password satisfies any of the conditions by changing the red indicator icon to green. Before the user can move on to the “Confirm New Password” field we need to have the first 4 conditions with green indicator icon.
Finally if the “New Password” matches with the “Confirm New Password” field, then the final condition also gets a change indicator from red to green. You will need to show these dynamic changes by creating multiple images.
Show us the following image scenarios:
You are updating only one page but please create the following images, so we can show it as a scenario to the client and for the prototypers
1) Create New Login Password
Initially we need to show the following,
- Follow the same header and footer on the design provided.
- We need 2 fields, New Password and Confirm New Password fields.
- Need a submit button
Show the following conditions (password checker) with red indicator icon, think on how you will be showing this icon
i. Contains at least 8 characters.
ii. Contains at least 1 letter.
iii. Contains at least 1 symbol or number.
iv. Only valid characters used in password.
v. Confirm New Password matches New Password.
2) First 2 conditions has been met
Assuming the user is entering the “New Password” field, the cursor is focused in that field and just indicate the 1st and 3rd condition in green indicator icon and all other conditions using red indicator icon.
3) First 4 conditions has been met
Now the user has moved to “Confirm New Password” field
- Change the first 4 conditions to have green indicator icon.
- Cursor is focused in “Confirm New Password” field
4) All conditions met
This is the final step, show all the conditions using green indicator.
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Reference the provided PSD GUI Kit for the Hestia design
- You can grab some design elements from our Design Style Guide to help you design the page.
Target Audience
- Potential Customer
- Current Customer
Judging Criteria
- How well you create the Hestia Password/Reset Page
- Cleanliness of your graphics and design
- User Experience
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 as your submission format with 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.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors
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.