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.
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.
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.
- 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.
-- 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
-- Stock Search
-- Non Inventory - Provide sub menus for each view in this spec
--- Purchase Order Entry
-- 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).
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)
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)
5. Stock Search (Desktop)
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.
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):
Design a standard way to display validation issues with user entry in widgets.
- 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.
- 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.
- Request a MarvelApp prototype from me (email@example.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.
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.
- 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
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.
Submit JPG/PNG for your submission 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.
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.