Challenge Summary
Welcome to the Hestia B2B "Address Book" Design Contest. The goal of this contest is to design the user experience and storyboards that show a Hestia B2B customers available "shipping addresses" and allow them to control which addresses appear during the "ordering & checkout process".
We have a FAST Milestone! Please let us know if you have any questions!
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. In the current B2B application the customer sees "addresses" that are made available/selectable by them during the "checkout" process of purchasing products. The cannot edit or change these addresses - they are pulled directly from the B2B database and can only be changed by an Administrator. For this contest we would like you to design the "Address Book" user experience. We have provided an OLD design that you can use for a wireframe/reference. This new "Address Book" will be available to a user under their "My Account" page/settings. The Address book allows a customer to view any address they have on their account (the address you see in the left column) and any address they have selected to "appear" within the application while purchasing/checking out (right column). The OLD design/wireframe had the UX using a drag/drop method between column. You can keep this concept or explain to us a better? solution. Initially the user will have all of their addresses on the left. The actual addresses CANNOT be edited (this is still an administrator function). They can only be viewed (expand/collapse). A user could add all addresses from the left to the right by clicking the "Choose All" When an address is moved to the right column, it is still displayed on the left. The list on the right can have their display name/label changed. (Example: My Warehouse 8 can be changed to Office Building 2). The rest of the actual address information cannot be changed. The addresses on the right can be moved back to the left by dragging and dropping, or all can be moved back by clicking "Clear All". Design Requirements - Show updated UX/design of the Delivery Addresses page (image 1.jpg) - Show updated design with an address on the left and right expanded (image2.jpg) - Show what the right side will look like when completely empty, there needs to be indication to the customer that items can be dragged here. - Show what editing a display name looks like - Show how an address can be designated as the default address and how to select a default address (a default address can only happen to addresses on the right) - Show how to change the default address - Show a "new" notification to the customer that managing addresses is now available (similar to the "Mange Credit Cards" billboard in the source files) New design elements that need to be shown on the storyboards: - Show the number of addresses in the left and right address columns, this should be displayed near the top. - There needs to be an area that tells the customer what to do if they have questions about their address or need them updated. Sample sentence; "Do you have questions about your addresses or is an address wrong, contact your branch associate with address inquiries." - A default address needs to be represented (this will only show when there is at least one address in the right side) - Be sure to use the current Hestia B2B GUI Kit style guide (example: do not use arrows for expand collapse, use plus, minus) IMPORTANT - Keep things consistent. This means all graphic styles should work together with the existing My Account pages. - All of the graphics should have a similar feel and general aesthetic appearance. - Always refer to GUI Kit before you design. - Your design should look like it belong within the Hestia B2B application/My Account pages. Target User - Potential Customer - Current Customer Judging Criteria - How well you create the UX and design for the Hestia B2B Address Book - 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 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. - Address book screen(s) and interactions Please number your screens (01,02,03,04,05,06 etc)Round 2
Your submitted FINAL designs - Address book screen(s) and interactions Please number your screens (01,02,03,04,05,06 etc)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. In the current B2B application the customer sees "addresses" that are made available/selectable by them during the "checkout" process of purchasing products. The cannot edit or change these addresses - they are pulled directly from the B2B database and can only be changed by an Administrator. For this contest we would like you to design the "Address Book" user experience. We have provided an OLD design that you can use for a wireframe/reference. This new "Address Book" will be available to a user under their "My Account" page/settings. The Address book allows a customer to view any address they have on their account (the address you see in the left column) and any address they have selected to "appear" within the application while purchasing/checking out (right column). The OLD design/wireframe had the UX using a drag/drop method between column. You can keep this concept or explain to us a better? solution. Initially the user will have all of their addresses on the left. The actual addresses CANNOT be edited (this is still an administrator function). They can only be viewed (expand/collapse). A user could add all addresses from the left to the right by clicking the "Choose All" When an address is moved to the right column, it is still displayed on the left. The list on the right can have their display name/label changed. (Example: My Warehouse 8 can be changed to Office Building 2). The rest of the actual address information cannot be changed. The addresses on the right can be moved back to the left by dragging and dropping, or all can be moved back by clicking "Clear All". Design Requirements - Show updated UX/design of the Delivery Addresses page (image 1.jpg) - Show updated design with an address on the left and right expanded (image2.jpg) - Show what the right side will look like when completely empty, there needs to be indication to the customer that items can be dragged here. - Show what editing a display name looks like - Show how an address can be designated as the default address and how to select a default address (a default address can only happen to addresses on the right) - Show how to change the default address - Show a "new" notification to the customer that managing addresses is now available (similar to the "Mange Credit Cards" billboard in the source files) New design elements that need to be shown on the storyboards: - Show the number of addresses in the left and right address columns, this should be displayed near the top. - There needs to be an area that tells the customer what to do if they have questions about their address or need them updated. Sample sentence; "Do you have questions about your addresses or is an address wrong, contact your branch associate with address inquiries." - A default address needs to be represented (this will only show when there is at least one address in the right side) - Be sure to use the current Hestia B2B GUI Kit style guide (example: do not use arrows for expand collapse, use plus, minus) IMPORTANT - Keep things consistent. This means all graphic styles should work together with the existing My Account pages. - All of the graphics should have a similar feel and general aesthetic appearance. - Always refer to GUI Kit before you design. - Your design should look like it belong within the Hestia B2B application/My Account pages. Target User - Potential Customer - Current Customer Judging Criteria - How well you create the UX and design for the Hestia B2B Address Book - 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 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.