prime-simplereport icon indicating copy to clipboard operation
prime-simplereport copied to clipboard

Landing page selection screen for "Report Test"

Open jayna-SkylightDigital opened this issue 8 months ago • 7 comments

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

Image

Proposed Design

Image

jayna-SkylightDigital avatar Mar 31 '25 17:03 jayna-SkylightDigital

@jayna-SkylightDigital Can we add a link to wherever we are getting the images from that are used in the figma?

DanielSass avatar Apr 01 '25 16:04 DanielSass

@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.

jayna-SkylightDigital avatar Apr 01 '25 17:04 jayna-SkylightDigital

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

khayeni-SL avatar Apr 02 '25 19:04 khayeni-SL

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

jayna-SkylightDigital avatar Apr 02 '25 20:04 jayna-SkylightDigital

I have an ODC request out to Carla for budget on illustrations. https://www.notion.so/skylight-inc/Travel-and-ODC-Requests-19859a99cf70809bb50fdd1911e2924a

khayeni-SL avatar Apr 03 '25 18:04 khayeni-SL

  • set up huddle with UX and eng

mindyatwork avatar Apr 23 '25 20:04 mindyatwork

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

khayeni-SL avatar Apr 25 '25 19:04 khayeni-SL

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

khayeni-SL avatar May 12 '25 16:05 khayeni-SL