Challenge Summary
Welcome to the Hestia Platform Redesign Planning and Wireframes Contest. The purpose of this contest is to help Hestia PLAN their new Platform redesign! Hestia is a wholesale distributor of a variety of plumbing and building-related products. They currently have a web appliction (Hestia B2B) that was built using the Studio/TopCoder platform! We are now in the process of reworking the user flow and functionality to include new users and site features.
The goal of this wireframe contest is to plan and design an easy-to-use, efficient browser-based website that incorporates the different Hestia users and provides for a seamless B2B and B2C user experience!
At the end of this contest we are looking for a process flow, plan and layout design of the pages mentioned in the contest details. Include your thoughts or notes to help improve the user experience.
We have a FAST Milestone - so please submit your ideas ASAP so we can get you the feedback you need!
Round 1
Your submitted Wireframes for a Milestone Review
- Navigation structure between sites
- Initial "outside login" and "inside login" views
- Any questions you have
Round 2
Final Wireframes
- Final screens plus any Milestone updates
Contest Details
This contest is focused on creating a new B2B/B2C/Showroom site for Hestia. The client is focused on creating a new and inviting user experience where a B2C, B2B or Homeowner customer can search/find products quickly, create an account or login and use any available site tools to make their purchasing of products easier.
Design Problem
- Client has an existing site B2B application and is looking to include new users (B2C and Homeowners)
- The site needs to be task orientated - a user needs to be able search, register or login and find things quickly
- Note: we will be designing this as "Responsive" if you want to explore responsive "grids"
Definitions:
B2B: Business to Business
- This is a Business who is buying products from Hestia to use in their business or resell
- B2B is Wholesale instead of Retail
- Existing (B2B reference)
B2C: Business to Consumer
- Sites like "example1" and "example2" would be B2C because anyone (you or me) could purchase products from them.
- B2C is Retail instead of Wholesale
- Existing (B2C reference)
Homeowner/Showroom
- This is also a "B2C/individual" user but they are looking for more specific items or galleries of products beyond just searching and buying.
- We will want to direct the Homeowner to the "Showroom" site
- Existing (Homeowner reference)
Wireframe Scenarios
Hestia.com = top level domain
- This page would become a typical B2C ecommerce where a user could search and purchase products
- A user can Register or Login OR go to the "Homeowner" areas to see additional product galleries and video's
- "Outside" login will have different features compared to "Inside" login
Outside Login User
Navigation
This view is more geared towards the B2C user (see reference documents)
- Welcome Message
- Register or Sign-In
- Catalog/Products (see how other B2C sites show their catalog/products)
- Solutions/Services (see links under "Professional" here - these would be solutions/services in a flyout called "Solutions/Services")
- Markets Served
- Homeowner (need a way to invite the Homeowner to another area within the site. This could be part of the navigation or a graphic area but it would send them to another "Showroom" area to see product galleries, demo's, videos, community interactions)
- Locations (This would link to a way to find Hestia locations)
- Cart
Home
More of Merchandishing focus (Products for Sale, Hot Deals etc.)
- Quick way to Search/find products
- A user can search/find products and check-out as an anonymous user
- A user can Register/Login at any point during the "Shopping" experience
Left column
- could be Product Categories
- ways to filter Product Categories (see refrence sites and images)
Center column
- Could be slideshow plus other merchandishing items
- Product Categories (image based)
- Top Sellers
- Site features/promotions
Right column
- Is this needed for this view?
- The center column could fill the right side columns
Footer
- Corporate Information (this links to Hestia corporate page/information - reference link)
- Connect with Us (social media type items - see bottom of Hestia.com - reference link)
- Hestia Brands (see bottom of Hestia.com)
- Locations (this would open the Hestia Locations Finder)
Inside Login User (user has logged in)
Navigation
User Registers or Logs into the site.
- Welcome Message
- Catalog/Products
- My Account
--- Orders
--- Payments
--- Company Information
--- Personal information/preferences
Pro Home
The user is now a normal B2C user or a B2B "pro" user depending on their Registration
Home would be configured based on the type of user - HVAC, Plumber, Contractor
- Quick way to Search/find products
- They will want to see their "site tools" and access order information quickly
Pro Left column
- could be Product Categories
- ways to filter Product Categories (see refrence sites and images)
Pro Center column
- Product Categories (image based)
Pro Right column
- Site tools (not available to "outside login" users - see references)
- Place an Order
- Get a Quote
Pro Footer
- Terms and Conditions (for logged in)
- Customer Service
- Corporate Information
- Connect with Us (social media type items)
- Hestia Branches
Screens/Scenarios we need to captures for the Wireframes
Download the attached screenshots and notes
NOTE: We are looking for NEW wireframes/layout so do not make your wireframes look exactly like the refrence items.
1) Outside Login Scenario
- Home (ex: Hestia.com)
- Register/Login
- Search/Search Results
- Product Details Page
- Solutions/Services Navigation
- Homeowner/Showroom Navigation (how does a user notice this and go to the Showroom?)
- Correct Footer
- Corporate information link
2) Inside Login Scenario
- Home (ex: HestiaPro.com) (with the correct "logged-in" navigation)
- Search/Search Results (grid view and listed view)
- Product Details Page
- My Acccount page(s)
- Correct Footer
- Corporate information link
3) Showroom Scenario
- Home (ex: HestiaShowrooms.com)
- User can create a Showroom account (so they can save their galleries/likes etc.)
- Find local branch
- Product Galleries
- Product videos
- Locations finder
Target User
- New and Existing Hestia Customers
Judging Criteria
- How well plan and help solve the Hestia navigation issues between a Normal user, Business user and a Homeowner user.
- Cleanliness of wireframes and instruction
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
Wireframes should be built in HTML, Axure, MS Visio or OmniGraffle. The resulting files are not critical in this contest. The most important point is that all the content is listed and the pages are linked together to show page flow.
Source Files
All original source files of the submitted ideas. Include notes within your wireframe
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.