hackforla / hackforla/tdm-calculator

Site Audit: Check Login page for visual design consistency

Open
#1,908 3 comments 0 reactions 0 assignees View on GitHub
deck: staging feature: UI Cleanup & Documentation level: medium p-feature: Login Participant type: Admin Participant Type: Security Admin Participant type: User priority: SHOULD HAVE role: ui/ux design size: 3pt
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 6h
Merged PRs (30d)
26

Description

### Overview
Check the TDM Calculator's Login 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 Login 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 Login page](https://tdm-dev.azurewebsites.net/login)
- [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 1908](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit?slide=id.g3163b6ed272_0_95#slide=id.g3163b6ed272_0_95)
- Release Deck
- [YYYY-MM-DD Release Deck, slide 1908]

### Created Issues
- #2044

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.