search

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
37 stars 57 forks source link

Experimental Design summary list of appointments #3090

Open outerpress opened 1 month ago

outerpress commented 1 month ago

What

Give a brief description of the component or pattern you want to propose.

This would add the appointment summary view currently in use by the Appointments and Check-in teams to the design system.

The appointment summary view is a list of a Veteran’s upcoming appointments, or past appointments. Each appointment summary is linked to a page that shows all the details of the appointment and tools to manage it.

We're including information on both tools that use this list.

I didn't include the details page designs in this; but we should consider those too, since linking to a details page is a key part of the functionality.

I didn't include the list of requests either, since that uses a different layout.

Purpose

What problem does this component or pattern solve for the user?

Web appts list

This is how Veterans review their appointments on VA.gov. The list is a summary view of their appointments. They can scan the list by:

Once they identify the appointment they’re looking for, they can click it to find detailed appointment information and options to print, cancel, and add to calendar.

Other features:

Screenshot 2024-07-25 at 3 04 00 PM

CIE appts list

[CIE team to add details]

Usage

Context or task: Explain the scenario or user tasks where this component is, or could be, used.

The lists can be found in the appointments tool on VA.gov, and Check-in.

A user will interact with the list when they want to learn about or manage their appointments, or after they have checked into their appointment.

Behavior

Describe the key interactions for this component, calling out any specific considerations for mobile.

Web appts list

You can see this on staging starting at https://staging.va.gov/my-health/appointments/.

Documentation

Also we’re moving toward aligning the desktop view to the tablet view, as the data was too truncated when it was set in one row. See #69191

CIE appts list

[CIE team to add details]

Examples

Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.

See documentation above.

Accessibility

Include any accessibility considerations.

Web appts list

CIE appts list

[CIE team to add details]

Guidance

What would you want to tell other teams about this component or pattern?

This should be used for time-based appointment information.

Collaboration Cycle Ticket

Provide a link to your collaboration cycle ticket.

Web appts list

CIE appts list

[CIE team to add details]

Your team

Tell us what team you are on.

Please include @outerpress @benbrasso-agile6 @cgednalske @Cieramaddox in any conversations about this pattern.

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

Web appts list

CIE appts list

[CIE team to add details]

Code (optional)

Include any existing code.

Web appts list See staging.va.gov.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

rtwell commented 1 month ago

since we're entering DS territory—is there a reason the templates linked above do not use our standard time zone abbreviation (e.g. ET vs EST)?

benbrasso-agile6 commented 1 month ago

Yeah; maybe just a couple files to clean up ^

rtwell commented 1 month ago

demo mode in the app is also erroneous — it might be more than Figma

rtwell commented 1 month ago

other considerations wrt the app:

  1. the tabular approach (where the date number and day name are listed in a mini-column on the left) loses its scalability and requires some adjustments in a couple scenarios: a. when users have text zoom enabled, type reflows somewhat differently in the app than the web. b. if we ever wanted to show a summary — let's say on the MHV landing page where we surface just upcoming appointments — the month and year both fall off (we would have to carry over the row as-is).
  2. lists like these should be as modular as possible (if you look at the app now, you can see how our lists are relatively similar across the app). When we make significant changes to this pattern, I'd like to make sure we're not disrupting other tools—we have to find the balance between letting tools design and build what they need for their specific use cases, but not go so custom that every list is completely different and users find them confusing. remember in the app, users can hop between ALL of these tools with 1 to 2 taps and it becomes very apparent very quickly when things work differently (and can be unexpected, which leads to a subpar UX).
  3. all of that to say: i wonder how invested in this approach we should get when the app has the data to say that the current list works, but I also assume you have data to say this works as well—how do we reconcile those? it seems to me that we're not getting a ton of value by stacking the date/day when a simple list is already doing the trick in the app (plus it plays nice with other lists, scales in other scenarios, doesnt require finding a home for month and year, and doesnt run into the weird type resizing issues.)
  4. Another discrepancy of note: The app currently labels confirmed/canceled/pending in a single "upcoming" list
outerpress commented 1 month ago

