Emerald - Hub Application Redesign Challenge

Welcome to Emerald - Hub Application Redesign Challenge.

We need your help to redesign the look and feel of two existing applications plus the creation of a container environment that will host/link several other apps that can be triggered by the user. We are providing the new branding guidelines to be applied and the story to create the container.

Round 1

Submit your design for a checkpoint feedback.

01. Application Container / Home
02.01. Sentinel List
03.01.01. Bulks List
03.02.01. Batches List
03.02.02 Create/Edit Batch
03.03.01. Jobs List

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Submit your final design plus checkpoint feedback.

01. Application Container / Home
02. Sentinel UI (all interactions)
03. Bulk Manager (all interactions)

- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Objectives

• To create one UI screen for a new container app.
• To redesign two existing applications.
• Web application (desktop only).

Project Background

• We need to build a container application where many smaller UI applications can be embedded. Some of these smaller applications may or may not exist today.
• For the moment, we’re focusing on the container app and the details (redesign) of the Sentinel UI and Bulk Management apps.
• The correct implementation of the workflow for sentinel and bulk manager UI application are important to the client. The user should be able to visualize the implementation of both apps. You can come up with great ideas to show the CRUD actions applied to the apps.

Screens/Features
Overall

• Follow the provided mockups as a reference for content and layout for the two apps that are being redesigned.
• The main screen and subsequent apps should share a common branding identification, most likely a shared header/footer/navigation system that allows identifying each app as part of the same ecosystem.

01. Application Container / Home

• User should be able to see a set of applications and access to them.
• List (grid, cards, etc) the following apps (see 01 Container screen - you can use title and logo/photo for each app):
  • Bulk Manager UI.
  • Sentinel UI.
  • Event Manager UI.
  • TAAS UI.
  • Zip Log Viewer.
  • Email Monitor.
  • IDM Adobe Monitor.
  • 190 Monitor (MQ, Skye, TXN, SS TXN, etc.)
  • Miscellaneous Hyperlink Embedding.
  • User Group Manager (Interim).
  • Admin.
• New, Enhancement and Embedding are actions that need to be available, use some visible buttons or links for those.

02. Sentinel UI
This application displays an API-fetched view of the Sentinel Database, role-based.

02.01. List

• This page should list the database records with options to search and sort as seen in 01 screen for Sentinel UI Mockup.

02.02. Create/Edit Element

• User should be able to create/edit new records.
• Use the example data from the existing UI to collect this information.

02.03. Details View

• User should be able to see details of a selected element.

03. Bulk Manager

• This application allows the administration (add/edit, delete) of Master Batch Data, Transactional Batches, and children Jobs.
• Overall, there are three stages/phases for managing the bulks. The master table shows the high-level information of the data, after selecting one item/row from the bulk admin page, the user can see the batches related to it, it can have 1 to N relationships.
• After interacting with the batches, the user can see the jobs a batch contains (by clicking the respective batch item/row).
• Once on the children page, the user can create, update or delete job elements.
• The provided mockup is very rough and open to new implementation that suits best the requirements. A quick overview of some of the proposed elements - https://take.ms/KtB9iK:
  • #1: List of bulk master data from the master table.
  • #2: Actions that can be taken on the page, just mockup, please create your own or something totally different.
  • #3: This represents the delete action of a record. Up to you how to present it.
  • #4: It reads Bulk Master ID and represents the batches. So the bulk master table has 1 is to n ratio. A batch can be many for one bulk master row.

03.01. Bulk Master Admin

• See mockup 01 for Bulk Manager sheet.
• Example data:
  • Bulk Master ID: RENEWAL_QUOTE_BATCH_PMZ (string)
  • Bulk Description: Some Product PMZ Renewal print batch (string)
  • Schedule: CRON Format Schedule (see example)
  • Active: True/False (boolean)
  • Created By: Sam (person name)
  • Created: 01/01/2020 (date)
  • Updated By: Mary (person name)
  • Updated: 10/02/2020 (date)

03.01.01. Bulks List

• User should be able to see a list/set of bulks.
• User should be able to narrow down results in some fashion..

03.01.02. Create/Edit Bulk

• User should be able to create a new bulk.
• Use the example data to collect information.

03.02. Batch Admin

• See mockup 02 for Batch Admin sheet.
• Possible actions that involve a batch are:
  • Delete: eliminates the item.
  • Reschedule: If you change the execution time of a BATCH, then the execution time of ALL the JOBS within that BATCH will be updated to the same value.
  • Stop: If you STOP the execution of a BATCH, then:
    • EXECUTION_STATUS of ALL the JOBS within that BATCH will be updated to MANUALLY_STOPPED
    • The User name of the user who did the operation will be saved in the updated_by field
