Design updates to Facility Locator search

thejordanwood commented 7 months ago

Description

The DS team provided guidance on different aspects of the Facility Locator search during a DS Council meeting on 4/11/2024. In that meeting, it was determined that design iterations are needed to the FL search.

Details

Design iterations needed:

[x] Service type field. Components are being updated and the DS component doesn't allow disabled states. The DS team suggested exploring solutions to accommodate progressive disclosure like a stacked design on desktop (similar to mobile), radio buttons, or checkboxes. Ideally, the Service type field would only show when needed to avoid the use of a disabled state.
[x] Location field. This field is unique because it has a clear button when there is a location input. In the designs, confirm the clear button is the updated icon style (if there is an updated style). An iteration may not be needed for this, but explore how to contribute this back to the DS. Work for this happened in #17118
[x] All fields need to be the same size. Follow the v3 component field sizes. This is in reference to #17836

Design

Facility Locator Figma file

Acceptance criteria

[x] Review with accessibility
[x] Review with engineers
[x] Review with Sitewide and VA UX Leads
[x] Review with PM/PO
[ ] Create any follow up tickets

thejordanwood commented 7 months ago

From Laura about the Location field:

I think the main question I had, and the DST didn't seem against it adding this option but was just to confirm before I ask them, that we need and want this clear input button here still. After that DSC meeting, and going in the direction of thinking of a broader filter pattern for all VA, is this what we would like to include in that broader idea? I just want to make sure we aren't asking for something just because that's what we have now

davidmpickett commented 6 months ago

@jilladams @mmiddaugh I'm trying to figure out where this slots in CYQ2 Priorities. I think what we can say is that this is part of #15541 and kinda blocks #14993. It makes sense for Jordan to prioritize these design updates this quarter so that once Phase 1 and 2 are complete these updates would be ready for integrating into the Staged Prototype

davidmpickett commented 6 months ago

@thejordanwood A bad experience that might be worth a look while you're revisiting the Service Type experience https://github.com/department-of-veterans-affairs/va.gov-cms/issues/15664

jilladams commented 6 months ago

We should take a strong mobile-first approach to the layout.

jilladams commented 6 months ago

Demoting from Sprint 3 in favor of starting the typography audit which is now ready for us, and plans to ship May 22.

thejordanwood commented 1 month ago

End of sprint update:

Layout revisions design in Figma

Amanda and I have discussed different design options for this. In order to keep things in scope for now, we're opting to left align and stack the input fields. I've created mockups/flows to show how this would look and how the progressive disclosure should function.
I now need reviews from the team:
- @aklausmeier I added flows since you last looked at this, if you want to review again.
- @davidmpickett You're listed as a reviewer in the ACs. Let me know what you think!
- @eselkin or @randimays. I'm not sure who will be doing this work, but could one of you look over the Layout Revisions page in the Figma file and let me know if there are any red flags? I can also add more explanation if necessary.
- I'll need to get Laura's review on this when she returns from PTO.

aklausmeier commented 1 month ago

@thejordanwood Feedback left in Figma file. I think it's worth exploring engineer level of effort in favor of better overall UX for comparison of the "in scope" design and the alternative with the map display on the right of the form fields. Let me know if you have questions.

thejordanwood commented 1 month ago

@eselkin @randimays @SnowboardTechie An update on what I'd like your opinion on:

There are now two options for layout revisions to the facility locator. They can both be seen on the Layout Revisions page in the Figma file. This is the only page that you need to review for now.

Option A: Improves the UX by moving the search beside the map and makes the map longer to leave room for the results.
Option B: An idea that might keep us more in scope by left aligning and stacking the input fields.
Both options would need to allow for progressive disclosure of the service type input field. I've shown the functionality for that in Option B, but it also applies to Option A.

@aklausmeier and I are trying to get a sense of how much engineering effort each option would require so that we can make a decision on which one to go with.

randimays commented 1 month ago

@thejordanwood Unless there are some limitations with Mapbox (re: required size of the map, or behavior of the markers and map interactions), I think the layouts for both Option A and Option B are similarly light engineering efforts. Not sure what the scope is exactly, but I don't think Option A blows it out, if that helps.

davidmpickett commented 1 month ago

I agree that Option A is the better solution
I just edited the ticket body to strike out the AC about the Use my location button since that was addressed in a separate ticket and is not reflected in these designs

SnowboardTechie commented 1 month ago

➕1 to @randimays' thoughts on these being similar engineering efforts. Option A is my personal preference for the UX improvements 👍🏻

thejordanwood commented 1 month ago

@FranECross Looping you in for awareness. It looks like we may go with Option A, but I need to explore other scenarios. Like what it may look like on tablet and when using auto suggest.

FranECross commented 1 month ago

Thanks, @thejordanwood ! Looping in @Agile6MSkinner since he's PM for this (although I do appreciate being looped too in because I'm doing FL work for community care providers). I love the new design.

davidmpickett commented 1 month ago

Note from UX sync today. We need @laflannery to review when she returns from PTO, especially on the Progressive disclosure flow

laflannery commented 1 month ago

@thejordanwood Everything looks good to me, let me know if I should be adding any annotations or engineering notes at this time.

Just to make sure I looked at the right layouts - I reviewed "Desktop - New layout" and then the Tablet/Mobile options that were to the right.

I slightly prefer Tablet Option 2 because the map is just that small bit wider.

Final note - you may want to remove "Use my location" from the tablet/mobile layouts to avoid confusion

thejordanwood commented 1 month ago

Updates:

I've cleaned up the Layout Revisions page to clearly show the new layout we want to implement
This also shows the tablet version we'd like to implement
I included a design to show what auto suggest would look like in this new layout, although we're still a ways out from that

Next steps:

Amanda and Michelle to discuss next steps (research v moving forward building this)
@Agile6MSkinner An AC on this ticket is to create any follow up tickets. I created a ticket stub to make sure that we add final touches and annotations to this design, but you may need to make any necessary engineering tickets.

jilladams commented 3 weeks ago

We had a decision on this ticket from Amanda that we will not need usability research, so that's no longer a dangler. We have a stub for design follow up.

We don't have any implementation tickets yet, but I know @Agile6MSkinner has scheduled a story mapping session for this.

Closing!

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