Challenge Summary
Welcome to the Image Analytics Wireframe Challenge!
For this challenge, we are looking for your help to come up with a wireframe concept for an image analytics application. Our customer has built an application that runs, track, and analyze tests result which is being run on the test servers.
We need to see intuitive, elegant and easy to use wireframe concepts that will let us design and build the final web-based user interfaces on the next stage of this project. Think about what are the best UI/UX practices when creating this wireframe.
Round 1
Submit your initial wireframes for checkpoint review. Feel free to add any screens which are necessary to explain your concept.Round 2
Submit your final wireframes plus checkpoint feedback implemented. Feel free to add any screens which are necessary to explain your concept.Background
Our customer has built an application to run, track and analyze tests result which is being run on the test servers.
They want us to help them in building UI/UX & Frontend Code to accelerate its overall deployment activities.
Normal Flow of the Application:
-
When a user opens the image analytics app he would be able to select an image and run the algorithms
-
The input files for this app would be XML files
-
These XML files will have information on what test needs to be run and what kind of images needs to be selected, and other information
-
And when the app is in online mode (ex. connected to a scanner) it will run the tests straight from the scanner
-
Once the tests are run, the results display logs of information and status or error messages if any.
Screen Requirements
1. Homepage - it’s the main page where all tests are being run on the test server.
-
It is a grid with clickable rows either expanding inline or expanding into a new page/screen showing further details of a test run.
-
Details of a test being run in terms of the images being captured shown in an image viewer (displays the scanned images) and continues to update the images or parts of the images based on data received from the server via Websockets.
-
Create a new test, configuration screens to define various test parameters which are basically Form filling various information
-
Run, Pause, Continue, Abort tests by selecting a row that represents a test and being able to select one of these actions
-
Edit a test configuration – Form editing and submitting
-
Image viewer window,
-
Log view windows/sections: show streams of images or text coming from the server for each test run.
-
Log view needs to be an expandable/collapsible based on grouping default
-- USer should be able to Selectively choose and save a subset of the logs. -
Error View: will display errors after the test is run
2. File
When a user selects File,
- User should be able to choose multiple instruction files and run as a job.
-
Upload files and allow to move up and down based on plots in the ADF order.
- Support for selecting the different format of files. (XML, JSON, INI, TXT)
3. Configure -
User should be able to
-
Print Test Setup - this shows the information related to printing
-
Inspector Behavior - this displays the app settings as if there is an error they can prompt to abort (checkboxes), etc...
-
Log Levels and Diagnostics - this has sets of diagnostic options like:
-
Pause alignment
In the input file, there will be multiple algorithms to run. When the user selects “pause alignment”, during a run it will pause after every alignment and gives you the log -
Pause algorithm - Will pause after every algorithm and gives the log
-
Pause barcode
If the image has a barcode algorithm, it will pause after every barcode and gives log
-
-
Runtime Override - allows you to change the input files. Example, if a user has XML input, the user can choose what tests to run. Basically, it modifies run time settings of the input file.
-
Stored Settings - users can save profile information, they can name and save whatever configuration they set. The next time they load the app, it will be loaded with the most recent settings they saved.
-
Image Source - these are a set of options which basically shows a list of scanners (automatic, manual)
4. Test - this feature will have the following options. Show placeholders for these
-
Run
-
Abort
-
Continue
-
Sweep Now
-
Auto Sweep
In case of test aborted / failed / completed : Display proper notification, highlight the job object with different color etc.
-
For Test Failure, we are comparing the algorithm results with some predefined criteria and marking it as success or failure based on the range in which results falls under.
-
Abort can be manual or based on some internal errors.
5. View - these have the following options
-
Runtime draw - when a user runs the test, another viewer window will launch and will show the image and related test output in terms of overlay and things like other test info
-
Minimise viewer - this is to minimize the viewer
-
Should be able to parallely run multiple jobs online/offline and related views and results.
Target Users
- Operators, manufacturing, R&D, and engineers
Tools :
- We are asking to work with Axure: http://www.axure.com/support
- You can also work with static images but you must include a fully navigable prototype in HTML.
- If you are designing in the Adobe XD then it is mandatory that you create the flow using MarvelApp as we are expecting to see a clickable wireframe in this challenge.
- You are also allowed to submit pure HTML wireframes
Judging Criteria
- User Experience of the application
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent user flow
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
Wireframes should be built in HTML or Axure
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase, you may be asked to modify content or user click paths
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.