Challenge Summary
Welcome to the Hestia B2B New Platform E-Commerce UX Design Contest II. This contest is a continuation/build on the the NEW Hestia B2B platform design. The goal of this contest is to design the "content" and "secondary" pages so Hestia can determine how the overall site navigation and content will flow for their customers.
NOTE: We have a FAST Milestone so we can get you feedback before the weekend. Let us know if you have any questions!
Round 1
Milestone Screens - what we would like to see to help provide feedback and direction
2). Navigation Screens
3). Product Landing Page(s)
4). Informational Landing Page(s)
6). Markets Served Landing page
Please number your screens (01, 02, 03, 04 - it helps us review them in order)
Round 2
Final Design - Final screens and any Milestone feedback
1). Professional Home
2). Navigation Screens
3). Product Landing Page
4). Informational Landing Page
5). Solutions Landing Page
6). Markets Served Landing page
Please number your screens (01, 02, 03, 04 - it helps us review them in order)
Contest Details
The TopCoder Studio Community just designed the NEW look and feel for Hestia's B2B application. We now need to continue designing the "navigation", "content" and 'secondary pages" to determine the different user click-paths and experience.
Design Problem:
- Hestia has an existing site and content but that content will need to be designed and placed within their new site.
- Hestia needs to continue planning out the overall user experience of the NEW Hestia B2B Platform
- Create an easy to follow path for information about relevant Products, Markets Served and Services/Solutions offered that is easy to follow (for customers and search engines)
- The new structure allows for the easy addition of new content sections and related pages
Pages we need designed.
- Use the new deisgn (attached Hestia-Platform-Storyboard.zip) as base for your submission and design updates.
- DO NOT REDESIGN the pages we have provided - you need to use them as a design guide for the new pages
1). Professional Home
screenshot: 1b-New-Professional-Home-LoggedIn.jpg
- We need some simple updates/merging of designs on this screen
- Take the "Quick Tools" design (right column from "Quick Tools") and place it into this screen (right column/top)
- Take the "PROPlus" design (right column from "PROPlus") and place it into the screen (right column/bottom)
2). Navigation Screens
screenshot: 3-New-Navigation.jpg
We need to see how the navigation fly-outs are designed and work
- Note you can add images or product images into the fly-out
Shop Departments Navigation
- How does this fly-out look/work? - refer to "image1.png" for navigation items
Left Column Categories
- How does this flyout look/work?
Top Navigation Fly-outs
- Design the "Service & Programs" fly-out (image4-nav.png)
- Design the "Markets Served" fly-out (image6-nav.png)
- Update this design
- Its hard to read the links on the navigation flyout
- Try a "flat gray" background (no gradient)
- Any other suggested design adjustments?
3). Product Landing Page(s)
- We need a Merchandishing design/template for Product Landing pages
- Example content (http://shop.ferguson.com/page/plumbing)
- We need this in the new Platform design
4). Informational Landing Page(s)
screenshot: image3.png
- The example is showing a Water Heaters Landing page
- Page has content/text/images about Water Heaters
- Informational landing pages provide lots of specific content on products categories, brands and related services.
- How should this page be designed? What is the page grid?
- Action buttons should prominent in page
5). Solutions Landing Page
screenshot: image5.png
- This provided example is content for the Service/Solution landing page
- We need this content but in our new platform design
- Action buttons should prominent in page
- Any graphics to help explains the services will be handy for user.
- Existing page/content (http://www.ferguson.com/professional#services)
6). Markets Served Landing page
- We need landing pages for the Hestia "Markets"
- We need this content but in our new platform design
Examples: (pick one (1) to redesign)
- HVAC (http://www.ferguson.com/professional/hvac)
- Plumbing (http://www.ferguson.com/professional/residential/plumbing)
- Government (http://www.ferguson.com/professional/government)
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
Target User
- Potential Customer
- Current Customer
Judging Criteria
- How well you create the new pages, templates and keep the overall design consistent
- Cleanliness of your graphics and design
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024px X 1024px 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.
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.