E2E Maps Process - New Map Interaction Prototype Challenge

Overview

Welcome to "E2E Maps Process -  New Map YU Prototype Challenge". In this challenge, we need your help to translate the design for new map interactIons to our existing E2E Process Map prototype. 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!

This application is hosted in the cloud and accessible via browser and mobile, and for the first phase, we are starting with browser access from a standard windows laptop, as mobile app use at this company is not completely mature yet. We will, however, roll out a mobile app version of this software, and ask that the web app is created with future capability with tablets/phones in mind.

The overall objective of this app is to:

- Create a platform that delivers insights into the state of robotic process automation ("bots") and artificial intelligence software deployments at our company.

- Better visibility into process health, volume throughput, and other metrics, in real time

- Offer a visual, interactive UI for executives to use to zoom in and out of end-to-end business process areas, with a capability to reveal data as zooming and panning changes dynamically or by switching a toggle, as well as being touch-sensitive for screens that allow it, and the ability to display icons, text, or links to further information on the map itself

-- D3.js PoC example here with toggle functionality on the bottom right of the screen – each end-to-end process name can be clicked to get a more detailed view, and the toggle can be used to change the icons displayed

-- This example is static, but the future version of this view should contain a portal for super users/admins to add/delete/modify embedded content, icons, and information (we are going to create it in this challenge!)

- Have a customizable front-end dashboard of various reports, alerts, graphics, or other “bricks” of content that an executive could choose to display or hide as he or she sees fit

- Overall, the main goal is to give executive management the ability to access the latest data relevant to automation whenever they need it – any data around ongoing projects, new automation opportunities in our pipeline, performance metrics, embedded reference files in the form of PDF or MS Office documents, or other reports. 

General Requirements

We ran a design challenge earlier this month to build out the new design for Map interactions. We already have an existing prototype (code available in forums) which builds out some of the core functionality required by the new design. We would now like to translate this into a fully functional UI prototype. Please note that only mentioned admin user screens are in scope (mentioned in In-Scope folder on Google Drive). We’ll build the remaining admin screens and end user screens in next challenge.
 

Allowed Technologies

• jQuery

• Angular 6.x

• ReactJS 16.x

  You are allowed to use any of the above mentioned technologies with the existing prototype code
 

Code Requirements

HTML/HTML5

• Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use JSON files for data where applicable so the backend calls can be replaced appropriately during integration phase

• Please use clean INDENTATION for all HTML code so future developers can follow the code.

• All HTML code naming should not have any conflicts or errors.

• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent)

• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

• No inline CSS styles- all styles must be placed in an external stylesheet.

• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

CSS3

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all CSS so developers can follow the code.

• All CSS naming should not have any conflicts.

• As possible use CSS3 style when create all styling.

• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

Javascript

• You are encouraged to use your own scripts.

• Open Source may be leveraged so long as usage is in compliance with the open source license.

• We may ask you to provide us with a list of third party code used.

Images

• Images should be properly compressed while still having good visual quality.

• Please use best practice repetition usage of background based image.

• Make sure your submission look sharp for Retina and Standard devices

Challenge Assets

We’ve provided the following in challenge forums

• Link to shared Marvelapp Storyboard

• Design Sources

• Existing prototype source code

 

Screen Requirements

The prototype must implement the following screens. The existing prototype code provided already implements some of the core functionality. You need to ensure that all admin screens mentioned below are implemented.

  00_01_Login

• Both username and password are mandatory fields

• Username must be a valid email

• Password must be be masked

• Terms and Conditions & Forgot password? are dead links

  00_02_Login_error

• Shows the error shown whether either username or password or both are invalid

• Show the same error for null and blank username

• Show the same error for blank password

00_02_Login_admin

• Shows the admin user logging in without any errors

01_01_Default_Map_View

• Map view must be rendered exactly as shown in storyboard

• Should display top bar, left and right sidebars as per storyboard

• By default, the ‘Map Only’ view is triggered when the user logs in

01_02_Default_Map_View 

• Shows the Map View when the Content option is enabled

• You MUST show the various overlays as shown in storyboard

01_03_Default_Map_View 

• Shows the Map View when the Content option is enabled and graphs are not enabled

• You MUST show the various overlays as shown in storyboard

01_05_Default_Map_View 

• Shows the Map View when a point in map is clicked

• You MUST show the various buttons in the modal overlay as shown in storyboard

