Challenge Summary
Welcome to the Hestia New Platform Home Scenario and Product Details Storyboard Contest. We just finished updating/reworking the Hestia New Platform wireframes and we are looking to update the user interface for an upcoming presentation. We need your help to create the updated design based on provided layout concepts provided in the wireframe and details requirements below.
Checkpoint is this Friday!
Round 1
Your initial Checkpoint storyboard design solutions of:
1. Home Landing Page (Logged Out)
2. Home Landing Page (Logged In Professional)
3. Product Detail Page
Notes.jpg: Any comments about your design for clients
Round 2
Final storyboard design solutions of:
1. Home Landing Page (Logged Out)
2. Home Landing Page (Logged In Professional)
3. Product Detail Page
4. Any additional Checkpoint items
Notes.jpg: Any comments about your design for clients
Contest Details:
Hestia always looking to give their customers a better user experience by updating and enhancing the User Experiences of their existing websites and web applications.
For this contest we need your help to designing the user interface for the New Hestia B2B website.
Design Problem
- We want to IMPROVE and UPDATE the existing user interface and REVISE the user flows (based on the wireframes)
- We DO NOT WANT to call out the Homeowner and B2B Customer - we want them to PICK who they are by the products and content they click on!
- We are looking for an updated navigation where its more focused on "shopping and e-commerce tools" and less on the corporate links.
- The site needs to be profile task orientated - a user needs to be able search and find things quickly
- All of this with the as few clicks and pages refreshes as possible
Design Guidance
- Update and improve the New Platform user interface
- Review the "Hestia Mobile" design features, colors and integrate it into the New Platform design
- Review the direction of the "Hestia Sign In" design
Contest Attachments:
Hestia_WF_ Submission-source (Color + light border).zip
- Updated wireframe layout - please study this
- DO NOT COPY but "design" the user experience
Hestia_New_Platform_UI.zip
- Latest version of the New Platform design.
- This contest is focused on improving, editing and updating this user experience
Hestia_mobile_UI.zip
- Latest Hestia mobile user interface
- Use this to influence and update the New Platform design
- We like the colors and flat design
Hestia_Sign-In.zip
- Source files from a recent Hestia design contest
- Please notice the usage of flat theme design and big icons used.
- This design was influenced by the "Hestia Mobile" design
Contest Requirements:
For this contest we need you to focus on these three (3) pages
1. Home Landing Page (Logged Out)
Wireframe page: Homepage
Follow the content and navigation in the Wireframes - not the provided PSD souce files
- This is the customer landing page for shopping at Hestia
- The customer is not logged in yet
- Design the new header based on the content from the Wireframe
- Remove the Homeowner/Professional tabs.
- There's 3 content boxes to the right of the logo (Format will be graphics/icons and quick information)
- Browse Categories, would like to see how the browse categories flyout looks with products. Create separate screen how this should looks.
- Design the content areas
- Categories created as slider navigation
- Design the content areas below categories: "Hot Deals", "Create Lists", "ProPlus+ Rewards" and "Save Money"
- Services/Market Served should work as tabs (open/close). Create separate screen how each tabs looks. Create separate screen how each tabs looks.
- Match footer content
2. Home Landing Page (Logged In Professional)
Wireframe page: Home (Professional) - logged in
Follow the content and navigation in the Wireframes - not the provided PSD souce files
- A Professional Customer arrives on the site and logs in
- Note the changes between "logged out and logged in) (study the wireframes)
- Top navigation next to Search input only show "My Account", "My Wish List" and "Cart" button.
- Click "My Account" need show sub menu contains of "Orders", "Payments". "Company Information" and "Preferences"
- Design the "professional" content areas
- Need to design the horizontal slider bars: "Featured Products" and "Top Selling" area.
- Services/Market Served should work as tabs (open/close). Create separate screen how each tabs looks.
- Right column = Professional tools.
- Right column: Design the notifications area and interactions
- Right column: Design the quick tools
3. Product Detail Page
Wireframe page: Product Details (logged in)
Follow the content and navigation in the Wireframes - not the provided PSD souce files
- Review the page - design the content areas and items needed for the product details page
- This will be new Product Details page created for the New Platform design
- Product information in the left side, contains some quick information and product images slideshow
- Below Product image placed tab of "Accessories", "All Collections" and "Customer Reviews"
- Inside tabs user can navigate by click left and right navigation
- "Add to Cart" and "Add to My List" buttons need prominent enough
- In the right side, user can see "Specification", "Document" and "Related Product" boxes.
Target User
- Current Hestia Customers
- Hestia Professional Customer
Judging Criteria
- How well you understand the wireframe and user experience updates
- Cleanliness of your graphics and design
- Focus on improving the existing design.
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. We may ask you to update your design or graphics based on other winning placements.
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.