PatchWorks - Automated Patching Responsive Web App Design Concepts Challenge

How To Compete In This Challenge
- Competing in Topcoder design challenges are easy.
- First, register for the challenge by selecting the “Register” button in the top right.
- Second, review this challenge spec which provides details on what you’ll need to design.
- Third, please review this step-by-step guide on competing.

Challenge Summary:
Welcome to PatchWorks - Automated Patching Responsive Web App Design Concepts Challenge!
In this challenge, we are looking for your design expertise to create a responsive web application that will be used by different application teams to plan the activity of patching their servers (Patching servers means just updating servers with some upgrades/fixes) in a systematic way.

You are provided with the wireframe screens on what each of the required screens will perform, this will help you to get started. We are excited to see your designs for this challenge!
Let’s discuss in forums on any question you have!

Good Luck!

Round 1

Submit your initial design for a Checkpoint Feedback

A. App Owner
01 Dashboard
02 Applications
02 1 Create New Application
02 2 Edit Application
03 Instances
03 1 Create New Instance
03 2 Edit Instance
04 Jobs
04 1 Create New Job

B. Admin:
06 Manage Users
06 1 Create New User

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 the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
00 Login

A. App Owner
01 Dashboard
02 Applications
02 1 Create New Application
02 2 Edit Application
03 Instances
03 1 Create New Instance
03 2 Edit Instance
04 Jobs
04 1 Create New Job
04 2 Edit Job
05 Reports

B. Admin:
06 Manage Users
06 1 Create New User

As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Workflow:
Please make sure your design incorporates this workflow.
01 Creating new application: Login -> Applications -> Create new application
02 Creating new instance: Login -> Instances -> Create new instance (Includes a selection of Application)
03 Creating new patch job: Login -> Jobs -> Create New Job (Includes selection of Application, Instances, Workflow, and Schedule) 

