BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$100‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to Virtual Automation Engineer Website Application Design Challenge.

We need your help to come up with UX/UI design for an AI-based test automation solution which will help engineers to set up test environments, monitor progress and track down results of the automatic tests efficiently.

Round 1

Submit your design for a checkpoint feedback.

02. Homepage
03. Modeling
03.01. Model View
04. Automation
04.01. Scenario Manager
04.02. Edit Scenario

- 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 design for the final round including feedback.

01. Login
02. Homepage
03. Modeling
03.01. Model View
04. Automation
04.01. Scenario Manager
04.02. Edit Scenario
04.03. Test Data Manager
05. Execution
05.01. Test Lab

- 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 UI screens.
  • To provide a seamless flow to complete user goals.
  • Desktop web application (browser).

Project Background
  • The purpose of this project is to develop a web application that serves as a Virtual Automation Engineer, it will be an Intelligent automation system powered by Artificial Intelligence (Machine Learning), which enables autonomous generation, intelligent self-healing for changes and execution of automation scripts aligned with contextual test data, that has the potential to disrupt the approach towards test automation, with a goal of higher efficiency, productivity, and quality.
  • This is for automation efficiency primarily. It will fit like any automation framework as part of the testing life cycle.
  • We look forward to seeing a design that considers ease of use as a primary element, as well as a consistent navigation/browsing through models and projects with ease. Flat, light UI, targeting tech-users, so simplicity with colour scheme.

Users/Roles
For this design exercise, we’ll focus on all the Admin role (access to all features).

Screens/Features
Overall
  • In spite the scope of this challenge doesn’t include all the flows, consider providing a proper navigation system to all of the modules. See the site map for more information.
  • Provide design for confirmation dialogs, overlays, inline-edition, and actions.

01. Login
  • User should be able to login with the username and password.
  • Provide error validation screen.

02. Homepage
  • As part of the global navigation, the user should see:
    • App logo placeholder.
    • Profile icon/thumbnail with:
    • Change Password.
    • Manage Projects.
    • Manage Users.
    • System Settings.
    • Logout.
  • The user should be able to see all her projects alongside with the following information:
    • Project name/title.
    • Automation Tool (e.g. Selenium).
    • App Technology (e.g. Angular, React).
    • App Business Group.
  • The Home page should have information about the last project worked on by the user.
    • No of scenarios.
    • Executed scenarios:
      • Passed/Failed - executed.
      • Not Run/Empty - Not executed.
    • No of models in a project.
  • When the user selects (interacts with) a listed project, 4 options should be displayed for the user.
    • Modeling: on selecting this option, Modeling landing page should be displayed.
    • Automation: on selecting this option, Automation landing page should be displayed.
    • Execution: on selecting this option, Execution landing page should be displayed.
    • Test Data Management: on selecting this option, Test Data Management landing page should be displayed.

03. Modeling
  • The page should have an icon to go back to Home Page.
  • The page should have the main view options.
    • Model View.
    • Scenario View (default - out of scope).

03.01. Model View
  • This page should have the following panels. 
    • Models (Should be Expanded/Collapsed)
    • Modeling Canvas.
    • Shape Properties (Should be Expanded/ Collapsed).
    • Steps (Should be Expanded/ Collapsed).
  • Models:
    • This panel should list all models:
      • Model name/title.
      • User stories (N amount of associated stories): User stories window is a separate popup/overlay which should be opened on clicking a button. The popup should have 2 fields:
        • User Story ID
        • User Story Name
    • This panel should have the following buttons:
      • Add:  To add a new model. Get the name of the model through a popup, create this popup/overlay.
      • Delete: Show a confirmation before deleting.
      • Rename: To rename a model. Get the name of the model through a popup.
    • Double-clicking on the model name should open the model inside Modelling Canvas. Every model should be opened in a new tab. (Maximum tabs can be 10)
  • Modelling Canvas:
    • This panel should open new tabs on double-clicking a model name.
    • This panel should have the following buttons.
      • Model Options:
        • Analyze.
        • Save.
        • User Stories.
      • Edit Options:
        • Copy
        • Paste
        • Delete
        • Undo
        • Redo
      • Layout Options:
        • Auto-Fit.
        • Tree.
        • Layered.
        • Align Nodes -> Left, Right, Top or Bottom.
    • This panel should contain a ‘Tool Box’ to draw the model with the following shapes.
      • Rectangle.
      • Terminator.
      • Circle.
      • Decision.
  • Shape Properties:
    • This panel should contain a grid (scrollable) with the following columns.
      • Property:
        • IsImpacted
        • IsCritical
        • IsAutomated
        • IsResusable
        • BackColor
        • ForeColor 
        • Text Font
        • BorderColor
      • Value (drop-down).
        • True / False (for booleans ‘is’)
        • Colour Palette (for color properties)
        • Font Dialog (for text)
    • The following properties should be added as rows to the grid.
      • Font (Should open Font-Dialog box).
      • Shape Colour Palette.
      • Border Colour Palette. 
      • Text Colour Palette.
      • Link Colour Palette.
  • Steps:
    • The panel should contain a scrollable grid to display the steps of shapes in the model.
      • BDD Step.
        • BDD Step can take the below values
          • Given
          • When
          • Then
          • And
          • But
      • Step Description.
        • Step description is a free editable field which can have text like
          • A user launches an application
          • He logs into the application with the credentials
    • The panel should contain a label with shape name.
    • The panel should have the following buttons.
      • Add.
      • Delete.
      • Move Up.
      • Move Down.
      • Save.

