Car Inventory Check Web App Design Challenge

Welcome to "Car Inventory Check Web App Design Challenge". In this challenge, we are looking for your help to create the best possible UI/UX for our Car Inventory web application that will provide an Integrated report about data comparison between data in the client IT systems with the one they have in the local sites. Your design creation needs to be creative, intuitive, simple, and easy to use.

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial design for a Checkpoint Feedback
01) Dashboard Page
02) Duplicate management Page
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt. 
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01) Dashboard Page
02) Duplicate management Page
03) Reports Page
04) Configuration Page
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
BACKGROUND OVERVIEW

• This is a new stand-alone web application. The application is to help our client to load and analyze car inventories (inventory inputs are Excel files). The client transport cars (among other stuff like bikes and many other things). Once a year, we want to be able to compare what is in its IT systems (local, central) with what is physically on a set of local sites (or in transportation). The application needs to be as "simple" as possible. No fancy UX/UI required.

CHALLENGE GOAL

• The goal of this challenge is to develop UI/UX for a web application that allows users to check car inventory. 

DESIGN CONSIDERATION

• Simple, Clean, Professional, and Intuitive look and feel
• Simplicity to find any necessary information 
• Needs to offer a great focus to the user
• Best Practice for Web-Based App
• Easy to understand the flow from page to page
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)

CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=676100

SCREEN REQUIREMENTS
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.

01) Dashboard Page
wireframes.pdf-> Page 1 to 3

• This is a Status Page and Monitoring Page (main page)
• There will be 3 types of a user using this application (Centers, Regional, and Central/Admin), each of them will have different set of main navigation. For this challenge, create the main navigation for Admin where all nav is visible so the design can be re-usable by other user roles
• Administrator Main Navigation is:
  • Session
  • Centers
  • Duplicates
  • Reports 
  • Configuration
• The main navigation will have sub-navigation (Reports and Configuration), please create how the sub-navigation should appear in the application
• Need to have Contacts information added to the dashboard:
  • Display all contacts linked to the local center. And add the head of the region/pole Geographical to the center contacts 
  • Information to be displayed about the contacts: Last Name, First name, Fixed Phone, Mobile Phone, email
• Details content for this page can be found at page 2 and 3 of the wireframes

Load XLS Features

• wireframes.pdf -> Page 5 to 9
• The load xls features will be managed via several tabs in the dashboard at the bottom area:
  • File Management
  • In IT not in physical (Out of scope)
  • In Physical not in IT (Out of scope)
  • Status Management (Out of scope)
• File Management tab:
  • The user will be able to load Local IT files (xls) and Physical Files (xls) and submit for validation both files as many times as they want (wireframes.pdf page 5 or page 9 - different user, same action)
  • Subsequent loads will be in a delete and replace mode
  • The import is validated with the "Submit" button. Status becomes local IT file validated. The upload of the local IT file becomes impossible, and the loading of the physical file is now available
  • The loading of the physical file is done with the same process as the load of the local IT file
  • Once the load of the physical file is validated, the Local Center Manager can no longer do any action and must wait for the central/administrator control and validation to be performed.
  • Need to show the files progress uploading
  • Show error display if any of the files having some issues on it (wireframes.pdf page 7)
• Load Status Management tab (Out of Scope)
• ‘In IT not in physical’ and ‘In Physical not in IT’ tabs (Out of Scope)

02) Duplicate management Page
wireframes.pdf -> Page 10

• The Central/Administrator uses an additional screen that shows all duplicates between the different centers. And that for each of the three file types: Local IT, Physical and Central IT
• To remove duplicate from one of the 3 categories of files:
  • Local IT
  • Physical
  • Central IT
• Each tab above represents a file type
• When a vehicle is present in two different centers, it is displayed on two lines (one line per center)
• The table is sorted by VIN so that the duplicates are grouped together
• The Administrator can delete one of the duplicates with the button delete:
  • When you click the button, a message warns the user that the vehicle will be permanently removed from the database
  • When the deletion is completed in the database, the table is refreshed and the second line of the duplicate disappears (so it is not possible to delete the vehicle on both centers)