Design Considerations:
- Come up with a clean and simple UX by following Google’s Material Design for UI elements, icons, typography, etc. 
- Also, take a look at the branding guidelines given below to refer the colors and fonts to be used!
- You are provided with wireframes for each of the screens, please DON’T copy - just use them as a reference to get started with your designs (NOTE: Wireframe doesn't capture all the requirements, so please make sure you are following the details mentioned in the spec!) 
- The client likes the idea of a left side collapsible navigation for the application (please see page 1 in wireframes)
- Think about the user experience
- For this challenge, design your screens of size 1366 px width and height as required

Required Screens:
We wanted to give you an idea on the screens and functionalities:

00 Login:
- Keep this page simple.
- Include all elements necessary for a login screen
- Include Username / Password

A. App Owner
01 Dashboard
Reference: Page 1 of wires.pdf
- This is the landing page that user(s) see’s after they login into the application
- Please create a simple logo with the application name as 'PatchWorks' (P and W capitalized).
- Client likes the idea of sliding left navigation with icons for all the pages (application, instance, jobs, and reports) and logo in the top left and option to logout in the top right.
- This page will show the statistics about the recent patch jobs.
- Need to show some graph of how the success ratio of the jobs is.
- We are looking for your thoughts on what other metrics can be shown on this page.

02 Applications
Reference: Page 2 of wires.pdf
- This page shows the list of applications that were created (grid)
- Each of the items in the list shows the Logo, Short name of the application, the Long name of the application, App owner, etc
- The user will have the option to click on an application to view more details (show us how this would look like? We would probably need an option to edit the application)
- Provide an option to create a new application.
- The user will have the ability to delete an application

02 1 Create New Application
Reference: Page 2 of wires.pdf
- In this page, the user will create a new application
- App Logo, App Shortname, App Fullname, App Owner email, App Manager email, and escalation email will be entered by the user to create a new app.
- Show us how an error screen will look like if there are any validation errors (ex: if mandatory fields are missing/not entered by the user show error)

Workflow:
Create New Application:
The user enters username, password, and clicks on Login button.
Post successful-authentication, the user is displayed the Applications page with all the applications listed along with an ‘Add’ button to onboard a new application onto the PatchWorks platform.
User clicks on the ‘Add’ button and is displayed a pop-up to select the application that is available for onboarding.
The user selects the desired application and verifies the application details and clicks on the SUBMIT button to onboard the application.
The user is displayed an information message that the application onboarding is successful.
The user is displayed the Applications page with all the latest applications listed.

02 2 Edit Application
Reference: Page 3 of wires.pdf
- Same as add new application
- All values would have already been entered, the user can update them as required

03 Instances
Reference: Page 4 of wires.pdf
- Selecting Instances from navigation shows this page
- This page shows all the instances (grid view)
- Each of the instances will include these details “App Name, Instance category name (Prod, DR, Pre-prod, Test, UAT, etc), Instance IP Address, Instance Owner, Hostname“
- We need a schedule button for each of the instances, clicking on it will allow users to schedule/choose the start and end date-time for the patching activity - please show us how this screen will look like
- Provide an option for the user to create a new instance
- The user will have the option to click on an instance to view more details (show us how this would look like? We would probably need an option to edit the instance )
- The user will have the ability to delete an instance

03 1 Create New Instance
Reference: Page 4 of wires.pdf
- In this page, the user will create a new instance
- App name, Env Category, Instance IP Address and Hostname will be entered by the user to create a new instance

03 2 Edit Instance
Reference: Page 5 of wires.pdf
- Same as add new application
- All values would have already been entered, the user can update them as required.

04 Jobs
Reference: Page 6 of wires.pdf
- Selecting Jobs from navigation shows this page
- This page shows all the Jobs in a tabular format
- Each of the instances will include these details “Job ID, CR Number, Schedule, App, Env, Instance, Workflow, Job Status”
- Provide an option for the user to create a new job
- The user will have the option to click on a job to view more details (show us how this would look like? We would probably need an option to edit the job)
- The user will have the ability to delete a job

04 1 Create New Job
Reference: Page 6 of wires.pdf
- In this page, the user will create a new job
- “Select App name, Select Instance, Select Schedule (Start and End Datetime OR Cron Expression)” details will be entered by the user.
- There will be a progress indicator (stepper), need to provide a way to select a series of applicable steps for the job.

Workflow:
Create New Patching Job:
1. The user enters username, password, and clicks on Login button.
2. Post-successful-authentication, the user is displayed the Applications page with all the relevant applications listed.
3. The user then selects the ‘Jobs’ menu and Jobs page is displayed.
4. User clicks on ‘Add’ button and a stepper (wizard-like dialog) is displayed.
5. The user selects the desired application. Upon selecting the application, the user is provided with a list of relevant instances.
6. User checks/ select all the instances that are to be scheduled for patching and clicks on Schedule button to specify the Start and End DateTime window OR a cron expression (recurring) for patching activity.
7. The user is displayed an information message that the Patch Job request creation is successful.
8. The user is displayed the Patch Jobs page with all the respective jobs created for the selected instances.

04 2 Edit Job
- Same as add new jobs
- All values would have already been entered, the user can update only some fields and certain fields will be uneditable.

05 Reports:
Reference: Page 8 of wires.pdf
- The user will be able to select criteria to view the report, we are looking for your suggestions on what criteria can be included for the user?
- We are looking for some charts (like Pie-Charts, we are open to your thoughts) displaying the success ratio of the ‘Patch Jobs’.
- Also, need to show the number of ‘Patch Jobs’ requests on Weekly/Monthly/Quarterly basis / show this as a chart!
- There will be an option to download or email the report.

B. Admin:
06 Manage Users
- Admin will have the ability to manage all users using this application
- Provide an option to create new users.
- Provide an option to edit the user
- We also need the option to disable users

06 1 Create New User:   
- In this page, user will able to enter the details of the new user, below details will need to be entered to create a new user.
- Details will include User full name (first name, last name), email address and contact number, select user role.

Branding Guidelines:
Please find the attached branding colors here:
https://projects.invisionapp.com/boards/RT3OP07Y5WS/

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
- Focus on User Experience / how the user interacts within the dashboard and other pages

MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to csystic@gmail.com
- You MUST include your Marvel app URL in notes /comments while uploading (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).

Target Users:
- Users must have either of these roles: Standard, App Owner or Admin.
- User Access Management to be done via the ‘Manage User Access’ screen which should be accessible to Admin users only. Users with ‘Admin’ is responsible for managing other users’ access and roles.
- User (s) with ‘App Owner’ is responsible for managing Applications, Instances, Jobs, and Dashboard screens.
- User (s) with ‘Standard’ has a read-only view to Applications, Instances and Jobs and Dashboard screens.

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 example screens (business relevance) and show us new ideas and concepts.

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
- Submit Marvelapp as part of your submission.

Source Files:
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file, Sketch or Adobe XD!

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.