01_06_Default_Map_View 

• Clicking on any of the solid dots on the maps opens this view (existing functionality)

01_07_Default_Map_View_Add_line

• Shows the Map View when a new line is being added

01_08_Default_Map_View_Add_line_specs

• Shows the Map View parameters when a new line is being added

• All parameters are mandatory

• User should be able to specify the line name, station name and chose a color to represent the line

• Disable submit button until all params have a valid value

01_09_Default_Map_View_Add_line_specs_filled

• Shows the same view as earlier with all spec params filled

01_10_Default_Map_View_Add_Station

• Shows the Map View when a new station is being added

01_11_Default_Map_View_Add_station_filled

• Shows the same view as earlier with all spec params filled

01_11_Default_Map_View_Add_station_on_line

• Shows the Map View when a new station is being added on line

01_12_Default_Map_View

• Shows the Map View when ‘ADD STATION’ is clicked on the last step

01_13_Default_Map_View

• Shows the same view as earlier with all spec params filled

02_01_Process_View

• Shows the process view

• The default view is ‘Map Only’

02_02_Process_View_Deployments 

• Shows the process view with ‘Deployments’ option enabled

02_03_Process_View_Opportunities 

• Shows the process view with ‘Opportunities’ option enabled

02_04_Process_View_Usecase 

• Shows the process view with ‘Use Case’ option enabled

03_02_01_00_Managing_Content_Deployments 

• Shows the ‘Manage Content’ section inside the Process View

• Allow user to select any existing icon names

• Clicking on ‘New Icon’ is a dead link for now

• Text & Description are mandatory fields

• You can use any open source text editor for Description field

• Attach Files must allow either dragging & dropping file or should open a file chooser when ‘click here to browse’ is tapped

• MANAGE PERMISSIONS ‘Open’ is a dead link

03_02_01_01_Managing_Content_Deployments_Filled 

• Shows the same view as earlier with all spec params filled

• Note that it should be possible to select multiple files

• Clicking on ‘x’ should remove that file from the review

03_02_01_02_Managing_Content_Deployments_Details 

• Shows the Managing Content Deployment Details moda once the information has been filled in the previous step

03_02_01_03_Managing_Content_Deployments_Closed

• Shows the Managing Content Deployment Details modal in closed state

03_02_01_04_Managing_Content_Deployments_Opened 

• Shows another Managing Content Deployment Details modal in open state

The remaining admin screens listed below (and end user screens) are out of scope & will be built in the next challenge.

 03_02_02_Managing_Content_Opportunities
 03_02_03__00_Managing_Content_UseCases
 03_02_03__01_Managing_Content_UseCases_Filled
 03_02_03__02_Managing_Content_UseCases_Details
 03_02_Managing_Content_on_Empty_node
 03_03_01_Managing_Content_on_sub_process
 04_01_Icon_management_edit
 04_02_Icon_management_add
 04_03_Icon_management_search
 06_01_Managing_Content_editing_existing_popup
 06_02_Managing_Content_editing_existing_list
 06_03_Managing_Content_editing_existing_add_new
 06_04_Managing_Content_editing_existing_list_filled
 06_02_Managing_Content_editing_existing_list_deployment
 06_03_Managing_Content_editing_existing_add_new
 05_01_Settings_Default
 05_02_User_Management_Users
 05_03_User_Management_User_groups
 05_04_User_Management_User_members
 05_05_Permission_Management

These are the end-user screens

End_User_00_Login to End_User_02_Login_End-user  
End_User_01_01_Default_Map_May_Only
End_User_01_02_Default_Map_Content
End_User_01_03_Default_Map_Content_toggle_layers
End_User_01_04_Default_Map_View_Download
End_User_01_05_Default_Map_line_highlighted
End_User_02_01_Process_view_Map_Only
End_User_02_02_01_Process_view_Deployment_Details
End_User_02_02_02_Process_view_Deployments
End_User_02_03_Process_view_Opportunities
End_User_02_04_01_Process_view_Use_case_details_icon1
End_User_02_04_01_Process_view_Use_case_details_icon2
End_User_02_04_02_Process_view_Use_case_details_more_icons
End_User_02_04_Process_view_Use_case
End_User_03_01_Download_Report

Submission/ Review

• Zipped Prototype

• Readme file with instructions on how to run and use it.

Scorecard

• Standard UI Prototype scorecard applies

Final Submission Guidelines

Please see above