Challenge Summary
Welcome to the FAST!! Hestia B2B Mobile Design Updates and New Screens. This goal of this contest is to update the existing Hestia B2B Mobile Home page and also design new mobile product catalog screens for users who are not logged in yet.
Milestone submission is FAST!!. Make sure you join NOW and submit as soon as possible!
Round 1
We are looking for your initial design solutions for a client 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 Design
- Any Milestone updates requested by the client
-Notes.jpg: Any comments about your design for the Client
-NUMBER YOUR SCREENS (01, 02, 03 etc.) - its easier to review with the client.
The main goal of this contest is to update the home page of the Hestia B2B Mobile Application and also create new mobile screens for Hestia B2B Product Catalog for Non-Logged in users. Please review the contest details and let us know if you have any question. We are looking for some "NEW" approaches and investigation into best user experience solutions.
IMPORTANT
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Please reference the provided GUI PSD Kit to help make your design consistent across the application.
- We are providing the existing Mobile PSD design - make improvements to these files
1) Design Update:
Existing Home (logged in user):
Design Change: This is the homepage after a user logs in, we previously created this screen with 4 icons but after User testing it has been decided to just use 3 icons in the homepage(03 Home.jpg), so the current design needs to accommodate just three icons/links. See the attached reference design (02_1_scenario3_home.jpg – this is an old storyboard); here you can see the navigation going horizontal, we would to implement and improve on this design.
- Make the Homepage more interesting by using applying photos/imagery that makes the app more "Hestia"
- We would like to keep the existing elements “Logo / text in the yellow background / Logout link”.
- Use 02_1_scenario3_home.jpg as the reference design.
2) New Screens:
New Hestia Catalog Home (Non-logged Users):
We need to create mobile screens for non-logged users to view the product catalog like how we do on the main website (http://ferguson.com/FergusonSearch/RecordList.action), modified design of this layout is attached.
Your task is to convert the Hestia Website Catalog screens into storyboard design for Mobile Device (Android/iPhone).
General Requirements
- Still use the FOL logo in the mobile designs
- Have the ability to search/see products and login to see your homepage
- All Pages in the top we need to have a search bar with magnifying glass.
Home
- Make the Homepage more interesting by using some of the existing imagery from (modal/stock photos)
- We need this page to be more of marketing like fergusononline.com.
Product Catalog
- Product Search at the top
- Breadcrumbs
- We need to list all the categories here, use the data from the left navigation in "01_home_tile.png"
(Do some research on making this an "optimized" simple user experience)
Search Results
- Product Search at the top
- Breadcrumbs
- Mini title bar indicating “Search Results” and “# of Results”
- Show product list (product code/description/price/text-‘Unit of Measure: EA’/compare button)
- This page should allow the user to narrow the results, have a “Narrow Result” button. (Important!)
Narrow Results
- Product Search at the top
- Breadcrumbs
- Mini title bar indicating “Narrow Search By” in Bold letters
- Allow the user to narrow results by 'Top Manufacturers, Accent Color/Finish, Center Size, Collection, Faucet Mount, Material, Number of Handles, Spout Type and Watersense Labeled.
Product Details
- Product Search at the top
- Breadcrumbs
- Product Image/Product Manufacturer/Product Code/Product Description/Price/below that “Unit of Measure: EA”
- Need Features/Technical Information and Related Products as TABS - Show us how you will accomodate these TABS.
My List (Think about the design on this! - its a requested feature!)
- Product Search at the top
- Breadcrumbs
- We need to list the products (How should this be designed and easy to use?)
- We need "Remove" button - may be have it as an icon.
Target User
- Potential Customer
- Current Customer
Judging Criteria
- How well you create the update and new screens
- 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
Submit JPG/PNG as your submission format with 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.
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.