Challenge Summary
Welcome to the CHAOS-CPR - Products Repository Wireframe Concepts Challenge. In this challenge, we are looking for your help to come up with wireframe for a web application that helps users easily manage details of the products that may be needed/accessed by variety of sources.
We are looking for wireframe (Axure) solutions based on requirements from our client. We’re also looking to the community to come up with interesting ideas for the workflow - we’re absolutely open to creative solutions!
At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow of the application.
Round 1
Initial Wireframe Concepts of the below pages for checkpoint review.
Any additional features or screens that will help explain your idea.
Round 2
Final Wireframe Concepts for all given requirements with any checkpoint feedback implemented.
Any additional features or screens that will help explain your idea
The Purpose of this challenge is to come up with the wireframe that helps define the flow of application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
Wireframe Expectations:
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- 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.
- This is a web application, consider having a size that would fit in a desktop!
Benefits of this application to customers:
This application will be providing great benefit to customers.
- It helps for better product data available online leads to more requests for quotes, more specific inquiries, and a higher likelihood they will complete the transaction.
- Having a more complete catalog to search provides more opportunities to buy.
- Existing customers calling their salesperson, store, or call center with a question will appreciate getting answers on the first call and not be bounced around from person to person
- e-Procurement solution setup and maintenance times will be decreased..
Suggested Screens:
We need below screens in your wireframe, feel free to add any additional screens that is required to explain the flow of your wireframe..
1. Product Repository (e-catalog):
- Product repository is the collection of products data and we are looking some intuitive ways to manage the products data!
- We need to provide the ability for the user to search products within this repository, how should the search results be shown?
- Allow the user to filter through the products..
- User will have the ability to add new products through bulk import (please see more information on this below) or allow them to create a new product.
- We also need a way for the user to export the list of products available in repository, would be good if we allow users to filter the repository and export the filtered catalog!
- Need to display hierarchical categorization of products (For Ex: Nitrogen > Liquid Nitrogen (N2), Compressed Nitrogen Gas, Nitrogen Gas Argon Mixture, Nitrogen Gas Hydrogen Mixture, etc..)
- We like the way how images (Album Arts) are organized in iTunes (For ex: Album in iTunes is similar to Product (e.g. Nitrogen), Tracks in iTunes is similar to a specific Item within product (e.g. Liquid Nitrogen (N2)) and Album art (image) is applicable to all tracks under album - so, we will have product image defined for the main product (Nitrogen) and all other items under it will have the same image.
Bulk Import:
- When we have many products to be uploaded then user can utilize the option of bulk import.
- User will have the ability to bulk import data to this product repository
- Generally, bulk uploads might accept only specific file formats - we need to clearly indicate this information in the interface
- Come up with ideas on how to show the progress of bulk import?
Bulk Export:
- Also provide a way for the user to export/download the data from this application..
- Show some help information on the format the file will be downloaded (usually it is downloaded format that will be used for websphere)
Create/Add New Product: (optional)
- User should be able to add new products...show us how a user can add a new product to this repository, please use the fields as given in product details below.
- Show us how the input validation need to be handled - if the enters value that a field doesn't accept, how do we need to show the error?
- User will have the option to add attributes templates to the product, please see "Hargoods_Attribute_Templates" to get an idea on what these templates are..
- Each of the attributes will have a Template Name and attributes under it (Template Name > Attribute name 1, Attribute name 2, and so on..), provide a easy way to add/edit attributes as required.
2. Product Details:
- Each of the product would contain following details (please find the exact field details in the attached excel sheet - "MPD - Field Name" is the column that has the field we need, other columns are more of technical information..some could help explain the type of data required.)
- We need a way for the user to manage the product details, allow the user to edit the product details. Note: While editing the product, user will need options for input validation i.e. how will the errors be shown while entering.
- User will have option to add additional attributes to products
- Looking for your thoughts what other features need to included in this view.
Product Images:
- We need a way for the user to upload full size product images, note that a thumbnail is auto-generated when the user uploads the photo!
- We like the way how images (Album Arts) are organized in iTunes (For ex: Album in iTunes is similar to Product (e.g. Nitrogen), Tracks in iTunes is similar to a specific Item within product (e.g. Nitrogen 142) and Album art (image) is applicable to all tracks under album - so, we will have product image defined for the main product which will have
Product Details: (Please grab the product fields from the attached excel)
* Core Info
* Ordering info (part number, etc..) and Descriptions (marketing short, marketing long, invoice-length, etc..) - Marketing Info
* Technical data (pressure, volume, etc..)
* Regulatory info (Hazard class, NFPA ratings, COC, etc..)
* Cross-references (JV/competitor part number) - this refers to the competitor part number reference. For ex: Client's competitor may be supplying the same product as the client, so we need a way to indicate/add those corresponding part number of the competitors product.
3. Homepage: (Optional)
- We need a landing for this application.
- We are looking for your thoughts on what need to be shown on the landing page.
Target Audience:
This application is a great benefit for internal groups.
- e-Commerce: Establish “single source of truth.” Improved data quality. Capture data that is generated then lost. Reduce rework. Decreased implementation time.
- Sales: Quick access to detailed product information. Lock in sales quicker.
- Customer Care Center: Be able to help more customers on first interaction. Respond to customers more quickly.
- Specialty Gas Technical Support: Reduce rework. Assist in sales training
Reduced support requests.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Judging Criteria:
Your submission will be judged on the following criteria:
- User experience - redo of the current site flow, and navigation to consider responsive layout as well as additional content detailed.
- 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.