Minor changes to Filtering UI Mockup to match the style guide

[NilakshiS]

Overview

The Figma designs and prototypes created for the Filter functionality on My Projects page need to be updated to be consistent with the styles in the style guide.

Details

The style guide has some different styles than what the design mockups for filter use, we need to update the design mockups to keep it consistent with the style guide. There are also some suggestions to implement.

1. Change "Show Result" on buttons to "Apply".

Details

The Primary Call to Action button on each popup is labelled "Show Result", but the usual word used for something like this is "Apply".

• This is just John's opinion, so we can use another working if you want.
• Product agrees Apply is more consistent with industry standard.
• If Design has a different word we should use, please provide industry examples.
• Examples
  • Google Sheets uses "OK"

• Dev has already implemented this, see screenshot from dev site
  

2. Apply the "Primary" button style from the style guide to the "Apply" button.
3. Design a style for "Cancel" button or propose another from the existing styles.

   The Reset button is functionally equivalent to a Cancel button on, say the Duplicate Project Dialog, so we will apply that style unless directed otherwise. It's not clear to me if the style guide includes a button style for "Cancel". In some case Cancel is the Primary (safest option) and in others it might be Secondary, but maybe Cancel-type operations need their own button design.

Action Items

• Implement the changes to the design mockup and update the designs and prototype on Figma:
  • Change "Show Result" on buttons to "Apply"
  • Apply the "Primary" button style from the style guide to the "Apply" button.
  • Design a style for "Cancel" button or propose another from the existing styles
• Review with Product, Dev and Research and iterate if needed based on feedback.
• Update the style guide to add the new design.
• Once finalized, get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources

• Link to Buttons and Pagination in the style guide presentation
• New Filter Designs:
  • Design Issue Update the design and prototype for My Projects Filters on Figma #1885
  • Link to new prototype on Figma
  • Link to interactive prototype
• Old Filter Designs:
  • Design Issue Design Mockup: Redesign the My Projects Filtering UI #1578
  • Link to the Filter designs on Figma file
  • Link to the Figma Prototype for filtering UI

[serena1214]

1. Progress: I made 3 new designs for the cancel button. I'd like to get the team's feedback before moving on to the next step.
2. Blockers(Difficulties or errors encountered): Unsure about the best approach for updating designs and prototype in Figma. Should I update all pages individually?
3. Availability: I will be busy next week, but I'll do my best to squeeze in about 3 hours for our project.
4. ETA: Within 2 weeks.

https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=3337-11979&t=touGMwZ0jX3D4rMy-1

[serena1214]

Updated all the cancel and apply buttons on #1885 New prototype for filters and my projects based on dev site.

[NilakshiS]

@serena1214 Could you also change the button text to "RESET" instead of "CANCEL". It is more accurate for use in context of filters and is also used on the dev site. I've added a "Button Text" property to the component so it should be easier to change the value for multiple instances.

)

[serena1214]

Thank you @NilakshiS! I've updated all to "RESET"

[NilakshiS]

New button styles suggested for cancel and reset buttons:

• Design: Create Style Guide Presentation (Buttons/Pagination) #1768 (comment)

[NilakshiS]

New button styles have been approved by the stakeholders on 10/29/2024. Updated the new filter prototype (#1885) with the new design.