Incorporate Button Design System Component into the app

[kellylein]

Project Status Overview

Project Objective:

• The Design System team will be creating the Button component as part of department-of-veterans-affairs/va-mobile-library#77. This Epic covers the Flagship FE team implementing that new component everywhere in the app. The Flagship team will give feedback on the process to the Design System team to help them improve the Design System.

Notes from the design system team:

• Updates to the Button component
  • Disabled buttons will not be supported in the design system.
  • Helper text (below the button) was previously included with the button component in the design library. It has been removed from the button component and may need to be adjusted in the app. We believe the Helper text is present in Appointments if there is a video appointment that is disabled.
• The following Button components should also be considered in the app:
  • Components that currently use the Button component
    • Reply message button
    • Start new message button
    • White button on the home screen. Component can likely be replaced with the dark mode version of the Base (Primary) style in both light and dark modes.
  • Components that may be replaced with the Button component
    • Footerbutton - Currently used in large panels and filter/sort modals (like in Rx). Component can likely be removed in the app and replaced with the standard Button component from the design system.
  • Button components that will not be covered by the Button component
    • Descriptive back button
    • Back button
    • Header buttons
    • CtaButton (related to the VCL button)
• In ticket department-of-veterans-affairs/va-mobile-app#5677, the following tickets were created and may be addressed with this work:
  • department-of-veterans-affairs/va-mobile-app#6695 - remove all icons from buttons in the app
  • department-of-veterans-affairs/va-mobile-app#6696 - replace button with link

Current Dependencies / Blockers

Blockers

|Blocker | Team / Owner | Est to Resolution | |-------|---------|-------| | | | | | | | | |

Project Timeline

Milestones

|Step | Timing | |-------| ---------| |Sprint 0 - Discovery | | |Step 1 - Strategy | | |Step 2 - Design | | |Step 3 - Building / Implementing | | | 100% Release | | |Step 4 - Post Verification| |

Monthly Update

Updates

|Month| Project Health | Progress & Key Accomplishments| Issues/Risks/Blockers| |-------| ---------|--------|---------| |July '23| |Aug '23| ..... |Sep '23| |Oct '23|

Detailed Project Scope

Problem Statement

Assumptions

Risks

Definition of Done

Following needs to be true

|Item | Completed | |-------| ---------| | | | | | |

Project Scope

Items in and out of scope

|In Scope | Out of Scope| |-------| ---------| | | | | | |

Important Project Links

Links

- [Github](url) - [Product Brief](url) - [Product Canvas](url) - Design - [Discovery](url) - [Mockups](url) - [Final Design](url) - [Figma File](url) - Research - [Document 1](url) - [Document 2 ](url) -Analytics - [Document 1](url)

Team Members

Contact List

- **OCTO Product Leads:** Rachel Han and Ryan Thurlwell - **PM:** Rachel Han - **Ad Hoc PM:** Meko Hong - **Engineering:** Jayson Perkins and Jon Bindbeutel - **Design:** Lauren Russell - **External Team 1 & Role:** - **External Team 1 & Role:**

OKR and Analytic Metrics

Metrics

|What we are measuring | Why | Event Name |-------| ---------| ----- | | | | | | | | |

Questions

Open Questions

Closed Questions

| Question | Answer | |--------|----------| | | | | | |

Change / Decision Log

Change & Decision Log Details

| Change | Rationale | Decision Maker | Date Change | |-------|------- | -------- | -------- | | | | | | | | | | |

Checklist

Toggle Product Checklist

**Project Kickoff & Requirements Gathering** - [ ] Project Kickoff session - [ ] Initiative Scope finalized - [ ] Link Product Brief - [Sprint 0 ](https://docs.google.com/document/d/1WHDJ1iCt9J-acLx8_DSL4tkRKoVYqJGaRUqXuFf7ceg/edit# ) - [ ] Link to Implementation Strategy - Implementation Plan - UAT Plan - Release Plan - Metrics Identified (what metrics are we capturing, how do they tie into stakeholder OKRs, etc) **Pre-Production Readiness** - [ ] Associate Readiness - [ ] Update product guide - [ ] Coordinate with contact center support teams - [ ] What’s New Content - [ ] App Store/In App messaging (if applicable) - [ ] Coordinate with Release coordinator - [ ] App store Content changes required? Y/N - [ ] App store images needed? Y/N - [ ] QA Signed off - [ ] UAT complete - [ ] Obtain Go/No Go decision **Feature Go Live** - [ ] Ensure Waygate/Feature toggle release ticket submitted w/engineering & QA - **Template: Turn on Waygate/Turn off feature flag** - [ ] Coordinate with content & release coordinator if what’s new in app is required

Toggle Team Collaboration Checklist

- [ ] Design Intent & Feasibility discussions - [X] Research needed? No - [ ] UAT Needed? Yes/No - [ ] Ticket creation - [ ] Demo feature (mid check, end of development)

Toggle Design/UX Checklist

- [ ] Review problem/opportunity statement - [ ] Add questions and assumptions to product brief - [ ] Add research links to product brief - [ ] Document high-level research/design plans - [ ] Create lo/hi fi wireframes & user flows if applicable - [ ] Add links to Epic & applicable GitHub folders - [ ] Socialize designs - [ ] Sign off received - [ ] Complete Design QA - [ ] Does it require component review? - [ ] Accessibility review needed?

Toggle Content Checklist

- [ ] Review product brief and surface any questions, assumptions & risks - [ ] Participate in project discovery and kickoff activities/ceremonies - [ ] Complete comparative analysis/content research activities for net-new content - [ ] Review current content and determine where app may need to differ and potential improvements to share with web - [ ] Review past VA research and decisions documentation - [ ] Support Research & UX Design in research sessions and synthesis - [ ] Make content recommendations for lo-/hi-fi wireframes in collaboration with UX Design - [ ] Collaborate with Sitewide Content team for alignment, improvements, and sign-off - [ ] Participate in FE hand off - [ ] Complete content QA - [ ] Write copy for What's New In App - [ ] Write copy for app stores' What's New sections. - [ ] Write copy for updated screenshots in app stores

Toggle Engineering Checklist

- [ ] Are UI designs/ specs available/ready? If yes, they should be attached to attach specs. (We are assuming the design specs have been approved) - [ ] Are there any deadlines that need to be met? - [ ] What is the roll out plan? (Do we need a feature toggle? is this going to be available to every user immediately or do we want to roll out to a few users first) - [ ] Does this project require api integration? if yes, what api endpoint are we integrating with and what is the expected response body? - [ ] Do we want to capture analytics for this projects (i.e. update GA, add logs to grafana/datadog etc)?If yes, what metrics would we like to capture?

Toggle QA Checklist

- [ ] Create test plan - **Template: QA Test Plan** - [ ] Identify test data needs - [ ] Gotten & incorporated test plan review - [ ] QA Complete - [ ] Waygate tasks complete - [ ] Added new feature cases to the RC in TestRail - [ ] Added feature cases to appropriate section of active cases in TestRail - [ ] Spun up a (future) UI automation ticket for new feature

[Sparowhawk]

@kellylein @jessicawoodin @TimRoe @narin with this ticket I think that ReplyMessageButton, StartNewMessageButton should also be considered since they also use VAButton

[brea11y]

We have completed the audit of buttons + links within ticket #6928. A link to the full audit findings can be found in the Google sheet.