Challenge Summary
Welcome to BTS ERP Application Design Challenge.
We need your help to come up with a brand new design solution from scratch for an ERP web application. We provide data sample and well defined stories for you to find the best way to display these data-intensive visuals. We need to optimize the time the user spends on this application. Jump in now!
Best of luck!
1. Login (Desktop)
2. Sales Dashboard (Desktop)
4. Physical Inventory Entry (Desktop and Phone)
6. Non Inventory Purchasing (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Login (Desktop)
2. Sales Dashboard (Desktop)
3. Location Move (Desktop and Phone)
4. Physical Inventory Entry (Desktop and Phone)
5. Stock Search (Desktop)
6. Non Inventory Purchasing (Desktop)
7. Notifications/Alerts
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to come up with the look and feel of a web dashboard project. It’s ERP based, handling data-intensive visuals. We need to optimize the time spent on this environment, fast paths and efficient conversions.
Concept Goals
We have a fully functional ERP system that we built from scratch that serves a bunch of privately held metals distribution companies. The current product we have is not web based - we are in the process of re-architecting the product to web enable it.
We want to come up with a design for all of our screens - the current screens we have in the system are dense with information, but we are looking for a fresh clean UI (for the web), we are looking for ideas on how to design the layout.
This is a full fledged ERP application that will be used to run sales, purchasing, warehouse/inventory, accounting modules. The application has transitional screens that are used to write information (sales orders, purchase orders, invoices etc) and also dashboards that some users use to track data.
We want ease of navigation and ability to look up the information required without performing multiple clicks.
Consider this concept design would benefit of a dashboard-like arrangement, although we are open to ideas.
Among the key goals, keep in mind our priorities:
1. Standardization for look and feel
- Tables (Editable Tables).
- View actions.
- Look ups.
- Alerts/error messages.
- Edit panels.
- Search screens.
- Etc...
2. Clean look and feel
- How do we present the mass amount of data, but not overwhelm the user?
3. Ease of navigation
- Minimize the number of clicks/mouse movement
4. Intuitive design
- Elements/actions should be intuitive, so minimal training is needed for someone new to get up to speed.
- Design should be consistent with modern web layouts that users are used to seeing.
5. Table Customization Feature
Any table should be customizable:
- User should be able to pick which table columns they should be able to view - limit the screens to just these columns.
- Provide an icon on top of the table which when clicked would let the user pick which table columns he wants to view.
- Show this behaviour in your design solution.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Handle pagination for data intensive pages.
- Use screenshots provided within each doc file for data sample (reference only). UX is open to suggestions, DO NOT simply reskin the existing screenshots.
- Navigation:.
-- Home (This would be the default view which in this case is the Sales Dashboard).
-- Sales Order Entry
-- Location Move
-- Physical Inventory - When clicked this should present 2 options (sub menu of some sort)
--- Entry - maps to Physical Inventory Entry
--- Monitor
-- Stock Search
-- Non Inventory - Provide sub menus for each view in this spec
--- Purchase Order Entry
--- Receiving
-- Approvals Master
-- Log out
1. Login (Desktop)
User can login by supplying his login ID and password.
Screen should display a version number e.g. BTS Dashboard v1.0.
Service Center Selection
Once logged in, user can select the service center (list of options: Cincinniti, Headoffice, Northbrook, West Coast - average amount of services is 6 but design should allocate space for up to 20) he has access to before the full application launches. If user has access to only 1 service center, automatically launch the full application upon login. Ignore Server field from the provided screenshot (that goes out).
Application Container
Add a menu to the page for user to navigate to other views. Other views should open up as a tab inside the same browser window. This could be a collapsible menu on the top of the screen, or a hamburger menu to the left of the screen. Tabs is an initial idea, we are open to suggestions UX wise to what could be the best fit to achieve this functionality (it should be easy to navigate).
Make sure maximum browser real estate is used for the views. The different views are listed below.
- Create clickable links to open the views.
- The views should open as tabs.
2. Sales Dashboard (Desktop)
See 01_StoryBoard_SalesDashBoard.docx. Note that user has the option to change a different salesperson (list of persons). This list should allocate up to 50 persons, typically there are from 3~5.
3. Location Move (Desktop and Phone)
See 03_StoryBoard_Location_Move.docx.
On the barcode scan you only need to show a scanned barcode to see a sample, and also provide a way to enter the code manually.
4. Physical Inventory Entry (Desktop and Phone)
See 04_StoryBoard_Physical_Inventory_Entry.docx.
5. Stock Search (Desktop)
See 06_StoryBoard_Stock_Search.docx.
6. Non Inventory Purchasing (Desktop)
See 07_StoryBoard_Non_Inventory_Purchasing.docx. All tabs are in scope for design except for the Communications Tracking in the Purchase Order Entry view.
7. Notifications/Alerts
System Notifications
System should notify the user about activities (messages from other users, subscribed events, etc). Display number of messages and option for user to read and mark as read.
Alerts
Create alerts to express these messages (add dummy text):
- Error.
- Success.
- Warning.
Validation Errors
Design a standard way to display validation issues with user entry in widgets.
Branding Guidelines
- Preferred colors are blues and white (very well spaced - see https://bts-it.net).
- Fonts open to suggestions.
- Use a logo placeholder that reads “BTS”.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Internal users of the company with several roles. Sales, Purchasing, Warehouse and Accounting departments of a company.
The application is targeted for users in metals distribution industry. Typical users would be:
- Sales people that take sales orders/quotes and input into the system. They would interact with customers via phone/email.
- Purchasing agents that enter purchase orders for mills that produce stock size plate/bar products. They interact with vendors via phone/email.
- Warehouse Users that are responsible for processing (cutting, picking, restocking, shipping, receiving etc) material. They have no customer/vendor interaction.
Judging Criteria
- Following standards across views, ease of navigation within views.
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- 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 Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
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.
We need your help to come up with a brand new design solution from scratch for an ERP web application. We provide data sample and well defined stories for you to find the best way to display these data-intensive visuals. We need to optimize the time the user spends on this application. Jump in now!
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Login (Desktop)
2. Sales Dashboard (Desktop)
4. Physical Inventory Entry (Desktop and Phone)
6. Non Inventory Purchasing (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback.1. Login (Desktop)
2. Sales Dashboard (Desktop)
3. Location Move (Desktop and Phone)
4. Physical Inventory Entry (Desktop and Phone)
5. Stock Search (Desktop)
6. Non Inventory Purchasing (Desktop)
7. Notifications/Alerts
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to come up with the look and feel of a web dashboard project. It’s ERP based, handling data-intensive visuals. We need to optimize the time spent on this environment, fast paths and efficient conversions.
Concept Goals
We have a fully functional ERP system that we built from scratch that serves a bunch of privately held metals distribution companies. The current product we have is not web based - we are in the process of re-architecting the product to web enable it.
We want to come up with a design for all of our screens - the current screens we have in the system are dense with information, but we are looking for a fresh clean UI (for the web), we are looking for ideas on how to design the layout.
This is a full fledged ERP application that will be used to run sales, purchasing, warehouse/inventory, accounting modules. The application has transitional screens that are used to write information (sales orders, purchase orders, invoices etc) and also dashboards that some users use to track data.
We want ease of navigation and ability to look up the information required without performing multiple clicks.
Consider this concept design would benefit of a dashboard-like arrangement, although we are open to ideas.
Among the key goals, keep in mind our priorities:
1. Standardization for look and feel
- Tables (Editable Tables).
- View actions.
- Look ups.
- Alerts/error messages.
- Edit panels.
- Search screens.
- Etc...
2. Clean look and feel
- How do we present the mass amount of data, but not overwhelm the user?
3. Ease of navigation
- Minimize the number of clicks/mouse movement
4. Intuitive design
- Elements/actions should be intuitive, so minimal training is needed for someone new to get up to speed.
- Design should be consistent with modern web layouts that users are used to seeing.
5. Table Customization Feature
Any table should be customizable:
- User should be able to pick which table columns they should be able to view - limit the screens to just these columns.
- Provide an icon on top of the table which when clicked would let the user pick which table columns he wants to view.
- Show this behaviour in your design solution.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Handle pagination for data intensive pages.
- Use screenshots provided within each doc file for data sample (reference only). UX is open to suggestions, DO NOT simply reskin the existing screenshots.
- Navigation:.
-- Home (This would be the default view which in this case is the Sales Dashboard).
-- Sales Order Entry
-- Location Move
-- Physical Inventory - When clicked this should present 2 options (sub menu of some sort)
--- Entry - maps to Physical Inventory Entry
--- Monitor
-- Stock Search
-- Non Inventory - Provide sub menus for each view in this spec
--- Purchase Order Entry
--- Receiving
-- Approvals Master
-- Log out
1. Login (Desktop)
User can login by supplying his login ID and password.
Screen should display a version number e.g. BTS Dashboard v1.0.
Service Center Selection
Once logged in, user can select the service center (list of options: Cincinniti, Headoffice, Northbrook, West Coast - average amount of services is 6 but design should allocate space for up to 20) he has access to before the full application launches. If user has access to only 1 service center, automatically launch the full application upon login. Ignore Server field from the provided screenshot (that goes out).
Application Container
Add a menu to the page for user to navigate to other views. Other views should open up as a tab inside the same browser window. This could be a collapsible menu on the top of the screen, or a hamburger menu to the left of the screen. Tabs is an initial idea, we are open to suggestions UX wise to what could be the best fit to achieve this functionality (it should be easy to navigate).
Make sure maximum browser real estate is used for the views. The different views are listed below.
- Create clickable links to open the views.
- The views should open as tabs.
2. Sales Dashboard (Desktop)
See 01_StoryBoard_SalesDashBoard.docx. Note that user has the option to change a different salesperson (list of persons). This list should allocate up to 50 persons, typically there are from 3~5.
3. Location Move (Desktop and Phone)
See 03_StoryBoard_Location_Move.docx.
On the barcode scan you only need to show a scanned barcode to see a sample, and also provide a way to enter the code manually.
4. Physical Inventory Entry (Desktop and Phone)
See 04_StoryBoard_Physical_Inventory_Entry.docx.
5. Stock Search (Desktop)
See 06_StoryBoard_Stock_Search.docx.
6. Non Inventory Purchasing (Desktop)
See 07_StoryBoard_Non_Inventory_Purchasing.docx. All tabs are in scope for design except for the Communications Tracking in the Purchase Order Entry view.
7. Notifications/Alerts
System Notifications
System should notify the user about activities (messages from other users, subscribed events, etc). Display number of messages and option for user to read and mark as read.
Alerts
Create alerts to express these messages (add dummy text):
- Error.
- Success.
- Warning.
Validation Errors
Design a standard way to display validation issues with user entry in widgets.
Branding Guidelines
- Preferred colors are blues and white (very well spaced - see https://bts-it.net).
- Fonts open to suggestions.
- Use a logo placeholder that reads “BTS”.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Internal users of the company with several roles. Sales, Purchasing, Warehouse and Accounting departments of a company.
The application is targeted for users in metals distribution industry. Typical users would be:
- Sales people that take sales orders/quotes and input into the system. They would interact with customers via phone/email.
- Purchasing agents that enter purchase orders for mills that produce stock size plate/bar products. They interact with vendors via phone/email.
- Warehouse Users that are responsible for processing (cutting, picking, restocking, shipping, receiving etc) material. They have no customer/vendor interaction.
Judging Criteria
- Following standards across views, ease of navigation within views.
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- 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 Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
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.