• Compete
  • Learn
  • Community

    BTS ERP Application Design Challenge









    The challenge is finished.
    Show Deadlines icon-arrow-up

    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!

    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.

    Challenge Format

    This competition will be run as a two-round challenge.

    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).

    Regarding the Rounds:

    • To be eligible for Round 1 prizes and design feedback, you must submit before the Checkpoint deadline.
    • A day or two after the Checkpoint deadline, the challenge holder will announce Round 1 winners and provide design feedback to those winners in the “Checkpoints” tab above.
    • You must submit to Round 1 to be eligible to compete in Round 2. If your submission fails screening for a small mistake in Round 1, you may still be eligible to submit to Round 2.
    • Every competitor with a passing Round 1 submission can submit to Round 2, even if they didn't win a Checkpoint prize.
    • Learn more here.

    Full Description & Project Guide

    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
    - 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.

    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.

    How To Submit

    • New to Studio? ‌Learn how to compete here.
    • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
    • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
    • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

    Winner Selection

    Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2018 TopCoder(R) Open


    Screening Scorecard


    Your Design Files:

    1. Look for instructions in this challenge regarding what files to provide.
    2. Place your submission files into a "Submission.zip" file.
    3. Place all of your source files into a "Source.zip" file.
    4. Create a JPG preview file.

    Trouble formatting your submission or want to learn more? ‌Read the FAQ.


    All fonts within your design must be declared when you submit. DO NOT include any font files in your submission or source files. Read about the font policy here.


    All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to pass screening here.

    Questions? ‌Ask in the Challenge Discussion Forums.


    • Layered PSD files created in Adobe Photoshop or similar
    • Vector AI files created in Adobe Illustrator or similar
    • Sketch

    You must include all source files with your submission.