Thor EAT Phase 2 Design Challenge

Welcome to Thor EAT Phase 2 Design Challenge
Our client Thor likes the quality on the previous project that Topcoder delivered on Early Alert Tool project. This time they want to enhance Early Alert Tool application to make it more user-friendly and support more features.

Read more details about the features and submission requirements below.

Round 1

Submit your initial “Thor EAT Phase 2 Design” for a Checkpoint Feedback that incorporate these features:
1). Keyword Search
2). Change Password
3). Find and Replace   
4). Analytics Page
 

Round 2

Submit your Final “Thor EAT Phase 2 Design” with Checkpoint Updates that incorporate these features:
1). Keyword Search
2). C&S Issues Screen
3). CnS Issue Detail
4). Dropdown filter updates
6). Change Password
7). Find and Replace   
8). Modal Window Variants
9). Analytics Page
 
Project Overview
Early Alert Tool (EAT) is a data store for all of the Codes and Standards (documents) that Thor needs to comply with when developing products. As codes and standards change, the divisions within Thor (specifically the division leaders and product managers) need to be alerted to these changes.
The division leaders document the issues which arise from any of these changes along with and need to track details on the action plans for those issues. A number of different users will be using the application. There could be codes & standards committee representatives who notify other key point people (product managers or division leaders) of the changes.
The main goal of the application is three-fold:
1. Highlight the standards which have been identified by the business divisions as important
2. Notify people within divisions of standards changes (email functionality)
3. Track the internal corporate action plans issues related to standards changes

General Requirements

• Provided storyboard is old and needs to be updated to follow the latest look and feel based on current live website.
• Then, you need to suggest design solutions based on client requirements for the updated features.
• Our plan is need make the updates as easy as possible to build on the next development phase without too much effort.
• Create separate screens to show the click flow as details as possible.  

Application Asset

• Storyboard: https://drive.google.com/open?id=1UGRm6FoZj0Y_FWji-FvKUbOFtpvCi8J9
• Current Demo Site: http://ec2-34-205-166-164.compute-1.amazonaws.com:8080/eat/
• The Current application supports multiple roles:
  • Admin role:  (full access to all pages & features, including the Data Management, User Management, and Change Requests pages)
    • username: admin  
    • password: Password123
  • Admin approver role: (basically same as Admin except can’t see the Data Management & User Management pages)
    • username: adminapprover
    • password: Password123
  • Data Manager role:  (Access to all Standard User pages plus the Data Input and C&S Issues pages.  Also access to the Actions features on the Keyword Search page - edit, clone & delete)
    • username: datamanager  
    • password: Password123
  • Standard user role:   (Access to only the Keyword Search & Divisional Search pages)
  • No username or password required.
    • username:   “none”
    • password:    “none”

Submissions Requirements
1). Keyword Search

• Add export and import features to the Keyword Search.
  • Provide the ability to export data from the app to excel (also provide ability to import new data or revised/edited data from excel)
• Currently, we have multiple entries of the same documents just so each division can have their "own" data (their division name, sub division, product lines, contacts, etc.) attached to it.
  • You can see the data in Keyword page with the same “Identifying #”, “Organization”,  “Description” etc. But, other fields are different.
  • Suggest how the design could change to better group the documents. Maybe with sub-rows?
• Yellow highlight for search result
  • When a keyword search is conducted using the Search field, yellow highlight the keyword where it is found in the table of results.
  • Example of current state: Searched for Ricciuti, and found 8 results. Searched for Borowski and found  3761 results, but we currently don't know how/where either of these searches found the names.

2). C&S Issues Screen

• Add export and import features to the C&S Issues Page.
  • Provide the ability to export data from the app (the full details view page) to excel (also provide ability to import new data or revised/edited data from excel)
• Provide the ability for Data Manager, AdminApprover & Admin users to select which C&S Issues "columns" / fields are visible on the C&S Issues Page (the summary view page). Discussed having all fields displayed as columns and letting the user select which ones they want to see on the C&S Issues summary page.

3). CnS Issue Detail view page

• Need to add a button to export C&S Issue details view (user-selected fields & data) to PowerPoint slide(s).
  • Show how screen looks when the fields are selected

4). Dropdown filter updates

