Challenge Summary
Welcome to "Andersen Compare Products Wireframe Concepts Challenge". In this challenge, we are looking for your creative ideas and "wireframe" concepts to help solve a user experience problem that customers have when comparing our products. The goal of this challenge is to create great wireframe concepts around user interactions for a product comparison tool that is easy to use and easy to understand for our customers.
At the end of this challenge, we are looking to see a creative ideas, interactions and user experience "wireframe concepts" that help us realize a better customer experience.
This challenge is focused on "wireframe" output and results. Be creative in your wireframes! This is not just about creating a generic wireframe experience. Wireframe a unique user experience for this comparision tool!
Round 1
Initial Design Concepts for checkpoint review
01. Homepage Scenario
02. Products Category Scenario
04. Product Comparison Tools Scenario
Any additional features or screens that will help explain your idea
Round 2
Final Wireframe Concepts plus any checkpoint feedback and updates
01. Homepage Scenario
02. Products Category Scenario
03. Product Details Scenario
04. Product Comparison Tools Scenario
Any additional features or screens that will help explain your idea
Challenge Details:
Andersen is the most recognized and most used brand in the window and patio door industry. They are the largest window and door manufacturer in North America. The company is known for its strong history of commitment to its business partners, employees, community and environmental stewardship. Andersen employs 9,000 people and markets products throughout North America and in South America, Europe, Asia and the Middle East.
Design Problem:
Visitors to our website (http://www.andersenwindows.com/) need to be able to compare our window products. Our windows currently are grouped by “Series” and within a series you can have multiple products. It is hard for our customers to understand the difference between a Series and a Product when doing comparisons. In order for our customers to make an informed decision on which product is right for their needs, we are looking to design "comparison" tool for our site visitors (and potential customers) where they can quickly compare and learn the attributes of:
a) Different product series and
b) Individual products (windows and doors that are children of those series)
Wireframe Goals:
- Give the user an easy to understand and compare products at both the series level and product level.
- Move users through the window selection decision flow (what is a unique way to do this?)
Note: The larger goal is to create a continuum of tools/functionality that the customer can access from different starting points. Generally, all customers travel in different paths with different priorities from tool to tool, yet they have a high expectation that the tools be interconnected allowing them to find the pertinent information they need – when they want it – and retaining their selections from one tool to the next.
Current Customer Usability Testing Results:
(See Exhibit A) - usability testing of a comparison prototype has established these expectations for this tool/features:
- Users would look for a product comparison tool after selecting specific product(s) from a list with images and brief overview
- No one wants to have to spend too much time to use the tool
- Users want to see product-specific information in the comparison results and get more information on attributes they don’t understand
- Users want to be able to link between comparison results and the product details
User Scenario:
- Imagine you as a homeowner and you are looking for products for your dream home or home renovation.
- You want to find good quality products for your home at www.andersenwindows.com.
- You are able to find products you're interested but can't make a decision which one to purchase
- You want to compare two or more products to quickly scan and move through the decision process and make a purchase
- You should be able to select products that you want to compare (You can compare at a Series level or a Product level)
- Those products show up inside of the new Product Comparison Tool
- Users can now easily see multiple products in an easy to understand view so they can make a decision.
Compare Tool Concepts:
Notes:
1) We are focused on the actual compare tool in this challenge
2) A user can go directly to the comparison tool from the home page or trigger it by searching through the products and selecting compare.
- Your wireframe design needs to be fresh, innovative, engaging and easy to understand.
- This tool will be optimized for both desktop, tablet and mobile, put this in mind when create your solution.
- Think on how to create an intuitive user experience
- How to sort products (sort by attributes like color, size, finish, etc)
- How to handle additional information (hovers, flyouts etc?)
- Communicate a good/better/best without using those terms (maybe a rating system or a 3 star product)
- A way to display a recommended product? or after making comparisons does it provide you with recommendations?
- Users expect to see all possible choices of a product that is a Series level product
- Making changes to that Series level product should update the comparison
- This tool will be embedded in our client site http://www.andersenwindows.com/ (future release).
Suggested Pages:
01. Homepage Scenario
- Create it for Desktop only.
- This page will be appear by default when customer open our client site.
- There should be some section create in this page that show/marketing the comparison produts tools, clicking/tap this section will bring user to comparison tools homepage.
- Customer will be able to go to products category page from this screen by navigate the main menu.
- Layout for this scenario can be found from http://www.andersenwindows.com/
- Provide us new layout that more intuitive and easy to find information.
02. Products Category Scenario
- Create it for Desktop only.
- In this page, customer will be able to find list of products according to their category.
- Sorting and filtering products by some criteria? popularity? prices? etc?
- There are two type of products available in our client site, windows and doors.
- For each products, Customer will be able to explore the product category by two choices, "by type" or "by series".
- Customer can see list of products category, brief information and links that will bring them to product details page.
- Existing products category page can be found from here : http://www.andersenwindows.com/product/awning-windows/
- Provide us new layout that more intuitive and easy to find information.
- Customer should be able to choose several products from this screen and bring all the products they've select to comparison tools page.
03. Product Details Scenario
- Create it for Desktop
- This screen will show details information about specific products.
- There should be some way for user to go to comparison tools page from this screen.
- Sample content for this page can be found from here : http://www.andersenwindows.com/products/100-series-awning-window/
- Provide us new layout that more intuitive and easy to find information.
04. Product Comparison Tool Page(s) (the focus is on this page and features)
Create for Desktop and Mobile
- The customer arrives on this page and they want to be able to compare products.
- Customer needs to be able to search for products, filter and compare them
- Customer will be able to compare products base on individual products OR products series category
- Sorting and filtering products by some criteria? popularity? prices? color? finish? material? etc?
- For individual product comparison, compare the attributes of 2-4 products on a single page
-- Material
-- Exterior colors
-- Interior colors
-- Grille patterns
-- Hardware colors
-- Exterior Trim
-- Glass options
-- Energy rating
- For Series comparison, compare the attributes of all Series on a single page (see Exhibit B)
- In this page, customer should have ability to see how different selections change the look of the product and the price
- How to handle additional product information such as explanation for material type (popup? modal window? navigate to new screen? bubble message? tooltip?)
- Ideas for communicating good/better/best products without using those terms
- How a user evaluates options and sees a representation of what they’ve selected in the product image (image changing when they've changed colors)
- How this comparison tool lends itself to recommendations for our customers / site visitor
- There should be a function to remove products from the grid if user don't want to compare it anymore.
- Ability to save, print, share or submit for a quote
- Access to attribute definitions without leaving compare page
- Access to more details on product page (warranty, care and maintenance, installation)
05. Notes
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
Branding Guidelines :
- See http://www.andersenwindows.com/ to get clear information about products and content for your wireframes.
- See our documentation attached in challenge details.
- We are looking or clean wireframe designs
Wireframe Expectations:
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
- Use note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Target Audience:
- Primary audience is homeowners, representing approximately 80% of site visitors.
- Secondary audience is builders and architects, who want to use a comparison tool with their clients (homeowners).
Judging Criteria:
Your submission will be judged on the following criteria:
- Wireframe Concepts! Did you try or suggest somethign new?
- Completeness and accuracy of the areas of functionality and content
- How well your wireframes provide a consistent user flow and clear information architecture for the application
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.