Challenge Summary
Welcome to the Hestia B2B "Help Center" Storyboard Design Contest. The goal of this contest is to design the layout and user interface for the new Hestia B2B "Help Center".
Hestia customers currently using the B2B application need to go to five separate pages to find help for their questions. For this contest we need you to design a centralized "Help Center" that can grow with the expansion of the B2B application. The Help Center needs to support many types of customers and be easy to use.
Contest Details Hestia is always looking to give their customers a better user experience by providing new and up-to-date features in their B2B Web Application. Hestia sells a variety of building products to contractors, builders, and others within the construction industry. Companies doing business with Hestia can register to use the Hestia B2B Application where they can search for products, check pricing, availability and place orders. When customers are looking for help within the B2B Application the Help navigation directs them to five separate page whose content can be overwhelming or confusing to understand. The goal of this new "Help Center" is to increase the usability of the Hestia B2B Application with better help features, increase the number of successful self-help events, and of course increase the sales of products and services (because users were able to solve their own problems quickly) The provided wireframes suggest a possible layout where the customer does not need to navigate away from the "Help Center" to gets answers to their questions. Customer will also need to find help in a variety of formats, in both English and Spanish. Design Requirements Concept Consolidate the five areas of the Help section into one user-friendly page ("Help Center"). The wireframe SUGGESTS a possible layout. Bring your ideas and solutions to this contest. The idea is the main "Help" navigation would only show "Get Online Help" and "Contact Us". Get Online Help would take the user to this new "Help Center". 1) Help Navigation - Using the current Hestia B2B Application site design - show us how this new Help Navigation would work and look within the site design. - The Help navigation item would show two options - "Get Online Help" and "Contact Us". 2) Get Online Help Reference wireframe "get_online_help.png" - This will be the first option that the user clicks on the Help link The sections are: - Search Help box and button - to search help topics, FAQs, and Videos. - List of Topics grouped by categories - List of Top 5 FAQs - Video player - please use a 16:9 aspect ratio - Links to the Video Library - This list displays links for up to 5 video titles, with a "more" link for the entire video library. The "more" link expands the complete Video Library list. - Customer Service - this section can toggle between English and Spanish, reference wireframe "contact_us_section.png" - Location Finder - Customer locates a Hestia branch/store by clicking the Find a Hestia location button, this will launch the "Location Finder" page. - Links to other resources 3) Search Results Reference wireframe "help_results.png" - This is the search results page from when a user enters search terms into the box and clicks "Search Help". - Results are returned below the search box. - The default video disappears; the abbreviated Video Library links list appears in the right column of the Results page. - Search results should have visual cues to signify if content is other than text, example are Video, PDF, etc... 4) Contact Us Reference wireframe "contact_us.png" - Customer has options to specify his preferred method of contact: phone, email, or text message. There is a reminder that he can email or call his Hestia associate, with the associate's contact info dynamically provided. 5) Top 5 FAQs - Customer chooses an FAQ from the Top 5 FAQs list. - The answer displays in a flyout or modal window. - User has options for [previous] and [next] to cycle through the five questions and answers. - User clicks [x] to close the flyout window. OR suggest another design solution 6) Location Finder Reference wireframe "find_branch.png" for the detailed sections - The Hestia Locations tools and resources display in main section or Zone 2 of the Help page. IMPORTANT - Follow the current Hestia B2B design standards - use the PSD GUI Kit - Keep things consistent. This means all graphic styles should work together. Target User - Potential Customer - Current Customer Judging Criteria - User Experience! - How well you create the "Help Center" graphics and keep things consistent with the current site design. - Ideas you bring to the "Help Center" - Cleanliness of your graphics and 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 All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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.
Round 1
REQUIRED STORYBOARDS - All noted screens for a design review. - All screens do not need to be complete - but we need a clear understanding of your design direction (to provide feedback) - 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 ALL REQUESTED ITEMS - 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 Hestia is always looking to give their customers a better user experience by providing new and up-to-date features in their B2B Web Application. Hestia sells a variety of building products to contractors, builders, and others within the construction industry. Companies doing business with Hestia can register to use the Hestia B2B Application where they can search for products, check pricing, availability and place orders. When customers are looking for help within the B2B Application the Help navigation directs them to five separate page whose content can be overwhelming or confusing to understand. The goal of this new "Help Center" is to increase the usability of the Hestia B2B Application with better help features, increase the number of successful self-help events, and of course increase the sales of products and services (because users were able to solve their own problems quickly) The provided wireframes suggest a possible layout where the customer does not need to navigate away from the "Help Center" to gets answers to their questions. Customer will also need to find help in a variety of formats, in both English and Spanish. Design Requirements Concept Consolidate the five areas of the Help section into one user-friendly page ("Help Center"). The wireframe SUGGESTS a possible layout. Bring your ideas and solutions to this contest. The idea is the main "Help" navigation would only show "Get Online Help" and "Contact Us". Get Online Help would take the user to this new "Help Center". 1) Help Navigation - Using the current Hestia B2B Application site design - show us how this new Help Navigation would work and look within the site design. - The Help navigation item would show two options - "Get Online Help" and "Contact Us". 2) Get Online Help Reference wireframe "get_online_help.png" - This will be the first option that the user clicks on the Help link The sections are: - Search Help box and button - to search help topics, FAQs, and Videos. - List of Topics grouped by categories - List of Top 5 FAQs - Video player - please use a 16:9 aspect ratio - Links to the Video Library - This list displays links for up to 5 video titles, with a "more" link for the entire video library. The "more" link expands the complete Video Library list. - Customer Service - this section can toggle between English and Spanish, reference wireframe "contact_us_section.png" - Location Finder - Customer locates a Hestia branch/store by clicking the Find a Hestia location button, this will launch the "Location Finder" page. - Links to other resources 3) Search Results Reference wireframe "help_results.png" - This is the search results page from when a user enters search terms into the box and clicks "Search Help". - Results are returned below the search box. - The default video disappears; the abbreviated Video Library links list appears in the right column of the Results page. - Search results should have visual cues to signify if content is other than text, example are Video, PDF, etc... 4) Contact Us Reference wireframe "contact_us.png" - Customer has options to specify his preferred method of contact: phone, email, or text message. There is a reminder that he can email or call his Hestia associate, with the associate's contact info dynamically provided. 5) Top 5 FAQs - Customer chooses an FAQ from the Top 5 FAQs list. - The answer displays in a flyout or modal window. - User has options for [previous] and [next] to cycle through the five questions and answers. - User clicks [x] to close the flyout window. OR suggest another design solution 6) Location Finder Reference wireframe "find_branch.png" for the detailed sections - The Hestia Locations tools and resources display in main section or Zone 2 of the Help page. IMPORTANT - Follow the current Hestia B2B design standards - use the PSD GUI Kit - Keep things consistent. This means all graphic styles should work together. Target User - Potential Customer - Current Customer Judging Criteria - User Experience! - How well you create the "Help Center" graphics and keep things consistent with the current site design. - Ideas you bring to the "Help Center" - Cleanliness of your graphics and 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 All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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.