Challenge Summary
Welcome to the Hestia New Platform Customer Registration Design Contest. Hestia is currently redesiging their B2B website and the goal of this contest is to plan and design the user experience for "Customer Registration". Focus on the different Hestia website users and what they should see and experience when registering to use Hestia's website and services.
We are focused on creating a world class user experience for Hestia's customers.
Round 1
Initial Design
0. Add New "Sign Up for Email"
1. Become an Online Customer
2. Step 1: Enter Account Information
3. Step 2: Enter Organization Information and Contact Information
4. Thank you
5. Checkout
Discuss your design with the client (notes or images)
Round 2
Final Design
0. Add New "Sign Up for Email"
1. Become an Online Customer
2. Step 1: Enter Account Information
3. Step 2: Enter Organization Information and Contact Information
4. Thank you
5. Checkout
6. Sign in as Registered User
7. Checkout as Guest
Discuss your design with the client (notes or images)
Contest Details
Hestia is redesigning their B2B website and this contest is focused on creating an inviting user experience for customers who are looking to quickly register and gain access to available tools and services.
Page Requirements:
- Use the attached Hestia-Platform-Storyboard.zip as base for your design
- The provided screenshot are to be used as wireframes - a starting point to improve Hestia Site Registration. Feel free to suggest to us any ideas/solutions.
- All text needs to be editable in your storyboard design.
- All wording in the screenshots are to help you design the page. You're encouraged to suggest to us better/best practices registration wording.
Add New "Sign Up for Email"
- We need to add in the header NEW "Sign Up for Email " link.
- Create a plain/flat icon like others.
- Make sure it placed consistently for all pages created in this contest.
User Scenario I - Registration Flow
Page as base design: 01_1_home_professional_not_logged_in.png
- Click on "Register" link will take user to Registration Form landing page, where user can select the registration option.
1. Become an Online Customer
Screenshot: Scenario1a.png
- This is first page user see when click Register link.
- There's 3 options need displayed:
-- My organization already has an account, and I have the account number.
-- My organization has an account, but I don't have the account number.
-- I am a new customer
- Use browser default styles for checkboxes and other forms.
- After choose "I am a new customer", then select "Begin Registration" button, user need taken to 1st step to enter their Account Information.
2. Step 1: Enter Account Information
Screenshot: Scenario1b.png
- Notice the "?" icon. That need display tooltips that explains information of related row. How should it look?
- You also need to show disable state for input and checkboxes.
- How asterisk should placed/design?
- How should the typography look?
- Design the validation style when user submit the form. Sample of how validation error looks (Scenario1b-error.png)
3. Step 2: Enter Organization Information and Contact Information
Screenshot: Scenario1c.png
- Basically this will use same design from step 1.
- Dropdown and Checkboxes need default browser based style.
- Create proper textarea for Terms of Registrations.
- Notice there's placed 3 links of "Terms of Access", "Terms of Purchase" and "Privacy Policy"
- Click one of those 3 links need show up modal windows. How you design the modal?
- Below textarea need "Accept" and "Decline" option
- Button in the bottom need show "Return to Step 1" and "Register" button
4. Thank you
Screenshot: Scenario1d.png
- Design this page so it will give user clear ideas of their registration status and what they need to do next.
- Text links should clear enough to see.
User Scenario II - Checkout Registration
5. Checkout
Screenshot: Scenario2a.png
- After a Guest User puts product(s) in their cart and then clicks on the checkout button. The user will see a page with these options
1) Sign in as Registered User
2) Register with Hestia
3) Checkout as Guest
6. Sign in as Registered User
Please create following flow design in your submission
Screenshot: Scenario2b1.png
- This page show when click "Forgot User ID" link.
Screenshot: Scenario2b2.png
- This page show when click "Forgot Your Password" link.
Screenshot: Scenario2b3.png
- This page show when click "Sign In" but without values on inputs.
7. Checkout as Guest
Scenario2c.png
- This page show when user click "Checkout as Guest" button
- The page divided into 2 columns "Delivery Info" and "Payment Billing Info"
- Continue button need clearly visible.
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file.
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.