Challenge Summary
Welcome to "Chemicales - Responsive Customer Portal Design Concepts Challenge". In this challenge, we are looking for your initial design concepts and ideas that will help us graphically realize the user interface for a new "Customer Portal" application. Our new application will be used by customers to help them find information specifically related to Chemicales services.
Review the provided user scencarios and design screen concepts (desktop + tablet) and click-path solutions. This is the first step in planning our new customer self service portal.
We will be presenting your checkpoint designs on Friday August 29th - please make sure you initial designs are presentation ready!
Round 1
Initial screens we would like to review and provide design feedback on:
- 01. Dashboard Screen (Desktop + Tablet)
- 02. Order Follow Up Screen (Desktop + Tablet)
- 03. Create Order Screen (Desktop + Tablet)
- 04. Follow up Case Screen. (Desktop + Tablet)
Please number your screens (01, 02, 03, 04 etc)
Checkpoint Advice: We will be presentating your submissions as part of an introduction to TopCoder. Please make sure your designs are presetation ready/refined for this specific checkpoint. Thank you!
Round 2
Final screens plus any checkpoint feedback updates:
- 01. Dashboard Screen (Desktop + Tablet)
- 02. Order Follow Up Screen (Desktop + Tablet)
- 03. Create Order Screen (Desktop + Tablet)
- 04. Follow up Case Screen (Desktop + Tablet)
- 05. Customer Insight and News feed Screen (Desktop)
- 06. Customer to Customer Screen (Desktop)
Please number your screens (01, 02, 03, 04 etc)
Challenge Description
Our client is a leading global distributor of specialty chemicals and related innovative products and services. They safely deliver chemicals (products, expertise, and relationships) that helps customers improve their quality of life through: affordable energy, clean drinking water, reliable food sources and products that improve our health, homes and environment.
We are looking to design a customer self-service portal (desktap and tablet) application that will enable/help our ccustomer to see specific information about our client services that relate to them.
The goal of this challenge is to kick-start the design and user experience discussion around how this Customer Portal application could possible look and work.
"Chemicales" is a code name for our client.
Screen sizes: Responsive
- Desktop screen
- Tablet size
Design Concept Goals
- How should this Customer Portal application graphically look?
- Review the brand - make sure your design is embracing their colors and brand - so it looks correct to their customers
- Look through the listed screens and think about the user experience
- As a customer of Chemicales - what should the priority features be?
- How quickly (when opening the application) could a customer find what they are looking for?
Branding Guidelines
- See the provided attachment (branding-guidelines.zip)
User Scenarios
Partner Self Service:
Imagine you are a customer of Chemicales and you would like to login into and see activity related to your relationship and services with Chemicales.
Suggested Design Concepts and Screens
00. Navigation
- How does the user navigate this application?
- Include navigation that you think fits with this application (Desktop and Tablet navigation)
- Focus on the priority items and how things should be sized
01. Dashboard Screen
Scenario: The ability of customers and vendors to log in and see information specific to them
- User should be able to access all the other pages/sections from the dashboard
- User can find summary of his transactions and the latest news from Chemicales on this screen.
- Scenarios to present - their current order status, new offers, ability to navigate to other screens to create new orders, complaints, socialize, etc.
- Explore how this page should work (and keep it simple!)
02. Order Follow Up Screen
Scenario: A customer can log into the customer portal and see the status of each order and where it is in the process including expected date and time of delivery
- This screen will be used by customer to check their current order status.
- Customer will be able to see the status of each of their order and where it is in the process including expected date and time of delivery.
- Tracking progress? Any idea? Showing progress in graph bar timeline style maybe?
- Explore how this page should work (and keep it simple!)
03. Create Order Screen
Scenario: A customer can enter an order through the customer portal, including re-ordering
- For new order, normal order screen items needs to be createed, choose product type (name and picture), quantity, address of shipment, product total prices, payments method, etc (other information needed)?
- Enhancement elements: product availibility? Estimation of arrival information after user enters order? etc?
- Explore how this page should work (and keep it simple!)
04. Case Follow Up Screen
Scenario: Ability for customer to follow up on a case/check status of a case via the customer portal (regardless of how the case was created). The ability of a Customer Service Representative to provide answers and/or comments on a case and have the appropriate ones displayed on the customer portal.
- Ability for a customer to follow up on a case/check status of a case via the customer portal (regardless of how the case was created).
- For this screen, assume customer already issued their complaints/inquiry to the application and waiting for updates from customer service.
- The ability of a customer services representation from Checmicales to provide answers and/or comments on a case and have the appropriate ones displayed on the customer portal.
- List of their Inquiry/complaint and their status.
- Resolving complaints/inquiry scenario?
- Satisfaction bar regarding complaints handling?
- Explore how this page should work (and keep it simple!)
05. Customer Insight and News feed Screen
Scenario: Marketing info for products, Checmicale whitepapers, allows fast access to Product & process info; Chemicales version of Google news - aggregrate and create news - content collaboration, if you increased your order by X you could save on fuel surcharges.
- Marketing information for Checmicales products like client whitepapers, allows fast access to product & process info
- News feed - aggregrate and create news - content collaboration, if you increased your order by X you could save on fuel surcharges.
- Explore how this page should work (and keep it simple!)
- Can include general information about products, markets specific Checmicales that would be useful to the customer and/or the supplier.
06. Customer to Customer Screen
Scenario: Ability for customers to communicate with each others through forums/chats that Univar moderates
- Ability for customers to communicate with each others through forums/chats that our client moderates
- Explore how this page should work (and keep it simple!)
Important Design Considerations:
- Keep things consistent. This means all graphic styles should work together.
- Pay attention to the suggested brand and colors
- All of the graphics should have a similar feel and general aesthetic appearance.
Target User
- Chemicales Customer and Vendor.
Judging Criteria
- Concepts! How well you think about this application and graphically show us your ideas.
- 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, 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.