Improve editorial experience when adding media

stefaniefgray commented 2 years ago

User Story or Problem Statement

As an event editor I am able to quickly and upload an image so that I can add images to a Veteran facing event listing.

As a VBA editor I am able to quickly and upload a facility image so that I Veterans and their families know what our building looks like as they arrive for appointments.

As a VAMC editor I am able to quickly and upload an image to a story article so that I can visual storytelling to Veteran facing story pages.

As a VAMC editor I am able to quickly and upload a staff image so that I can show staff photos to Veteran facing VAMC profile pages.

Related Editor Research Insights

In Facilities recent FEB 2024 VBA regional office editor research, related insights were uncovered.

Confusion between alt text and description field, captured in https://github.com/department-of-veterans-affairs/va.gov-cms/issues/17443
Save message after photo upload flow, mismatch in messaging, captured in https://github.com/department-of-veterans-affairs/va.gov-cms/issues/17375
Observed lack of overall help text and links within help text to any related KB articles
Button text not clear/obvious
remove button was only one that worked well
As an observer, it would benefit the editor if the overall media upload/edit flows were documented and reviewed for improvements

Additional related insights were also uncovered during 2024 VAMC editor research

Uploading images requires workarounds due to known CMS issues

Previous observation during an editor screenshare: Via Michelle Middaugh in VAHELP-3907:

After watching many Vet Center editors struggle with adding media, I think we have an opportunity to make the editorial experience better. After selecting the media, the pop-up window is too small to see the full flow through alt text, cropping and section selection. Yet the save buttons are always visible, even before the required fields have been completed.

It's easy to understand why they might think it's saved or inserted when they haven't completed all the fields.

I'd love to see us revisit this at some point. By the way, the help guide calls out each of these steps but we still have a lot of new editors who struggle."

Screenshots:

Please refer to the four total screenshots added by Michelle to the following Knowledge Base article: https://prod.cms.va.gov/help/vet-centers/how-to-add-a-vet-center-facility-photo

Original pop-up window when adding media:

Relatively small dialog window for filling out information:

Acceptance Criteria

[ ] Overall user flow is reviewed for UX improvements
[ ] New design reflects a better UX for editors
[ ] Help text throughout flow is improved
[ ] Drupal engineering feasibility review
[ ] Design review with Amanda (VA UX lead) and Marisa (CMS UX designer)
[ ] Next steps: Spin up new ticket - UX research with small group of editors with a Figma prototype
[ ] Next steps: Spin up new ticket - Requires KB article update to reflect changes

stefaniefgray commented 2 years ago

https://va-gov.atlassian.net/browse/VAHELP-3907

davidmpickett commented 1 year ago

Seems more like a core CMS change than a Facilities specific one

aklausmeier commented 4 months ago

In Facilities recent FEB 2024 VBA regional office editor research, related insights were uncovered.

Confusion between alt text and description field, captured in #17443
Save message after photo upload flow, mismatch in messaging, captured in #17375
Observed lack of overall help text and links within help text to any related KB articles
Button text not clear/obvious
remove button was only one that worked well
As an observer, it would benefit the editor if the overall media upload/edit flows were documented and reviewed for improvements

aklausmeier commented 4 months ago

@davidmpickett It's possible Facilities could pull this into Vet Center work. FYA if we uncover as an opportunity.

aklausmeier commented 2 months ago

@mmiddaugh and I discussed this as a possible candidate for IIR UX design follow up to the VAMC editor research they recently completed in collaboration with Facilities team. I have checked in with @EWashb and we are good to move forward if our teams capacity allows.

aklausmeier commented 2 months ago

Related tickets, likely with overlap. Once the ticket in this work is complete, we can review and revise the following.

Image Crop UX #2415
Update help text for image upload fields #12375
Prevent editing of VAMC system banner decorative images #8233 (epic)
Improve image upload and cropping experience #8745 (epic)
Improve facility photo widget across all content types. #4895
Image uploads don't stay cropped #5043

aklausmeier commented 2 months ago

Michelle and I met with IIR team today. They will begin this work and spin up their own tickets on their board based on capacity in their sprints.

cc @oddballpete @DavidPearlUX

department-of-veterans-affairs / va.gov-cms