Challenge Summary
Welcome to “VA PseudoVets Components UI Design Challenge”. In this challenge, we are looking for a fresh new user experience for a brand new system that creates and updates realistic and dynamic synthetic patient data. This data will provide to software developers the opportunity to develop programs and products utilizing the data types present in healthcare production system(s). You will be focused on creating how this application should look and represent the data using the wireframes from a previous challenge as your starting point.
Let us know if you have any questions!
1) Dashboard
2) Create New Dataset
3) Edit Dataset
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Dashboard
2) Create New Dataset
3) Edit Dataset
4) Configuration/Preview
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
PseudoVet is an automated patient data fabrication engine which provides a set of active synthetic patients and clinical data that can be used for healthcare software development. Development against real patient data unnecessarily exposes patient health information (PHI) and personally identifiable information (PII) and cannot be used by developers outside of the VA network. However, fully functional, realistic data sets can be used safely in development, testing, training and other non-production environments in compliance with the Health Information Technology for Economic and Clinical Health Act (HITECH Act) and other regulations. Development against current fabricated data is not useful because the data sets are outdated, which requires development teams to spend time developing data sets to use in lieu of writing code or require licenses and cannot be shared.
We already run a wireframe challenge were the architects visualized how this application should work. You will be working using the winning submission as your main reference but is up to you to explore new concepts and propose the best approach on how this web application should look and work.
Key Items to Focus on
- Think of an intuitive way to let users make configuration options
- Easy and intuitive use for tech and non tech users.
- This will be a web application so user 1280px as your main width.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this app.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors. (See branding section on this requirements page for reference)
- Use the wireframes as your main reference, but if you have better solutions and concepts, use them. We don’t want to see just colored version of the wireframes.
- Keep things consistent. This means all graphic styles should work together.
The datasets will be generated through the following concepts:
Population Configuration
This area will allow a user to configure several parameters to influence the generated data.
- Number of patients
Determines the base number of patients generated.
Data Scope
- Start Date
Defaults to the start date of the war era selected. Can be used with the end date to provide a windowed view of patient data.
- End Date
Defaults to the current date. Used with the start date to determine patient age window.
- War Era Selection
Determines the start data of the data. More importantly, it sets up the pre-defined morbidity profiles for the generated data.
Morbidity Configuration
This section allows the user to input several diagnosis codes and configure them against the population. This section will pre-fill based on the war era, however, it will also allow a user to tweak the parameters as needed.
- Diagnosis Code
The diagnosis code for the morbidity. This code will determine the related conditions and encounter/episodes of care.
- % of population with diagnosis
Determines what percentage of the total generated population acquires this diagnosis. The totals of all diagnosis can be over 100%. In other words, it is possible for an individual to acquire more than one morbidity.
- % probability that the above population acquires diagnosis
Inside of the percentage selected above, the % chance that a patient acquires this diagnosis over the course of the date scope. For example, let’s say someone selects that 40% of the generated population could get heart disease. Of that 40%, this parameter will determine what percentage of that 40% will get this diagnosis each year.
- Exclusions
Allows a user to select a set of exclusions for the population. For example: You could have a heart disease diagnostic code, but place an exclusion that no female generated patients will get this disease.
- Related Conditions
Should automatically include any codes for related diagnoses. A user should be able to add/delete from this list as needed, however, we should seed the data based on the selected diagnosis code.
- Encounter/Episodes of Care Profiles
Based on the selected diagnosis, the system should generate the appropriate number of encounters and episodes of care.
Required Screens/Functionalities
1) Dashboard
- See “Dashboard” on wireframes for reference
- Focus on navigation and how the data is presented
- What other Key elements would be useful to have on dashboard?
2) Create New Dataset
- See “Create New Dataset Configuration” on wireframes for reference
- Wireframes propose a wizard style form input, but if you have another proposal to improve the UX just let us know, we want to see your concepts!
- Think on: less clicks and less writing
3) Edit Dataset
- See “Edit Dataset Configuration” on wireframes for reference
- Basically the same information entered on “Create New Dataset” must be edited. But, having the same layout is the best solution? Is there any cleaner way to allow users edit the Dataset?
- Think on: less clicks and less writing
4) Configuration/Preview
- See “Load Configuration File” on wireframes for reference
- Right now wireframe propose to load the configuration file. However, we are looking for a way to “Preview” the configuration.
- Think on modern features such like drag and drop.
Compliance - Important
- UI shall be 508 compliant. For details on 508 compliance requirements visit:
https://www.section508.va.gov/support/webdev/index.asp
Branding
- Your design must be designed according VA Branding Requirements. Important, if you design do not match these styles it won’t be presented to customer.
- Use the following color palette as your main colors:
https://www.vets.gov/playbook/downloads/VHA_Style_Guide_508.pdf
This guidelines also apply to web design.
- If you don’t have the fonts from the branding document, you can use Open Sans as your main font. We might require to replace them on final fices.
Softwares and Stocks Icons
- You can design your artwork using Adobe Photoshop / Illustrator or Sketch
- You can use stocks icons from icon8 and flaticon. Remember to declare them.
Screen Sizes:
- This will be a web application. So design using 1280px as your main size.
Downloads
- You can find the wireframes on the following link.
https://drive.google.com/open?id=1wOhTbObq97DmHY7Wh8fYLLnL2cKsRv3Q
Target Audience:
- The web site will be used by software developers and The Department of Veterans Affairs final users.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch.
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
Let us know if you have any questions!
Round 1
Submit your initial designs for a checkpoint feedback:1) Dashboard
2) Create New Dataset
3) Edit Dataset
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 1 MarvelApp prototype.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your Final designs:1) Dashboard
2) Create New Dataset
3) Edit Dataset
4) Configuration/Preview
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 1 MarvelApp prototype.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
PseudoVet is an automated patient data fabrication engine which provides a set of active synthetic patients and clinical data that can be used for healthcare software development. Development against real patient data unnecessarily exposes patient health information (PHI) and personally identifiable information (PII) and cannot be used by developers outside of the VA network. However, fully functional, realistic data sets can be used safely in development, testing, training and other non-production environments in compliance with the Health Information Technology for Economic and Clinical Health Act (HITECH Act) and other regulations. Development against current fabricated data is not useful because the data sets are outdated, which requires development teams to spend time developing data sets to use in lieu of writing code or require licenses and cannot be shared.
We already run a wireframe challenge were the architects visualized how this application should work. You will be working using the winning submission as your main reference but is up to you to explore new concepts and propose the best approach on how this web application should look and work.
Key Items to Focus on
- Think of an intuitive way to let users make configuration options
- Easy and intuitive use for tech and non tech users.
- This will be a web application so user 1280px as your main width.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily understand how to use this app.
- Your design must work and feel on brand. So work and use the color palette only. Do not reinvent colors. (See branding section on this requirements page for reference)
- Use the wireframes as your main reference, but if you have better solutions and concepts, use them. We don’t want to see just colored version of the wireframes.
- Keep things consistent. This means all graphic styles should work together.
The datasets will be generated through the following concepts:
Population Configuration
This area will allow a user to configure several parameters to influence the generated data.
- Number of patients
Determines the base number of patients generated.
Data Scope
- Start Date
Defaults to the start date of the war era selected. Can be used with the end date to provide a windowed view of patient data.
- End Date
Defaults to the current date. Used with the start date to determine patient age window.
- War Era Selection
Determines the start data of the data. More importantly, it sets up the pre-defined morbidity profiles for the generated data.
Morbidity Configuration
This section allows the user to input several diagnosis codes and configure them against the population. This section will pre-fill based on the war era, however, it will also allow a user to tweak the parameters as needed.
- Diagnosis Code
The diagnosis code for the morbidity. This code will determine the related conditions and encounter/episodes of care.
- % of population with diagnosis
Determines what percentage of the total generated population acquires this diagnosis. The totals of all diagnosis can be over 100%. In other words, it is possible for an individual to acquire more than one morbidity.
- % probability that the above population acquires diagnosis
Inside of the percentage selected above, the % chance that a patient acquires this diagnosis over the course of the date scope. For example, let’s say someone selects that 40% of the generated population could get heart disease. Of that 40%, this parameter will determine what percentage of that 40% will get this diagnosis each year.
- Exclusions
Allows a user to select a set of exclusions for the population. For example: You could have a heart disease diagnostic code, but place an exclusion that no female generated patients will get this disease.
- Related Conditions
Should automatically include any codes for related diagnoses. A user should be able to add/delete from this list as needed, however, we should seed the data based on the selected diagnosis code.
- Encounter/Episodes of Care Profiles
Based on the selected diagnosis, the system should generate the appropriate number of encounters and episodes of care.
Required Screens/Functionalities
1) Dashboard
- See “Dashboard” on wireframes for reference
- Focus on navigation and how the data is presented
- What other Key elements would be useful to have on dashboard?
2) Create New Dataset
- See “Create New Dataset Configuration” on wireframes for reference
- Wireframes propose a wizard style form input, but if you have another proposal to improve the UX just let us know, we want to see your concepts!
- Think on: less clicks and less writing
3) Edit Dataset
- See “Edit Dataset Configuration” on wireframes for reference
- Basically the same information entered on “Create New Dataset” must be edited. But, having the same layout is the best solution? Is there any cleaner way to allow users edit the Dataset?
- Think on: less clicks and less writing
4) Configuration/Preview
- See “Load Configuration File” on wireframes for reference
- Right now wireframe propose to load the configuration file. However, we are looking for a way to “Preview” the configuration.
- Think on modern features such like drag and drop.
Compliance - Important
- UI shall be 508 compliant. For details on 508 compliance requirements visit:
https://www.section508.va.gov/support/webdev/index.asp
Branding
- Your design must be designed according VA Branding Requirements. Important, if you design do not match these styles it won’t be presented to customer.
- Use the following color palette as your main colors:
https://www.vets.gov/playbook/downloads/VHA_Style_Guide_508.pdf
This guidelines also apply to web design.
- If you don’t have the fonts from the branding document, you can use Open Sans as your main font. We might require to replace them on final fices.
Softwares and Stocks Icons
- You can design your artwork using Adobe Photoshop / Illustrator or Sketch
- You can use stocks icons from icon8 and flaticon. Remember to declare them.
Screen Sizes:
- This will be a web application. So design using 1280px as your main size.
Downloads
- You can find the wireframes on the following link.
https://drive.google.com/open?id=1wOhTbObq97DmHY7Wh8fYLLnL2cKsRv3Q
Target Audience:
- The web site will be used by software developers and The Department of Veterans Affairs final users.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, Adobe Illustrator as a layered AI file or Sketch.
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.