bcgov / bcgov/SIMS

All users and pages: UI page review for BC Gov style standard and other recommendations

Open
#3,483 0 comments 0 reactions 0 assignees View on GitHub
Business Task Usability
Dominant language
TypeScript
Stars
29
Forks
15
PR merge metrics
No merged PRs in 30d

Description

**Describe the task**
Create page by page checklist to review for BC gov style and breadcrumbs at the top of the page

**Acceptance Criteria**
This is only a cross sample

- [ ] Alignment
- Text

- [ ] Asterisk (use of, placement)

- [ ] Badge status

- colours

- [ ] Border colours
- [ ] Button

- alignment
- colour
- labels
- rollover
- red asterisks
- style

- [ ] Colours

- [ ] Field height
- [ ] Fonts
- including bold

- [ ] Headings match size and style
- [ ] Subheadings
- [ ] Icons
- [ ] Labels
- [ ] Line height
- [ ] Links, colours

- Sort feature

- [ ] Menus
- [ ] Padding
- [ ] Page layout (e.g. Student > Student Details)
- [ ] Radius (corners)
- [ ] Size
- [ ] Type Scales

**Additional context**
GDX Discovery Feedback Figma

Alignment
Dates to be on 2 lines
Note: Bottom 2 samples are displaying various browser window sizes and the date sizing will change.

image.png

Asterisk
image.png

Asterisk and clear button
image.png

Badge status
Different colours needed for different badge status

image.png

Note: In Progress, Assessment and Enrolment all have the same colour
image.png

Border: Header bottom
image.png

Border (File uploader)
image.png

Button alignment

image.png

Button and text alignment
image.png

Button labels
image.png

Button position: Changes location on the page (e.g. center, far right)
image.png

Button style
image.png

Button style 2 (Note the shape, colour etc. )
image.png

Colour: Tracker your application progress line
image.png

Heading and link colour: Welcome to StudentAid BC (re:

image.png

Heading link colour and font
image.png

image.png

image.png

Headings and subheadings to review
image.png

Headings to be more explanative (clearer terminology) and review the style of the headings

image.png

Headings to review
image.png

Headings to match style

image.png

Headings: Table
image.png

Headings: Table (another sample): See "Loan/grant type" and "Estimated award"
image.png

Header
image.png

Header

image.png

Header
image.png

Icons
image.png

Add SABC icon to show that the file is coming from SABC
image.png

Inconsistent icons
image.png

Labels
image.png

Labels: Changed or missing
image.png

Line height, padding, button roll over
image.png

image.png

image.png

Links
image.png

Link placement
image.png

Sort feature
image.png

More fonts and padding
image.png

Menus
image.png

Padding
image.png

image.png

image.png

Page layout

image.png

Page layout: More feedback

image.png

Page layout: Child page
image.png

Page layout: Support for above
image.png

Remove red asterisk on Delete buttons

image.png

Radius
image.png

Scale: And colour for currency.
image.png

Size
image.png

Type scales
image.png

FYI, Astrid still writing this one.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the issue body and the GDX Discovery Feedback Figma, then define the page sample and review checklist scope before inspecting the listed UI concerns. Done means a complete page-by-page checklist covering the stated alignment, typography, controls, colours, layout, navigation, and icon recommendations.

Written by the indexing model from the issue text.

Assessment

Domain
design, documentation, frontend
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.