• Example data:
  • Bulk Master ID: RENEWAL_QUOTE_BATCH_PMZ (string)
  • Bulk Batch ID: 1001 (integer ID)
  • Real Schedule On Submission: Calculated by the Mule component (date)
  • Created By: Milton (person name)
  • Created: 01/01/2021 (date)
  • Updated By: Keats (person name)
  • Updated: 10/02/2021 (date)

03.02.01 Batches List

• User is able to see a list/set of batches.
• User should be able to quickly apply the mentioned actions that are related to batches (reschedule, stop).

03.02.02 Create/Edit Batch

• User should be able to enter information to add/edit new records.
• Use the example data to collect information in the form.

03.03. Job Admin

• See mockup 03 for Job Admin sheet.
• Users should be able to see jobs, as well as create/edit new ones and delete.

03.03.01. Jobs List

• User should be able to see a list/set of jobs.
• Jobs can be deleted.
• User should be able to filter by submit date range.
• Example data:
  • Bulk Master ID: RENEWAL_QUOTE_BATCH_PMZ (string)
  • Bulk Batch ID: 1001 (integer ID)
  • Bulk Job ID: 001 (integer ID)
  • Execution Date: 01/01/2021 (date)
  • Execution Time: 04:00 AM (time)
  • Product ID: PPZ (string)
  • Actions:
    • Submit Job: Allows the caller to submit a job for execution. The request (job) is then Queued in a queue maintained in Mule Bulk Management Database table. A job can be manually created then listed in the grid/table of jobs. It means that by default jobs are held in a waiting queue before being submitted.
    • Update Submitted Job: Allows the caller to update a job for execution. The queued job.
    • Read Running Job: Get information about a running Smart Communications Job (opens another display with specific information)
    • View Jobs List: List Smart Communications Jobs from a range, queue.
    • Stop Running Job: Stops a job.
    • View Queues: Lists a smart communications queue.
    • Read Submitted Job: displays the submitted jobs (details view) from MuleSoft in another display or layover. 
    • Check Appliance Status: opens another display with specific information about the status.
    • Note about the actions: you’re not required to design states for each specific action BUT you must allocate proper space and location to trigger these actions.
  • EXECUTION_STATUS:
    • INIT
    • START_PROCESSING
    • MANUALLY_STOPPED
    • COPIED_TO_INFOLDER
    • COMPLETE
    • ERROR:
      • The state of the record when the transition to the next state fails because of “any” reason.
      • Design the interaction flow to see how this error happens, it’s very important to the user to handle errors. What’s the best place and how do we handle these action errors?
  • Created: 01/01/2021 (date)
  • Updated By: Keats (person name)
  • Updated: 10/02/2021 (date)

03.03.02. Create/Edit Job

• A new should contain the provided in the 03.03.01 Example data area.

Screen Specifications

• Desktop: 1280px width. Height as much as needed.
• Make sure your work is in a vector format, for retina scaling and high fidelity.

Branding Guidelines

• Fonts and colors should be inline with the provided branding material.

Design Assets
Folder: https://drive.google.com/open?id=1uGXdzEC7mp1EX-07oPfjCM-B0ZtxfO-c 

• 01 Container: list of applications for the container.
• 02 Sentinel UI: existing Sentinel app screens.
• 03 Bulk Manager Mockup: existing Bulk Manager app screens.
• 04 Branding: guidelines and specifications for the UI (typography, colors, etc).

Target Audience

• IT employees in the documentation management area.
• Users have lots of jobs and it needs to be updated, scheduled and retrieved in real-time and want to have all these operations performed in a smooth way and have a better user experience of doing so.
• The application is targeted to be used globally across the world, not just the US.

Judging Criteria

• How well you plan the user experience and capture your ideas visually.
• How well you implement the challenge requirements and understand the workflow.
• Cleanliness of your graphics and design.
• Creativity and ease-of-use is key to the success as it must be engaging to users.

Final Deliverables

• All original source files.
• Files should be created in Adobe Photoshop, Adobe XD or Sketch.
• Numbered/Ordered JPG screen files.
• Marvel Prototype
• We need you to upload your screens to Marvel App.
  • Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30108194 
  • Do not use the forums to request for MarvelApp.
  •  Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
  • 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).

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.
• You don’t want to fail screening? Read this.