Challenge Summary
Welcome to CHAOS - CPR - Products Repository Website UI Design Challenge. In this challenge, we are looking for your help to come up with initial design direction for a web application that helps users easily manage details of the products that may be needed/accessed by variety of sources.
We will be supplying the wireframes that we recently completed, this should help you get started. We are looking for designs on what should the user see and experience when using the application!
Good luck and we’re looking forward to your submissions!
Round 1
Submit your initial designs for Checkpoint Feedback
1) Product Repository
2) Product Details
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
1) Product Repository
2) Product Details
3) Add Products
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The Purpose of this challenge is to come up with the look & feel and flow of the new application We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
Design Considerations:
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Branding colors, fonts are open to the designers.
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images related to this concept.
Design Size:
Desktop: 1024px as width and height as required
Challenge Assets:
Please download "Wireframe Reference.zip" and it contains two wireframes and we are looking for you to use "CHAOS - CPR Wireframes" as the reference for the entire storyboard design and "202048 (3rd)" is just for a advanced search reference (its mentioned below under Product Repository page)
Required Pages:
We are looking for the below pages to be designed/considered in your concepts.
NOTE: We had provided the wireframe to help you understand the flow of screens. It is just a reference for content, make sure your design is not just a coloring of the wireframe and look to improve the overall user experience.
1) Product Repository:
- This page shows the list of products, follow the content as shown in the wireframe
- Each row in the table can be dragged and can be rearranged, how should this be handled in designs - your designs need to help users know that the rows are draggable/can be moved, how can we do that? (perhaps an icon like shown in the 1st row left within the wireframe? - NOTE: In the wireframe, you can drag the first row.
- Main Call to actions in this page are “Bulk Import, Bulk Export, Add a Product”
- We need a pagination as there could be many products, how should this look like?
Inline Edit:
- Each entries within the table provides an option to inline edit, hover over a row and an item (Manufacturer, Family code, category) to see an edit icon that indicates the field can be edited.
- Click on the “Manufacturer Name” to see a text box with a icon (clicking on this saves the entered value)
- Click on a “Category Name” to see the “Category pop-up” that allows the user to search and change the category name - please design this pop-up, NOTE: wireframe is just a reference for content, feel free to improve them.
- When a user edits an item, then show a “Save and Cancel” button in the page, so a user can edit many items and save them as a whole instead of saving individual fields!
- Looking for your thoughts on how this need to be shown!
Search Bar and Auto-suggest option:
- Allow the user to search for products..come up with placement that really helps user.
- Click on the search to see options a drop-down that shows the “Auto-suggestion” when a user starts typing in the search box.
- How should this auto-suggest drop-down need to look like, also consider including the hover style.
- Please include the idea of “Advanced Search” as shown in attached submission “202048 (3rd)”, click on “Product Respository” > Advanced search..please include this in your designs.
Product/Category List and Save Product List:
- User will be able to sort the products list and they will have options to save the current list being shown
- In the left side, click on “+” icon to see a pop-up that allows them to save the list!
- Come up with ideas on how to allow the user to choose their desired product list, please look to include default, active and hover states for the buttons/link.
- At the bottom, you will find two tabs “List and Category”, do you have a better way to show these tabs in design? currently this might get missed as they are at the bottom of the page.
Sort Pop-up:
- Each of the column will have an option to sort, click on the inverted triangle in each of the column to see the sort pop-up
- This sort pop-up allows the user to sort by ascending/descending, clicking on “Ascending/descending will show a pre-loader - please come up with a thought for a pre-loader that can be used through this site.
- Enter some text in the text field shown below contains drop-down to see further options, please make sure to include them in your designs.
Bulk Import:
- Click on “Bulk Import” button to see a modal window, design this screen.
- Click on “Import” button to see two options (NOTE: please do not include these two options in your designs, they are just for wireframe purpose - click on it to see further flow), show us how the design need to look like for both Import Success and Failed.
- Come up with a design that shows the progress while importing the products..
- Clicking on “Review products” will show the list of products that were imported, how can we show this view?
- Feel free to come up with a design that you see fit..
Bulk Export:
- This allows the user to export the table in a format that is required.
- We need you to show everything as given in the wireframe, how will the drop-down look like?
Manage Grid:
- Click on the icon shown in 1st column header, this will open up a pop-up
- Please come up with a design for this screen.
Quick View (Product Details):
- Click on the Product number link (2nd column) in the table to have a quick look at the product details
- This shows some important details about the product, how the tabs need to be designed?
- We would like to see your thoughts on how this can be designed.
- Clicking on “Details” button should take the user to the “Product Details” page
2) Product Details:
This page allows the user to view the product details.
- Follow the contents as shown in the wireframe
- This shows some important details about the product, how do you think the tabs need to be designed? make sure it is consistent with the tabs used across the site.
- Each field allows inline editing, show us an example on how a user can know that the field allows inline editing and how they actually edit a field.
- Include a “Save and Cancel” button in this page, so a user can edit many field and save them as a whole instead of saving individual fields!
3) Add a Product:
- Follow the contents as shown in the wireframe
- Include a “Save and Cancel” button in this page, so a user can save the product details
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.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a application
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, or Adobe Illustrator as a layered AI 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. We may ask you to update your design or graphics based on checkpoint feedback.
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.