Challenge Summary
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)
- This panel should list all models:
- 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.
- Model Options:
- 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)
- Property:
- 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.
- This panel should contain a grid (scrollable) with the following columns.
- 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
- BDD Step can take the below values
- 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
- Step description is a free editable field which can have text like
- BDD Step.
- The panel should contain a label with shape name.
- The panel should have the following buttons.
- Add.
- Delete.
- Move Up.
- Move Down.
- Save.
- The panel should contain a scrollable grid to display the steps of shapes in the model.
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.