Challenge Summary
Welcome to STR Application Design Challenge.
We perform scientific testing of consumer products and we are looking to design a portal for our users to request, configure, track, and collaborate on product tests from internal and external labs. We need to provide a dashboard-like experience to users in order to engage the process.
Best of luck!
1. Requests (Desktop)
2. Request Summary Screen - Tests added state (Desktop)
3. Test Method Catalog (Desktop)
4. Test Method Detail (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1. Requests (Desktop)
2. Request Summary Screen - Tests added state (Desktop)
3. Test Method Catalog (Desktop)
4. Test Method Detail (Desktop)
5. Assign Samples (Desktop)
6. Enter Custom Params (Desktop)
7. Request Summary - No tests added state (Desktop)
8. Request Summary (Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
- Test Details
- Extras
- Main Content
- Test Method Output
- Get Started
- Lab Information
- FAQs
We perform scientific testing of consumer products and we are looking to design a portal for our users to request, configure, track, and collaborate on product tests from internal and external labs. We need to provide a dashboard-like experience to users in order to engage the process.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.1. Requests (Desktop)
2. Request Summary Screen - Tests added state (Desktop)
3. Test Method Catalog (Desktop)
4. Test Method Detail (Desktop)
- 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.1. Requests (Desktop)
2. Request Summary Screen - Tests added state (Desktop)
3. Test Method Catalog (Desktop)
4. Test Method Detail (Desktop)
5. Assign Samples (Desktop)
6. Enter Custom Params (Desktop)
7. Request Summary - No tests added state (Desktop)
8. Request Summary (Phone)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to come up with the look and feel of a dashboard concept that will help users with the process of creating and editing requests as well as status tracking of all aspects of the request as part of a single experience. In order to better select tests we are looking to provide a shopping cart-like experience for browsing and selecting test methods to be performed as part of your requests.
This challenge consists of designing a critical flow scenario for creating a request in our new Unified Request Portal.
Concept Goals
We want to provide a traditional corporate application for managing the status of requests, mixed with an Amazon-like experience for selecting test methods. We also want to optimize the catalog so users can add multiple tests at once, such as when selecting a predefined or saved list.
The branding guidelines contain styles for both light and dark designs. You can choose either option. We are looking for a great user experience for the application as a whole. Designs should consider all screens and the sitemap before beginning to design. We are looking for clean layouts and expanding the brand guidelines to more complex components.
The first four screens are critical each in their own way. The Requests page should highlight a grid design. The Request Summary screen should incorporate a dashboard view that highlights the status of the project and introduces a panel pattern for each of the page’s components. The Test Method Catalog page should offer filtering for trimming results as well as multi-select and cart management. The Test Method Detail page should feel like a product details page in Amazon, highlighting pictures and provide a dynamic cost estimate.
We plan to develop a responsive website, however, we don’t require to design mobile screens for all requirements. We do need you to consider mobile-first practices in order to make an easy transition to mobile.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- Portal name is “Unified Request Portal”.
- Create a global search feature available across all pages. Users can search for the name or ID of a request, or a test method.
- Create a notifications feature. It should alert user when status change or new discussions occur in their requests.
- Create a user profile link.
- Global navigation must contain links to: Requests, Catalog, Resources, Support.
1. Requests (Desktop)
The Request Screen is grid/list view of all Previous and In Progress Requests. This will be the primary screen for users to see when they come to the site.
This screen should have support for sorting and filtering; standard grid options would be accepted. In addition to generic filtering it would be nice to have convenience filtering for "My Requests" and "Team Requests". These can be bundled/included as part of the Primary Assigned filtering. Filtering by Status also needs to be prominent so the requester can easily filter between active tests and previous tests.
Request View Fields/Columns
- Request Id
- Request Description
- Primary Assigned (Name)
- Creation Date
- Due Date
- Expected Completion Date
- Status (Draft, New, Assigned, In Progress, Completed)
- Optional Fields:
-- Objectives (1-2 sentences)
-- Intended Use
-- WBS Number (Billing Code)
-- Number/Summary of Test Methods included in the request
2. Request Summary Screen - Tests added state (Desktop)
The Request Summary Screen is an 'admin style dashboard' to provide a “status-at-a-glance” for the selected Request. Its primary purpose is to give the status of the request and facilitate discussion and next steps. We see each of the components below in their own panel with more details available if you drill in.
The Request Summary Screen consists of the following elements listed in terms of priority. (see attached content maps performed by users)
- Request ID : e.g. “R26553”
- Request Description
- Request Tracking Progress/Status Bar
-- Status values are Draft, New, Assigned, Awaiting Samples, In Progress and Completed
-- Status at the request level is a roll up of the statuses for each test method. This component can expand to show the status for each test in the Tests Methods component (listed below). This can be displayed individually or as one large overall 'step progress bar' and a bunch of children step progress bars.
-- Sample Data for this screen
--- In this state of the screen the request will be in In Progress with 5 tests added, see Test Methods component for tests.
Request General Info
This component should list the general/header information about the request and should be either always editable or editable in some manner.
- Request Description
- Requester (Requester/Employee Id, Name, Location, phone number, Business Unit)
- Creation Date
- Due Date
- Expected Completion Date
- WBS Number (Billing Code)
- Objectives (1-2 sentences)
- Intended Use
- Rush (checkbox)
List of Samples
Sample fields/columns
- Product type
- Code (user defined code)
- Description
- Properties
Samples are editable (either inline editing, in a popup or different page).
Samples Sample Data for this screen:
- Product type, code, code description, properties
- Tissues, code D, LOC1 Batch, n/a
- Tissues, code R, LOC2 Batch, n/a
- Tissues, code F, LOC3 Batch, n/a
Discussion
Users should be able to have discussions with anyone on the team. This discussions component should include messages to the group, @-sign messages to individuals, and a history of events generated by the system.
Inspiration for the experience was taken from Asana. This tool’s discussion feature allows you to have an ongoing discussion history associated to any request.
Sample data for this screen (User, Message, Date)
- Mary Mathis, Please update your samples to include the counts for each test, 11/1/2017 2:00pm.
- System, Samples updated by Joe Smith, 11/1/2017 3:34pm.
- Joe Smith, @marymathis The request should be all set. I've set the samples to arrive next week, 11/1/2017 4:12pm.
List of Test Methods
The list of test methods shows all the tests that are currently part of this requests.
There should be a textbox to quickly add test method(s) by code or name. This will take you directly into the “Add” workflow. There should also be a mechanism to add using the Test Method Catalog which would link to the catalog.
There should be saved templates available that the user created to reduce request entry time.
Should be able to click somewhere on the row to view an individual test on the Test Tracking page (not being designed).
Clever ways to combining this with the Status Tracking bar above will be accepted, but not required.
Sample data for this screen:
- Test Method, Service Category, Lab, Description, Status, Due Date, Expected Completion Date.
- AL001- Analytical Research, Analytical, AL Lab, Lorem ipsum dolor sit amet consectetur adipiscing elit, In Progress, 12/13/2017, 12/13/2017.
- ASTM D1683 - Seam Strength, Physical, Acme Labs, Nullam volutpat nulla in mattis tempus, Completed, 10/30/2017, 10/30/2017.
- ASTM D5034 - Grab Tensile, Physical, Internal, Maecenas ut neque vel sem tempor , In Progress, 11/12/2017, 11/12/2017.
- EDANA 20.2 (NWSP 110.4)- Nonwovens Tensile Strength, Physical, Internal, Sed blandit risus ut risus mollis fringilla, Awaiting Samples 12/31/2017.
- HS023 - PDP Sensory Panel, Human Subject, HS Lab, Aenean quis tortor viverra, Awaiting Samples 12/31/2017.
List or Team Members
The list of team members includes manager, scientists and the requester themselves.
This is a read-only view over members. There will need to be an edit/show more mechanism to edit these members in a popup or separate page (not designed here) will allow them to assign their role and add/remove team members.
Team members should display profile information as well as presence (online status, chat/message/call, etc) information
Sample data includes:
- Name, role, BU, location, phone number.
- Mary Mathis, Manager, AXIS, Capital City Office, (555) 122-1442
- John Smith, Requester, Family Care, Southern Office, (555) 332-3441
- Bill Nelson, Scientist, AXIS (Analysis), Capital City Office, (555) 878-1092
- Chris Robbins, Scientist, AXIS (Physical), Capital City Office, (555) 548-6642
- Wendy Simpson, Scientist, AXIS (Human Subject Testing), Capital City Office, (555) 258-4985
Chart of Milestones
This component shows a series of milestones for each test within the request along a calendar/timeline.
Users should be able to create a milestone; milestones will also be added automatically from test method due dates.
Sample data includes:
- Test methods, Date, Description.
- AL001- Analytical Research,
-- 11/15/2017, Samples Delivered
-- 12/13/2017, Results Delivered
- ASTM D1683 - Seam Strength
-- 10/30/2017, Results Delivered
- ASTM D5034 - Grab Tensile
-- 11/5/2017, Samples Delivered
-- 11/10/2017, Testing Complete
-- 11/12/2017, Results Delivered
- HS023 - PDP Sensory Panel
-- 11/10/2017, Questionnaire Finalized
-- 11/13/2017, Samples Delivered
-- 12/10/2017, Testing Complete
-- 12/17/2017, Results Delivered
List of Files
Some test are highly complex and may need additional information (data files) to describe the potential workflow.
Scientists will also use this area to upload results files for their tests.
There should be an option to upload new files.
Sample Data includes:
- Type, Name, Description, Uploaded By, Uploaded Date.
- Excel, R26553-2017.xls, ASTM D5034 - Grab Tensile Test Results, Chris Robbins, 10/30/2017 3:43pm
- Excel, WeightSort.xls, The Weight Sorting template for this request, John Smith, 11/1/2017 1:28pm
- Word, R26553-AnalysisNotes.doc, Notes from Initial analysis meeting with John, Bill Nelson, 10/29/2017 11:14am
Summary of Costs
Some of the tests have costs associated to them. This component totals up the costs of the different tests.
Note: AL-001 and EDANA 20.2 (NWSP 110.4) are free and aren’t required to be shown.
Sample data includes:
- Line Item, Cost
- ASTM D1683 - Seam Strength, $60
- ASTM D5034 - Grab Tensile, $240
- HS023 - PDP Sensory Panel, $4,321
- Total Request Cost, $4,621
3. Test Method Catalog (Desktop)
The Test Method Catalog screen is basically the ecommerce product catalog for the scientific test methods that are available for a request. This catalog can be browsed on its own or as part of the creation of a request.
When adding test methods to a request, the catalog will need a way to allow multiple tests to be add/selected so that they can go through the workflow together. There should also be a way to select all and add to the request. The user experience should allow for adding items, then changing filters, and adding additional items before ‘checking out’ and assigning samples, the experience can include a mini cart viewer to see what’s been added.
Users should be able to select a test method and then go to the Test Method Detail Screen.
Catalog should have a method of filtering:
- By Name
- By Service Category (Physical, Analytical, Test Method Development, Compliance, Human Subject Testing)
- By Lab (Internal, External)
- By List (Y-T Test List, BCC Test List, FemCare Test List, My Favorites List)
- By Status (Under Development, Active, Deactivated)
- By Special Tests (Consultation Requests, Aging Tests)
- By Property (Lorem, Ipsum, Nullan, Aenean)
- By Benefit Area (Lorem, Ipsum, Nullan, Aenean)
- By Cost (range - free - $5000)
Test Method Fields:
- Test Method Code
- Test Method Name (Lorem Ipsum name)
- Service Category
- Status
- Cost
- Summary of the Method (lorem paragraph)
- Explanation of the output (Lorem paragraph)
- Sample data includes
- Set Filters to highlight (Y-T Test List)
- Select tests #1-5 from Request Details to be added to the request.
- Test Method Code, Test Method Name, Service Category, Status, Cost
- AL001 - Analytical Research, Analytical, Active, Free
- ASTM D1683 - Seam Strength, Physical, Active, $60
- ASTM D5034 - Grab Tensile, Physical, Active, $240
- EDANA 20.2 (NWSP 110.4)- Nonwovens Tensile Strength, Physical, Active, Free
- HS023 - PDP Sensory Panel, Human Subject, Active, $4,321
- TMD001 - Test Method Development, Test Development, Active, $4,321
- P1542 - Final Tissue X Compliance Test, Product Test, Draft, $221
4. Test Method Detail (Desktop)
The Test Method Detail Screen is the product details of the e-commerce style application. This screen will have all the additional details about the test method that's being viewed.
There should be an Add to Request button on the screen.
The Test Details Page should contain the following elements in order of priority (see content map from users).
- Test Method Title (ID - Name: ASTM D1683 - Seam Strength)
- Test Details
-- Test Method Service Category: Physical
-- Cost/Time per Sample: $4/sample
-- Turn Around Time - 4 days
-- Standardization Status - ASTM
-- Industry Acceptance - True
-- References - External Lorem Ipsum Links
-- Link to ‘EtQ Library’
- Extras
-- Recommended Tests – Amazon-like experience for ‘these tests purchased together’. Maybe link to the lists that this test is a part of. This test is in the My Favorites List, or the BCC List
-- Similar/Alternative Tests - What test could I use instead, that could be cheaper or better?
- Main Content
-- Method Description - 2x lorem paragraph
-- Video & Photo of Test being performed - videos and pictures of lab work
-- Example of Usage - lorem paragraph
-- Precision Information - lorem paragraph
- Test Method Output
-- Key Output of Method - 2x lorem paragraph
-- Description of Data Output & Learning - lorem paragraph
- Get Started
-- Specimen Size/Format - 15 rolls
-- Recommended Sample Size - 1 Specimen per test
-- Preparedness Checklist - (5 lorem todo list items)
- Lab Information
-- Lab Performing Work - Physical Lab
-- Subject Matter Expert Info - Contact Card for scientist from the Lab performing the work. Chat, email or call with the subject matter expert before adding to the request
- FAQs
-- Lorem Q&A information
5. Assign Samples (Desktop)
The Assign samples is a matrix that allows users to select which samples to apply to each tests.
Not all samples are needed for all tests. Please make sure to show examples of this matrix with not all samples applied to every test.
The rows represent each of the samples that are added to the requests (see above under the sample data for Samples, code D, code R, and code F above in Request Summary).
The columns should represent each of the test #1-5 (AL001 to HS023) that were selected in the Test Method Catalog multi-select.
6. Enter Custom Params (Desktop)
Each test method has a section of questions, therefore each of the 1-5 selected tests as part of the catalog should have a parameter entry screen.
The target scenario shows params for the 5 selected tests to be added, this screen allow for defining params to more/less than 5 methods. Not all parameters are required for each test, however, except where noted all methods must include a parameter, “Number of specimens to test:”.
AL001 - Analytical Research
- There are no custom params to define for this Test Method
ASTM D1683 - Seam Strength
- Question 1: Location of Seam to Test?
(Note: This question must be answered)
ASTM D5034 - Grab Tensile
- Question 1: Number of specimens to test in the Machine Direction (MD)
- Question 2: Number of specimens to test in the Cross Direction (CD)
(Note: At least one of these questions must be answered)
EDANA 20.2 (NWSP 110.4)- Nonwovens Tensile Strength
- Question 1: Number of specimens to test in the Machine Direction (MD)
- Question 2: Number of specimens to test in the Cross Direction (CD)
- Question 3: Number of specimens to test Wet
- Question 4: Number of specimens to test Dry
- Question 5: Number of specimens to test at High speed (300mm/min)
- Question 6: Number of specimens to test at Low speed (100mm/min)
(Note: At least one of these questions must be answered)
Test Method #5
There are no custom params to define for this Test Method.
7. Request Summary - No tests added state (Desktop)
This is the same screen as the Request Summary Screen designed as #2. This is an example of the Request Summary screen before tests have been added. The test methods component of the dashboard should be replaced with a component that emphasizes the creation/addition new tests.
Without tests, many other components would not have data. Files and Milestones should all show a message to recommending adding tests to the requests.
8. Request Summary (Phone)
This is the same screen as the Request Summary Screen from Day 1 except with a mobile layout.
Branding Guidelines
- Follow the attached branding book for colors, style and typography.
- If you don’t have the font please use a similar one. You’ll be asked to replace the font in case of winning.
- Use placeholder for logo.
- UI elements and layout should follow the provided style sheet.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
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.
Target User
Anyone in the organization that needs to order scientific testing from our research and development organization.
The user’s goals include:
1. Guide them through selected tests and help them be more informed.
2. Help them understand the status of the tests and manage them easier.
3. Provide efficiencies so users don’t have to do the same thing over again. Being able to reorder previous tests.
4. Allow them to be budget conscious.
Judging Criteria
- How interesting and engaging is the test request process?
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
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.
Source Files
All original source files of the submitted design. Files should be created in Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
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
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.