Landing page selection screen for "Report Test"
Why should we do this?
- Current experience: The current "Conduct tests" screen combines the options for individual patient reporting and bulk CSV upload without clear visual separation, potentially causing confusion for users.
- Why we want to make this change: By dividing the "Report Tests" page into distinct sections for individual reporting and bulk upload, and by adding visual cues and a test dashboard, we can significantly improve the user's ability to quickly understand and choose the appropriate reporting method and review their testing data. This will lead to a more efficient and accurate test reporting process.
User story
As a SimpleReport user, I want to easily choose between reporting tests for individual patients or using bulk upload, and I want to be able to review test data, so that I can efficiently and accurately report test results and monitor testing outcomes.
Action Requested
Implement the proposed structure and elements for the "Report Tests" screen (currently the "Conduct tests" screen with no patients in the queue).
Acceptance Criteria
Design
- [ ] Design is ready for handoff (i.e. dev ready)
- [ ] Design includes latest content updates
- [ ] Capture questions that come up during the content and design work
Review
- [ ] Reviewed with design and/or design lead
- [ ] Reviewed with content strategist for final approval
- [ ] Reviewed with product and engineering
Contact
- @khayeni-SL for design
- @mindyatwork for product
Additional Context
- Related to: User feedback regarding difficulty in distinguishing between reporting methods.
- Trello
- Figma
Existing Design
Proposed Design
@jayna-SkylightDigital Can we add a link to wherever we are getting the images from that are used in the figma?
@jayna-SkylightDigital Can we add a link to wherever we are getting the images from that are used in the figma?
I've added a link (Figma), as well as the illustrations as PNG files, to the description above.
Just an FYI, that we will need to purchase the illustrations. I will look into this. I also think the copy needs to go through review (I created the copy as a placeholder but would like product to sign off on it). @jayna-SkylightDigital cc @DanielSass
My recommendations for the text copy are below:
1. Single Entry
Original text
- Headline: Report tests by patient
- Text: Enter test results by selecting the patients you have added into Simple Report. This option give you the flexibility to enter individual test results.
- Button: Start reporting
Recommended text
- Headline: Enter Individual Test Results
- Text: Enter test results for one patient at a time by selecting an existing patient or adding a new one.
- Button: Enter Result
2. Bulk Upload
Original text
- Headline: Report tests by bulk upload (CSV)
- Text: Report results in bulk using a comma-separated values (CSV) spreadsheet. Quickly upload test results by following our spreadsheet template.
- Button: Start bulk upload
Recommended text
- Headline: Report multiple test results (CSV upload)
- Text: Quickly upload results for many patients using a CSV file. This feature is best for users comfortable with spreadsheets.
- Button: Upload Results
I have an ODC request out to Carla for budget on illustrations. https://www.notion.so/skylight-inc/Travel-and-ODC-Requests-19859a99cf70809bb50fdd1911e2924a
- set up huddle with UX and eng
Here are the updated designs for the landing page / nav after syncing with @mindyatwork to align on dashboard placement: https://www.figma.com/design/LglkDsGZDKMZm3XCkJPhfR/SimpleReport-2023-?node-id=9664-64761&t=A0zOM23dU3IyRYVW-0
By dividing the "Report Tests" page into distinct sections for individual reporting and bulk upload, and by adding visual cues and a test dashboard, we can significantly improve the user's ability to quickly understand and choose the appropriate reporting method and review their testing data.
I think we actually want to create a new landing page; that links to both the single entry workflow and CSV upload feature, instead of making the "report test" page into a landing page. @KeepAustinWired