VSA: [UX] Usability improvements - adding predefined date range

Problem to solve

The current date picker requires users to manually select dates or date ranges, leading to inefficiencies in selecting relevant dates. The lack of a predefined range option adds complexity to the value stream optimizing process, and could cause errors and confusion that occur when users manually select dates.

We need to simplify the date selection process and make it more efficient, accurate, and user-friendly.

We should also aim to create a consistent experience across the product and standardize the date range picker component. See current status:

VSA	Contributor statistics	CI/CD Metrics	Work items	Product analytics

Proposal

Add predefined ranges to allows users to quickly select a common time frame that aligns with their needs.

• Use Option D proposal
• D - overview design.
• D - menu design.
• Add four predefined date ranges to VSA's date picker - Last week, Last month, Last 90 days, Last 180 days (same as we have for DORA).
• In the dropdown add Custom option.
• A default range of Last month should be displayed when user opens the VSA.
• The date range should be inclusive, Last week for 7 days total.
• Near the date range show a count of what is selected in the dropdown.For example - if last month was February, it would say 28 days selected, if user select a custom date range, it could say 125 days selected.
• The date range should be reflected in the URL, allowing easy comparison of different time periods and will help with sharing charts links that show the intended timespan.
• Adding feature flag for this MVC.

UX options

Option A

• Have a single control to change the date range
• Within the menu, display the option to either, select a predefined range or choose a custom date range
• This is similar to an existing proposal from groupproject management
• 🖼 See design management →

Option B

• Have 2 controls to change the date range
• 1 dropdown Primary for predefined options
• 1 dropdown Tertiary for selecting a custom date range
• Note: When a predefined option is selected, it should update the value in the custom date range dropdown
• 🖼 See design management →

Option C

• Combines options A and B
• 1 dropdown Primary for predefined options
• Within the dropdown menu, show list of predefined options with to and from calendars
• Interactive example: https://react-tailwindcss-datepicker.vercel.app/props#shortcuts-footer
• 🖼 See design management →

Option D

• Is how Product analytics handles predefined ranges today
• Adds predefined ranges to a dropdown and doesn't show the custom date range options unless the Custom option is selected.
• Uses existing components that are in Pajamas
• 🖼 See design management →

Conclusion

Ideally, I am leading towards Option C for the following reasons:

• For the user, the most likely common action will be to choose a predefined range and less common to choose a custom range
• This option combines both predefined ranges and custom calendar selection similarly to the work items proposal but clearly separates the predefined ranges in a left column.

However, since Option C will require more stress testing (as mentioned in #408656 (closed)Overview_C_-active-_month.png) and will need to be added to Pajamas. I think we should explore a solution that can be implemented in a shorter time frame which solves the same problem.

Therefore Option D seems like the best candidate in order to move forward.

Resources

• 🖼 Figma project →
• https://design.gitlab.com/content/date-and-time#guidelines