Challenge Summary
Welcome to the "Hestia B2B "My Lists" Redesign Storyboard Update" Contest. The goal of this contest is to update the provided "My Lists" pages. The theme/look and feel should compliment the provided storyboards with the items and features outlined below. You will need to follow the provided image based wireframes and the details outlined below in creating your updated designs. This is a follow-up contest for the NEW and improved user experience for the next generation of "My Lists".
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. One of the current features is "My Lists". My Lists allows a user to select products and save them to a list where they can customize lists and save different grouping of products. "My Lists" allows a user a quick way to reorder favorite products or plan projects. This contest is the final contest before we start to prototype and build out the new "My Lists" - keep things consistent and your files should be "prototype ready" Design Requirements 1) Manage Lists Landing page Wireframe 1 - The customer will land on this page when clicking the "My Lists link" from the My List flyout. - The customer sees the Main content area (Save your favorite products) when they first land on this page. - When they click on a list on the left, the products will replace the main content area (See Wireframe 4). - They can Add a new list (this opens a modal window - see Wireframe 2). - They can also Upload a spreadsheet (this opens a modal window - see Wireframe 3). - A List can only have one level of sub-lists (See wireframe 4 for list depths). In the left-hand column are lists that can be dragged and dropped in any order and into each other (nested). The only Lists that cannot move are "Favorites" and "Top Products". Design Task 1: - Add Top Products - Design an icon for "Top Products" the trophy is just a placeholder 2) Add New List modal Wireframe 2 Design Task 2: - The modal needs to look like the wireframe - Update the buttons - The background should be the My List page of Wireframe 4. 3) Product Upload modal Wireframe 3 Design Task 3: - Create this Modal window - Needs to be placed on the My List background - Make the buttons consistent 4) Full Manage List pages Wireframe 4 This wireframe shows a fully used My List. You need to capture everything that is in the wireframe plus add in the Top Products list on the left. An example of a sub-list is "Baker's House" has Kitchen, Bathroom and Foyer below it linked by a line (See Wireframe 5 to see what a sub-list looks like active). In Wireframe 4 we are viewing Baker's House at the top level (Parent List). If the user clicks the Edit link it will edit the name of the list, Delete will remove Baker's House and all sub-lists associated with it. The move arrow is what the user uses to drag and drop lists. If the user clicks the cart button next to Baker House that will add everything in that list plus its sub-lists. Within the main content area (right column), the products that are in the selected list are displayed. Products need to be displayed as the 1st product, and need to show at least 12 products. If the user clicks on the image or the product codes they will be taken to the product details page. The user has to click a check box before they can move or copy the product to another list. (See how checked items are moved Wireframe 6). The list that the product is move or copied to will highlight in yellow for a moment then fade (See wireframe 6b). If a user does not check a product before moving they will get an error message. (see Wireframe 7). Design Task 4: - Review Wireframe 4 and add/edit the existing PSD to update the source files with the items in from the Wireframe - Update the page using the correct Hestia design styles/graphics 5) Sub List page Wireframe 5 This page is to illustrate how a sub-list will look when active in the left-hand column. Design Task 5: - The icons need to be changed to links and the move icon needs to be added. - The layout should be like Wireframe 4 (icons replaced with links etc) 6) Wireframe 6 This screen shows how checked items are moved. Design Task 6: - Update design to match Wireframe 4 6b) Wireframe 6b This screen shows how the list that the product is move or copied to will highlight in yellow of a moment then fade. Design Task 6b: - Update design to match Wireframe 4 7) Wireframe 7 This shows the error message if a user does not check a product before moving. Design Task 7: - Update background to match wireframe 4 8) Shopping Cart modal Wireframe 8 This is a modal for when a user selects a product from a list (checkboxes) and adds them to the cart. Design Task 8: - Create this modal window - This modal needs to be displayed on the Wireframe 4 background that is grayed out. 9) My List - Item Add modal Wireframe 9 This is a modal window for when a user adds a product to My list from a product search, the user can add the product to a list or create a new list that will be added to the My Lists left column Design Task 9: - This modal needs to be on the search results page - We need you to show us design using the screens of Search Result Grid View(fol-prototype-3.2/search_results_grid.html) and Search Result List View(fol-prototype-3.2/search_results_list.html) in attached prototype. 10) My List flyout modal Wireframe 10 This is a fly-out layer that shows all the high level (parent) lists that are in My list, this can be viewed from any page Design Task 10: - Update the look so it works with the My Lists look and feel. IMPORTANT - Follow the simple design direction - this is just the final step/update before the prototype - Keep things consistent. This means all graphic styles should work together. - All of the graphics should have a similar feel and general aesthetic appearance. Target User - Potential Customer - Current Customer Judging Criteria - User Experience! - How well you create the "My Lists" graphic updates keep things consistent with the current site design. - 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 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
Your submitted design solution for a 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 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. One of the current features is "My Lists". My Lists allows a user to select products and save them to a list where they can customize lists and save different grouping of products. "My Lists" allows a user a quick way to reorder favorite products or plan projects. This contest is the final contest before we start to prototype and build out the new "My Lists" - keep things consistent and your files should be "prototype ready" Design Requirements 1) Manage Lists Landing page Wireframe 1 - The customer will land on this page when clicking the "My Lists link" from the My List flyout. - The customer sees the Main content area (Save your favorite products) when they first land on this page. - When they click on a list on the left, the products will replace the main content area (See Wireframe 4). - They can Add a new list (this opens a modal window - see Wireframe 2). - They can also Upload a spreadsheet (this opens a modal window - see Wireframe 3). - A List can only have one level of sub-lists (See wireframe 4 for list depths). In the left-hand column are lists that can be dragged and dropped in any order and into each other (nested). The only Lists that cannot move are "Favorites" and "Top Products". Design Task 1: - Add Top Products - Design an icon for "Top Products" the trophy is just a placeholder 2) Add New List modal Wireframe 2 Design Task 2: - The modal needs to look like the wireframe - Update the buttons - The background should be the My List page of Wireframe 4. 3) Product Upload modal Wireframe 3 Design Task 3: - Create this Modal window - Needs to be placed on the My List background - Make the buttons consistent 4) Full Manage List pages Wireframe 4 This wireframe shows a fully used My List. You need to capture everything that is in the wireframe plus add in the Top Products list on the left. An example of a sub-list is "Baker's House" has Kitchen, Bathroom and Foyer below it linked by a line (See Wireframe 5 to see what a sub-list looks like active). In Wireframe 4 we are viewing Baker's House at the top level (Parent List). If the user clicks the Edit link it will edit the name of the list, Delete will remove Baker's House and all sub-lists associated with it. The move arrow is what the user uses to drag and drop lists. If the user clicks the cart button next to Baker House that will add everything in that list plus its sub-lists. Within the main content area (right column), the products that are in the selected list are displayed. Products need to be displayed as the 1st product, and need to show at least 12 products. If the user clicks on the image or the product codes they will be taken to the product details page. The user has to click a check box before they can move or copy the product to another list. (See how checked items are moved Wireframe 6). The list that the product is move or copied to will highlight in yellow for a moment then fade (See wireframe 6b). If a user does not check a product before moving they will get an error message. (see Wireframe 7). Design Task 4: - Review Wireframe 4 and add/edit the existing PSD to update the source files with the items in from the Wireframe - Update the page using the correct Hestia design styles/graphics 5) Sub List page Wireframe 5 This page is to illustrate how a sub-list will look when active in the left-hand column. Design Task 5: - The icons need to be changed to links and the move icon needs to be added. - The layout should be like Wireframe 4 (icons replaced with links etc) 6) Wireframe 6 This screen shows how checked items are moved. Design Task 6: - Update design to match Wireframe 4 6b) Wireframe 6b This screen shows how the list that the product is move or copied to will highlight in yellow of a moment then fade. Design Task 6b: - Update design to match Wireframe 4 7) Wireframe 7 This shows the error message if a user does not check a product before moving. Design Task 7: - Update background to match wireframe 4 8) Shopping Cart modal Wireframe 8 This is a modal for when a user selects a product from a list (checkboxes) and adds them to the cart. Design Task 8: - Create this modal window - This modal needs to be displayed on the Wireframe 4 background that is grayed out. 9) My List - Item Add modal Wireframe 9 This is a modal window for when a user adds a product to My list from a product search, the user can add the product to a list or create a new list that will be added to the My Lists left column Design Task 9: - This modal needs to be on the search results page - We need you to show us design using the screens of Search Result Grid View(fol-prototype-3.2/search_results_grid.html) and Search Result List View(fol-prototype-3.2/search_results_list.html) in attached prototype. 10) My List flyout modal Wireframe 10 This is a fly-out layer that shows all the high level (parent) lists that are in My list, this can be viewed from any page Design Task 10: - Update the look so it works with the My Lists look and feel. IMPORTANT - Follow the simple design direction - this is just the final step/update before the prototype - Keep things consistent. This means all graphic styles should work together. - All of the graphics should have a similar feel and general aesthetic appearance. Target User - Potential Customer - Current Customer Judging Criteria - User Experience! - How well you create the "My Lists" graphic updates keep things consistent with the current site design. - 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 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.