bcgov / bcgov/lcfs

LCFS - Login Page Design and Content Refresh

Closed
#4,901 1 comment 0 reactions 1 assignee Claimed by @prv-proton View on GitHub
DEMO THIS Further Investigation Medium Task UX
Dominant language
Python
Stars
6
Forks
6
Avg merge
2d 7h
Merged PRs (30d)
87

Description

**Describe the task**
Review and update the public LCFS login page design, content, accessibility, and associated public information sections. The page requires visual refinements to improve readability and contrast while incorporating updated business-approved wording and validating all public tools, legislation, and program links.

-Add gradient as discussed.

**Purpose**
Improve the user experience and accessibility of the public entry point to the LCFS portal while ensuring content accurately reflects current program messaging, provides access to public tools and resources, and meets business requirements.

**Wireframe**

[Login Page Design and Content Refresh](https://www.figma.com/proto/XnQiF80Z26qi84WmTmbsGz/4091-LCFS---Login-Page-Design-and-Content-Refresh?node-id=1-2&p=f&t=qm0Jom7UCB1azQ81-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1)

**Acceptance Criteria**
- [ ] Updated business-area approved wording has been incorporated into the login page design
- [ ] Colour contrast issues have been identified and corrected to meet WCAG 2.2 accessibility requirements
- [ ] The login page design has been reviewed and refined to improve readability and visual hierarchy
- [ ] Existing BCeID and IDIR login functionality remains unchanged
- [ ] The Public Tools section has been reviewed and updated as required
- [ ] All public tool links are present, functional, and direct users to the correct destination
- [ ] The Legislation and Requirements section has been reviewed and updated as required
- [ ] All legislation, program requirement, and public information links are present, functional, and direct users to the correct destination
- [ ] The Credit Market Snapshot component remains visually aligned with the updated page design
- [ ] Updated design is responsive and functions correctly across supported browsers and devices

**Additional context**
- Review all text overlay areas, buttons, statistics, informational content, and public resource sections for accessibility compliance.
- Validate the following public-facing sections:
- Public Tools
- Compliance Unit Calculator
- Calculation Data
- Approved Carbon Intensities
- Release Notes
- Renewable and Low Carbon Fuels Program links
- Program Requirements links
- Review all external and internal page links for accuracy.
- Validate keyboard navigation, focus states, colour contrast, and overall WCAG 2.2 compliance.
- Test across supported browsers and devices.

Business area refinements needed:

1) Change "LCFS Program Information" at the top of the page to "LCFS At a Glance"
Image

2) Change paragraph "British Columbia's Low Carbon Fuel Standard reduces the carbon intensity of transportation fuels supplied in the province, lowering greenhouse gas emissions and supporting cleaner, lower-carbon alternatives." to "British Columbia’s Low Carbon Fuel Standard reduces the carbon intensity of transportation fuels supplied in the province, lowering greenhouse gas emissions and supporting economic growth by creating opportunities for BC businesses that produce and supply renewable and low-carbon energy."

Image

3) Change "Outstanding credits" to show a tally of all time generated credits:

Image

4) Change the "About the Low Carbon Fuel Standard" text box to this wording: " The Low Carbon Fuels Act and its two regulations form British Columbia's Low Carbon Fuel Standard (LCFS), which sets requirements that encourage the use of renewable and low carbon fuels. The LCFS offers incentives to organizations based on the amounts of greenhouse gas emissions avoided in comparison to conventional fossil-derived fuels."

Image

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.