hackforla / hackforla/tdm-calculator

Site Audit: Check Forgot Password page for visual design consistency

Open
#2,033 0 comments 0 reactions 0 assignees View on GitHub
deck: staging level: medium p-feature: Forgot Password Participant type: Admin Participant type: User priority: SHOULD HAVE role: ui/ux design size: 3pt
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Overview
Check the TDM Calculator's Forgot Password page for consistency with the design system.

### Details
Some of the implementation of the TDM site does not follow the style guide. We need to conduct an audit of every design aspect of every element on every page in order to ensure the design standards we have established are being followed everywhere on the site. Please use the aspects listed in the Properties section below as a checklist to check the Forgot Password page, also known as the Send Password Recovery Email page.

### Properties
Document the values of these properties using the Figma template listed in the Resources section below. Please also check for other properties or functionalities that aren't explicitly listed here that may occur to you while performing this audit.

- [ ] Color
Check for adherence to color palette.
Example: Using the Critical color on a Primary button.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

- [ ] Typography
Check for correct size and other font attributes.
Example: Using the Header 4 style on paragraph text.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

- [ ] Shadows
Check for correct blur, spread, color and opacity.
Example: Elements that shouldn't have drop shadow but have them.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

- [ ] Sizes
The current style guide does specify any size guidelines except for buttons. Please make sure the buttons follow the size guidelines. For the rest of the elements, note the width and height.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

- [ ] Spacing
The current style guide does specify any spacing guidelines except for buttons. Please make sure the buttons follow the spacing guidelines. For the rest of the elements, note the margins and padding.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

- [ ] Border
Check for correct stroke width, color and other attributes.
Example: Buttons that shouldn't use borders but have them.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

- [ ] Corner Radius
Check for correct radius attributes.
Example: Corner radius is only applied to two corners when it should be applied to four.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

- [ ] Icons & Images
Check for correct icon and image use.
List of Elements

- [ ] Heading and Paragraph Texts
- [ ] Buttons
- [ ] Input and Fields
- [ ] Accordions
- [ ] Tooltips
- [ ] Infoboxes
- [ ] Links
- [ ] Any Remaining Page/Content Text or Backgrounds

### Action Items
- [ ] Perform audit. Enter design issues or bugs as necessary and list them in the Created Issues section below.
- [ ] Review with the design team. Update if needed based on feedback.
- [ ] Review with product and dev. Update if needed based on feedback.
- [ ] Once finalized, add a slide on [the staging deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg).
- [ ] Get Stakeholder sign-off via the stakeholder meeting slide deck.

### Resources
- [TDM Calculator dev site Forgot Password page](https://tdm-dev.azurewebsites.net/forgotpassword)
- [Template for site audit on Figma](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=4472-16921&node-type=canvas&t=NguUgNljY5ekKthK-0)
- [Style Guide Presentation](https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/edit#slide=id.g2a6d1bfeb46_0_103)
- [Design System on Figma](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=0-1&t=W6TPfPgXZGyIfTkR-1)
- [Annotated Figma file from previous site audit](https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=8710%3A19764&t=eNG5rGUzIyucDpRs-1)

#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- [Staging Deck, slide 2033](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?pli=1#slide=id.g328276ff956_0_18)
- Release Deck
- [YYYY-MM-DD Release Deck, slide 2033]

### Created Issues
- #2047

Contributor guide

Open the contributing guide

Research direction

Start with the TDM Calculator dev site's Forgot Password page, then compare it against the Figma site-audit template, design system, and style guide using the listed properties. Document the findings, create or update design issues such as #2047, obtain the listed design, product, development, and stakeholder reviews, and update slide 2033 when finalized.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.