04. Automation
  • The page should have an icon to go back to Home Page.
  • The page should have the main menu options:
    • Scenario Manager.
    • Application Model.
    • Objects Manager.
    • Test Data Manager.
  • Scenario Manager page should be loaded by default.

04.01. Scenario Manager
  • An option should be present to Generate scenarios. 
  • List all existing scenarios in a grid with the below columns (Pagination - 20 scenarios per page):
    • CheckBox
    • Scenario Name
    • Scenario Description
  • Every row in the grid should contain View, Edit and Delete buttons.
  • The page should contain a button to add a new scenario to the grid.
  • The page should contain a button to upload the checked scenarios to test management tool.

04.02. Edit Scenario
  • This page should be opened in a dialog containing a form for create/edit scenario.
  • A scenario will have a sequence of pages. During Add/ Edit Scenario only one page that is selected should be expanded and the objects listed. On control moving to another screen, the earlier expanded screen should automatically collapse.
  • Form should be common for both add new scenario and edit scenario option on Scenario Manager page with below fields:
    • Scenario Name.
    • Scenario description.
    • Pages.
      • Page Name (dropdown list with search capability)
      • Control object (dropdown list with search capability). This will be a list of control names from any web portal page.
        • Submit
        • Search
        • Login
        • Signout
        • Register
      • Page Objects
        • Checkbox
        • Object Name - editable
        • Action (dropdown). This will be a list of actions that can be performed on any web control
          • Input
          • Click
          • Select
          • Assert
          • Highlight
          • Launch
      • Xpath - editable
      • User Data - editable (Just the name like name, address, phone number, etc. User will input this value)
  • Edit Scenario page should contain below specified buttons
    • Save
    • Add New Page: adds a new Page with all details as mentioned above.
    • Delete Page: deletes the page details from scenario.
    • Grab Objects: load page objects under selected page. Based on the button click the row should be expanded (see shared wireframe example).

04.03. Test Data Manager
  • It should contain an option to Import test data from a file. 
    • Excel.
    • CSV.
  • It should display live status of database or TDM tool configured. 
    • Online
    • Offline
  • It should contain a form to map testdata iterations w.r.t. scenarios with edit and delete options in every row along with below fields:
    • Iteration name
    • Parameters: can be added dynamically (vertically aligned). This will be user defined. The user should be able to add new columns (like name, address, phone number) by giving column names.
    • It should also provide an option to Add a new iteration button, Add new parameter button and Save button to save the test data w.r.t. iteration name.
  • There should be options to save interactions and data values, as well as deleting
  • Test data from imported files – excel, csv should be auto-filled in above form and should be editable.
  • There should be an option to Export the test data template. 
  • There should be a button to Generate test data.

05. Execution
  • The page should have an icon to go back to Home Page.
  • The page should have the main menu options:
    • Test Lab (default view).
    • Test Data Manager.
    • Reports Dashboard.
  • Test Lab page should be loaded by default.

05.01. Test Lab
  • This page should have three panels:
    • Test Suites
    • Execution Grid
    • Scenarios (Expand/Collapse)
  • Test Suites:
    • This panel should list test suites:
    • Selecting a test suite should display the scenarios in the Execution Grid.
    • The panel should have the buttons:
      • Create (The user should be able to provide a suite name)
      • Copy 
      • Rename (The user should be able to provide a new suite name)
      • Delete
  • Execution Grid:
    • This panel should list the scenarios (as a grid) that are part of the selected test suite. 
    • The grid should have the following columns.
      • Scenario Name
      • Iteration Name
      • Execution Status:
        • Passed
        • Failed
        • Not Run
      • View Report (as a Link)
      • Delete button
    • The panel should have the following buttons:
      • Save
      • Execution Settings
      • Run Test (or) Suite
      • Stop
  • Scenarios:
    • This panel should list all the scenarios.
    • The user should be able to drag and drop scenarios to the Execution Grid.
    • If the scenario has a single iteration, add the scenario and the iteration name to the Execution Grid. If the scenario is already present in the execution grid, do not add the scenario
    • If the scenario has multiple iterations, display a popup with all the iterations for the user to choose. Add new rows for every iteration selected by the user to the Execution Grid.

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
  • Use a logo placeholder.
  • Branding is open to suggestions. Avoid vibrant colors and keep the palette to two or three accent colors maximum.

Design Assets
Folder: https://drive.google.com/open?id=1ULXOR6D4nwfUnO5K7cH27uYDX0VVlJ_2 
  • Application Sitemap.
  • User workflows.
  • Wireframe example of a core feature.

Resources
Target Audience
Technicians, developers and IT professionals of various ages. Location can be assumed as global, not region specific.

Judging Criteria
  • How well you plan the user experience and capture your ideas visually.
  • How well you implement the challenge requirements.
  • 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/30092576
    • 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.

Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

Topcoder Open 2019

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • Sketch
  • XD

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30092576