• Duplicate management is complete when there are no more rows in the tables of the three tabs
• To help the user in the decision process of deleting duplicates, the location of the vehicle in the other loaded file is indicated to the user

03) Reports Page
wireframes.pdf -> Page 11 to 15

• The Central/Administrator has access to a page to launch the different end-of-inventory reports
• Show us a screen where user can view all available reports, the user then can select one of the report menu options to be generated as CSV or XLSX
• Three queries are used to generate the reports of each file type by grouping all the local centers data
• The following reports were parts of our reports that will be available in the application:
  • Report 0 - Session info
  • Report 1 - By Type of Loaded File
  • Report 2 - By Category A, B, C, etc
  • Report 3 - Customer Extraction
• In this challenge, we only need to create one report page as a base design, please create 'Report 1b: "Local Physical report (R1b)"'
  • This report has the max number of lines (210,000 lines as there is one line per physical car in all the local centers) and the number max of columns (25 columns: Center Code (PGEO) + VIN code + all 23 columns of the Central IT file)

04) Configuration Page
wireframes.pdf -> Page 17 to 25

• User will be able to manage all related settings for the application via this screen
• Some of the configurations in the application that will be available are:
  • Ability to change language from English and possibility for other languages (French, German, Spanish)
  • Users Management Configuration, list of available users that able to interact with the new application
  • Countries Configuration, Screen to maintain the list of countries used in the Inventory application.
  • Region (Geographic Roles) Configuration (and link to countries), The region (geographical pole) is a set of countries. A specific screen allows to add or remove geographical poles and to assign countries to it.
  • Centers Configuration (and link to contacts), The centers are defined by the administrator and allow to locate where the inventories take place.
  • Customer Transcodification Table, Screen to view client site codes with the external value to be used for customer reports/communication.
  • The Local IT systems, Screen needs to be in read-only mode. Display the list of Local IT system available for inventory
  • etc
• For this challenge, we only need to focus on creating ‘Users Management’ configuration screen, however, please make sure to create navigation/menu/tabs/etc for other configurations too. We will create other screens in another challenge. 
• User Management Configuration, only users with access defined in the "Users management" will be able to connect to this application (wireframe page 18) :
  • The data to be entered will be: Last Name, First Name, Login (used to connect), Password (created by the user himself), Mail, Fixed phone, Mobile phone
  • The Administrator will create user accounts based on role and location. An email will be sent to the user when the user is creating to ask him to enter his password for the first use. The user may request the re-initialization of his password. An email is then sent to him.
  • Three roles are defined:
    • Regional Coordinator (geographic pole): The regional coordinator visualizes all the countries in the selected region and thus all the centers associated with these countries.
    • Central + Administrator (all screens): The central coordinator performs the validation tasks of the inventory for each of the centers and carries out the all extractions (downloads) for customers.
    • Center: The user of the centers will load the local IT inventory and the physical inventory of its center. He will then be waiting for the validation of its inventory by the central user. 

Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
 
MARVEL PROTOTYPE

• We need you to upload your screens to Marvel App.
• Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot) 
• You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload).

 
BRANDING GUIDELINES

• Typography is open to Designers
• Use our logo in your design (attached in the documentation)
• We provide a screenshot of our other system with 3 colors (blue, white, and gray) as your References!
• Use the following colors in your design:
  • Grey: #666666
  • White: #FFFFFF
  • Blue: #00518F
  • Red: #EC6952 

DOCUMENTATION
Google Drive: https://drive.google.com/drive/folders/1DPrccBu9Ei-jStBgzUNd4muHj6QoApJh?usp=sharing 

• App Screenshot.zip
• Wireframes.pdf
• sample-data.xlsx
• Sample-Report.xlsx

TARGET DEVICES

• Web-Based Application
• Desktop: minimum 1366px Width with Height adjusted accordingly

TARGET AUDIENCES

• Local Center User
• Region User 
• Central/Admin User

JUDGING CRITERIA
Your submission will be judged on the following criteria:

• Overall idea and execution of concepts
• How well does your design align with the objectives of the challenge
• Execution and thoughtfulness put into solving the problem
• The overall design and user experience
• Cleanliness of screen design and user flow
• Ease of use

 
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 image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback

 
Source Files

• All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer

 
FINAL FIX

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colors