• Allow the user the ability to select more than one filter at a time if they choose to do so. By holding down the control key and then selecting multiple choices. This requirement applies to all 5 filters (Organization, Division, Sub Division, Product Line, & Product Line Contact(s))
• On the Keyword Search page & Divisional Search page, In the drop down filters, provide the users a space/field/area to type in a letter or few letters to more quickly find the dropdown choice that they are looking for.

5). Send Email using Microsoft Outlook

• We need to have 2 options for Send Email function.
  • Option 1 = the existing Send Email button and email template screen in the app.
  • Option 2 = an icon that says "Open with Microsoft Outlook".
    •  When icon is clicked, MS outlook opens with auto-populated fields.
• Apply this design updates across the pages:
  • Keyword Search page > Select Checkboxes > Send Email button currently shows up in the top right of table
  • Divisional Search page > Pick Organizations > Send Email button currently shows up in the top right of header
  • Then, when user clicks on the Send Email button, You’re currently taken to the Send Email template/page. Users want another option of using Outlook to compose the message instead of using the in-App template/page.

6). Change Password

• Allow users like Data Managers, AdminApprovers & Admins to change their own passwords Security rules consisting of 9 characters, 1 upper, 1 lower, 1 special character, etc.  
• Add menu drop-down near the existing login or logout icon that will allow users to change their passwords.
• Create separate screens to show the change password flow.
• Suggest what features need to use?

7). Find and Replace

• This is a new feature being requested.  The application needs a find and replace function and the ability to make batch/bulk changes.
• When a (C&S Steering Committee member or a product line contact or a Committee participant) name changes (due to someone leaving, retiring, etc.) Thor needs to have some way to globally change all occurrences of that person's email address in the application Data.
  • Create find & replace function. This allows the Data Manager, Admin Approver, or Admin to change the data one by one.
  • Create a find & “replace all” function. This allows the Data Manager, Admin Approver, or Admin to change every instance of one name to another name with the least amount of clicks.
  • Create some way for a Data Manager to add a “new” name to all (or a subset) of their entries (for one Division) if they wish to do that.  This new name would be in addition to other names (email addresses) they already have in their entry/entries.    

8). Modal Window Variant

• For this task you need create some modal windows for some situation
  • Multiple login on same user from different browser
    • Action/Request: (Something like a popup window with "This session has been rendered inoperable by a newer logon by the same user?”)
  • Search Division > Send Email Page
    • Case example: Sent an email notification of a change to a document. The email description included the steps the recipients would need to take. The pop up (modal window) notification that the email was sent was very narrow and tall, extending beyond the browser window. Also, the wording in the notification window included formatting characters such as <p> between the lines, and other formatting codes (such as color). I could not scroll down far enough to see or click on the "Close" button to make the notification window go away, until I shrunk the browser zoom to 67%. I don't think the users will automatically think of this solution if they encounter a similar problem. This time, the notification window was smaller and only contained the email addresses that it was being sent to, but after clicking on "Close", the screen did not change, so I couldn't tell if the email was sent or not.
  • Create generic error and success modal window look when sending/add/edit/delete data
    • Make the pop-up modal windows larger and so that long messages can be scrolled by the user.

9). Analytics Page

• Provide the admin the ability to track usage of the App (perhaps track by unique IP addresses) History log, etc.
• We discussed a visual dashboard (for Executive Level report-out meetings) by creating a new page below the Change Requests page in the left hand nav bar.  This new page would be titled "Analytics".
• This page viewable only to the Admin role.
• Analytics show the number of APP visits/uses per time period (day, week, month, quarter, etc.) AND which pages were visited during the uses/visits.
• Suggest other features and metrics that can be added to Analytics page based on current application

Form Factors
Please make sure your design supports these form factors:

• In-scope
  • Desktop: 2732px width x (Height can expanded as needed) - FYI: This is Retina Size
  • Work on at least these desktop browsers - IE, Edge, Firefox, & Chrome
• Out of scope
  • Mobile and Tablet

Target User

• Thor internal employees across all global locations

Judging Criteria

• How well you plan the user experience and capture your ideas visually.
• Cleanliness of your graphics and design.
• Overall design, UI and user experience.
• Consistency across the UX/UI.
• How well you interpret the features (business relevance) and show us new ideas and concepts.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop or Adobe XD and saved as a layered file
  • Marvel Prototype
  • We need you to upload your screens to Marvel App.
  • Please send your marvel app request to lunarkid@copilots.topcoder.com
  • You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).