Crossposting this comment with some more questions about this pattern

outerpress commented 1 month ago

@rtwell I'm going to skip q's around aligning this list with other similar lists and touchpoints in different tools, and just comment on the tool itself:

is there a reason the templates linked above do not use our standard time zone abbreviation (e.g. ET vs EST)?

I'll dig around and get back to you on this one.

it seems to me that we're not getting a ton of value by stacking the date/day when a simple list is already doing the trick in the app (plus it plays nice with other lists, scales in other scenarios, doesnt require finding a home for month and year, and doesnt run into the weird type resizing issues.)

What we're doing here is breaking the date up to make it easier to scan the list based on the preferences we've seen in previous research:

  1. What day am I going?
  2. What time?
  3. What's the appointment for (type of care), and who's it with?
  4. Where am I going/how am I attending (modality and location)

So we separate out the day to make it easy to scan through a list of days first, then find the rest of the info sequentially. We did iterate on this pattern across 3 studies and users found it easy to use and understand.

I agree with you re: modularity and consistency across experience, but all my thoughts/q's there are more about how we do that process-wise and less about this pattern so I'll leave those off for now.

rtwell commented 1 month ago

So we separate out the day to make it easy to scan through a list of days first, then find the rest of the info sequentially. We did iterate on this pattern across 3 studies and users found it easy to use and understand.

stacking the day and date in it's own column is a way to make it easy to scan, not the only way, and there are plenty of private sector equivalents that have proven that to be true.

regardless, the app and the web have data that says "our thing is successful", which is great. in the spirit of continuity across web and mobile (particularly when users are in the app, and drill into a web view, where the differences will be the most obvious), how should we go about reconciling those things? I suspect we'll have to tackle them one at a time and we'll have to work together to ensure we're not negatively influencing the rest of the app.

humancompanion-usds commented 1 month ago

Can someone add some screenshots of this in the mobile app so I can see what we're comparing? Thanks!

outerpress commented 1 month ago

Can someone add some screenshots of this in the mobile app so I can see what we're comparing? Thanks!

@wavelaurenrussell @mistymg could y'all link screenshots/figma files of the list views in the appointments app here?

outerpress commented 1 month ago

since we're entering DS territory—is there a reason the templates linked above do not use our standard time zone abbreviation (e.g. ET vs EST)?

@rtwell we should be showing timezones without S/D. We strip the S/D, and we found at least one we missed one last year (AKT). It looks like HT still includes S/D too. So thanks for catching that! We'll get a ticket together to review all these and make sure they're in compliance with the content guide.

I'll update our documentation and the design file. I think EST is intended to a placeholder there to show we support 3 characters. I'll drop something clearer there.

wavelaurenrussell commented 1 month ago

Can someone add some screenshots of this in the mobile app so I can see what we're comparing? Thanks!

@wavelaurenrussell @mistymg could y'all link screenshots/figma files of the list views in the appointments app here?

Sure! Appointments list (demo mode):

vahb : appts list : demo mode image
rtwell commented 1 month ago

added an image to your comment @wavelaurenrussell I guess I could have just added here I was hoping they would render side by side :(

caw310 commented 1 month ago

@outerpress this is on the agenda for Thursday, August 1 DSC meeting at 11:05am ET. I will add you to the meeting invite.

outerpress commented 1 month ago

Thanks @caw310 - could we go first? A few of us have a meeting at 11:30 ET that day.

caw310 commented 1 month ago

Thanks @caw310 - could we go first? A few of us have a meeting at 11:30 ET that day.

Sure. I will put you first on the agenda.

outerpress commented 1 month ago

A couple more pieces to the puzzle:

cgednalske commented 1 month ago

@outerpress adding a link to our confirmation page (also how we used to format our entire list), which has a slightly different format than what we do on THE appointment list. Fairly similar to mobile app.

humancompanion-usds commented 1 month ago

Notes from DSC

Ryan: We want to scale this to other environments. Are Benefits designers talking to Health designers? We don't really incentivize this. We've grown and have to figure out how we want to coordinate.

Resolution