Challenge Summary
Welcome to the Hestia B2B "New Platform" E-Commerce Storyboard Design Contest I. Hestia is creating an all new B2B website and this contest is the beginning of a series of contests to completely redesign and improve the overall user experience for Hestia customers.
We recently ran a wireframe contest to redesign and plan the new B2B platform. We also recently ran a contest to design concepts for a new "e-commerce" site that was NOT using the existing Hestia style guide and GUI Kit.
The goal of this contest is to design, plan and storyboard out the provided wireframes (new Hestia B2B site) while using the e-commerce design concepts as your graphic design "start".
We are only requiring the "Home (Professional) - logged in" page for the Milestone - please focus on this and let us know if you have any questions!
Round 1
Initial Design for Client review
- 2) Home (Professional) - logged in
- Any additional screens you would like feedback on
Round 2
Final Design
1) Home (Professional) - Not logged in
2) Home (Professional) - logged in
3) Home (General User/Homeowner)
- All requested screens plus Milestone design updates
Contest Details
Hestia is always looking to give their customers a better user experience by updating and enhancing the user experience (UX) of their existing websites and web applications. Over the years the TopCoder Studio community has helped design and define the existing Hestia B2B application. Hestia is now completly redesiging and replatforming their B2B application!
Hestia is focused on creating a new and inviting user experience where new customers can discover Hestia and Hestia products and existing B2B customers can search/find products quickly, get into their account and use the available site tools to manage their business.
Contest Goals
Download and review the wireframes
This contest is focused on designing 3 pages.
1) Home (Professional) - Not logged in
2) Home (Professional) - logged in (Milestone required page)
3) Home (General User/Homeowner)
The goal of this contest is to design, plan and storyboard out the provided wireframes while using the e-commerce design concepts as your graphic design "start". This contest IS NOT just updating the storyboards to look like the wireframe layout - you need to review the resources and make design and user experience decisions on what will eventually become our new "Hestia e-commerce/B2B" site desgin.
Note: There are some minor flow changes needed that are not reflected in the Wireframes.
Wireframe Change 1)
Home (Professional) - Not logged in = will be the default home - not Home (General User/Homeowner). So the Homeowner and Professional tabs should be switched
Wireframe Change 2)
Remove "All Categories" from the Search box (not needed). You can keep the text "I am looking for..."
Wireframe Change 3)
Featured Brands:
- Change "Featured Brands" to "Most Popular Products" and move Featured Brands below it
- These should be in 2 rows.
Design Guidelines
Page 1) Home (Professional) - Not logged in
- This will be the default "Homepage"
- User is not logged in yet but they can see things that are available to them if they register/sign-in.
- A user can decide to continue as a Professional or switch over to the General User/Homeowner if that is who they are
- Most of these features are the same as the existing Hestia B2B but we need them in a new design
- Professional Tab: "for all your business needs" needs to be updated to "Count on Us"
Page 2) Home (Professional) - logged in
- This will be what the "Professional" user will see (Professional users are Plumbers, HVAC, Contractors etc)
- These are similar features to the existing Hestia B2B
- Professionals can now see their site tools like:
-- Find Order/Quote: (Users can search to find their past orders and quotes)
-- Quick Order: (Users can quickly type in product codes to place an order for products they know)
-- Upload Spreadsheet: (Users can upload .csv files of products)
-- My Wish List: (Users can save "lists" of products for projects they have or products they always order)
-- My Account: (Users can mange their account prefrences and features)
-- PRO Plus: (Loyalty purchasing "points" program - users are rewarded with "points"
Review the wireframe for all of the Pro features
- See the provided "Ferguson-Brand-Guidelines.docx" We would like the professional page to use the "metallic" as an accent color! (be careful with it, we don't want everything metal!)
- Refer to http://www.ferguson.com/FergusonSearch/RecordList.action for product navigation and product images
Screen 3) Home (General User/Homeowner)
- This is the view a General User/Homeowner might see. The goal of this page is to show customers product video's and photo galleries of products/merchandise to help them better understand how to update or remodel their own bathrooms and kitchens.
- Homeowner Tab: "for all your home needs" need to be updated to "Delivering your Dream"
- Refer to http://shop.ferguson.com/ for product navigation
Design Notes
- This is a new user interface - do not use the existing Hestia Style Guide or GUI Kit
- You are creating the first steps of a new user experience
- This application will be build using Responsive Design techniques. This contest is focused on the on the desktop browser version. Be aware of this.
- Use the provided Ferguson logo.
- We like the "tab chevron design" from the "Hestia order search storyboard" (Find-Transaction-Updates-Storyboard.zip) - please include appropriately
Downloadable Files
replatform-wireframe.zip
- New e-commerce wireframe layout that details the different user types and experiences
- Use the content and user flow from these wireframes
b2b-e-commerce-storyboard.zip
- Storyboard graphics/design as the "Start" of the new Hestia B2B experience.
- This is not the current Hestia Brand - you will need to integrate colors from the "Ferguson-Brand-Guidelines.docx"
- Note 1: The provided PSDs have Car Parts - Do not use car parts... use Hestia products.
Ferguson-Brand-Guidelines.docx
- Updated Hestia Marketing Guidelines
- Page 1: This is used for the "General/Homeowner" type user (marketing materials)
- Page 2: Note the Metal look - this is what we want to use as "Accent" for the Professional side
- Page 3: Proper "Brand" color usage - please use these colors
Ferguson-Logo.zip
- Hestia logo
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
- Existing B2B Customers
- New B2B Customers
- New Hestia Customers
Judging Criteria
- How well you create a new user experience for Hestia B2B by merging the concepts of the Wireframes and Storyboards
- 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
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.