Design: Increase legibility of infobox text for "Your project level is 0!" page

[thetanmancan]

Dependency

• Design a Project Level 0 modal #2069

Overview

The text of the infobox on the "Your project level is 0!" page is hard to read. Redesign the text and background so that the infobox is more legible.

Details

Current infobox text

There are two obvious legibility issues.

1. There is too little contrast between the text and the background color. (Fails WCAG contrast requirements)
2. The text is too small.

These issues should be resolved while maintaining consistency with the style guide. If there is time, other opportunities to increase legibility should be researched and implemented.

Action Items

• Research legibility guidelines.
• Create a Figma prototype that reconciles proposed legibility solutions with the style guide.
• Present prototype to Design team and iterate based on feedback if needed.
• Review with Product, Dev and Research and iterate based on feedback if needed.
• Once finalized, add Before and After images to the staging deck on this slide.
• Get Stakeholder sign-off.
• Write developer handoff issue.
• Update the Style Guide Presentation with the changes from this issue.
• Update the Figma design system.

Resources

• Link to TDM Calculator Dev site
• Steps to replicate the warning infobox on the website
  • Navigate to TDM Calculator "Create Project" page.
  • Fill in the required fields on page 1 (Project Name, Address, AIN/APN).
  • Navigate to the next page using the navigation button on the bottom.
  • Without filling any details on page 2, navigate to the next page using the navigation buttons.
  • You'll see the "Project level 0" warning on the page.
• Link to style guide presentation
• Figma page with the current designs for infoboxes
• Visual design rules that can help with increasing legibility

Development Issue

• Implement new "Your project level is 0" infobox #2059

[mjldesign]

When navigating to the indicated page, I am not seeing the issue of contrast/legibility. Here is what is currently showing on the dev site:

• Can you clarify what needs to be changed, specifically when it comes to contrast/legibility?
• Since this issue was created over a month ago, has this already been addressed or fixed?

[thetanmancan]

@mjldesign Admittedly, I've been out of the loop for the last two weeks, so I'm not caught up on what's been going on. That being said, I do recall during one of our meetings after I was asked to write this issue that Bonnie asked John to make some temporary changes on the dev site related to this issue. I think it was because the production site and the dev site had the same content and they didn't want the ugly, unreadable version of this infobox being seen or used by clients.

tl;dr What you're seeing on the dev site is a temporary solution and we still need a final design for the developers to implement.

Feel free to correct me if I'm wrong about any of this, @NilakshiS

[mjldesign]

Created two options to solve legibility for this page.

Option 1:

• Header 4 text style
• Error text text color
• Error background rectangle behind text

Option 2:

• Header 4 text style
• Black text color
• Error background rectangle behind text

[NilakshiS]

From team meeting on 2024-12-11:

• Option 1 is not viable, because it still fails the contrast requirements
• Option 2 was discussed, team suggested some improvements such as changing the image to a warning icon. Launch icon for external links needs to be added to the link.

[thetanmancan]

Hi @mjldesign. Just wanted to check in and see if you've had any updates on this.

[thetanmancan]

Hey @mjldesign. I hope you had a nice winter vacation. Since we're back in action as of this week, please provide an update for this issue using the following format by Tuesday night. Thank you!

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[mjldesign]

1. Progress:

• Updated designs based on previous meeting feedback.
• Replaced image with warning icon (both triangle and circle).
• Proposed two options for header color.
• Tidied up text layout and spacing.
• Awaiting feedback to proceed with any further changes.

2. Blockers:

• No difficulties or errors currently encountered.

3. Availability:

• I have the availability to implement any changes/updates based on feedback within 3 days.

4. ETA:

• Issue can be completed once designs have been approved. I don't foresee any additional time necessary.

5. Current Updates

• Black header, both circle and triangle warning icon options:
  
• Red header, both circle and triangle warning icon options:
  

[thetanmancan]

@mjldesign Here is some feedback from the design team's 2025-1-08 meeting.

• The design with the triangle warning icon got the most votes because it conveys the importance of what is being warned and is consistent with the warnings we have in our system.
• The design with black header was chosen because it's consistent with the design used in modals and is harder to read when it's in red.
• I noticed in the Figma files that the font being used isn't Calibri. Please make sure your final design uses Calibri in all the fonts.
• Please remove the "Page 3/5" text and right arrow button at the bottom because the user no longer has the ability to move forward in the application process once they navigate this page.
• Please remove the exclamation point in the title since punctuation is not used in page titles in our system with the exception of question marks.
• The red background color of the text still makes it a bit hard to read. For another issue, Design System: Differentiating Tooltips from Popovers #1916 , Grace had proposed using a lighter shade of red for the warning tooltip she was designing, #FFEDEA. I'm going to run that shade of red by the team leads at Wednesday's meeting. If they approve it, we will use that as the new red background color in our design system that you can apply for this page.

I have a rough mockup of what we're looking at with the above applied changes.

Level 0 mockup

I threw in a disabled "Save Project" button on the mockup for the sake of visual balance, but I'm not certain if that's the right way to go. Feel free to update with any further design options you might have and we'll go over this on our 2025-01-15 meeting. Thanks.

[mjldesign]

1. Progress:

• Updated designs based on previous meeting feedback.
• Changed font to Calibri
• Changed red background box to #FFEDEA
• Removed right nav arrow + "Page 3/5"; added "Start Over" button
• Awaiting feedback to proceed with any further changes.

2. Blockers:

No difficulties or errors currently encountered.

3. Availability:

I have the availability to implement any changes/updates based on feedback within 3 days.

4. ETA:

Issue can be completed once designs have been approved. I don't foresee any additional time necessary.

5. Current Updates

Mockup

[ExperimentsInHonesty]

I agree this will probably be fine unbolded. Please add to deck

[thetanmancan]

This is the final design to be presented to stakeholders at today's meeting.

Final "Your project level is 0" infobox design

This design can be found in the "Final Design" section of this Figma page.

[thetanmancan]

@mjldesign, please update the Style Guide Presentation and Figma design system with the changes from this story. I will close this issue once you've completed these tasks. Thank you.

[thetanmancan]

@mjldesign: Production wanted to discuss the Start Over button at today's meeting, so let's hold off on updating the presentation or design system until after then. Thanks.

[thetanmancan]

@mjldesign, I'm going to unassign you and move this issue to the ice box until we get an answer back from stakeholders from #2069 about how they want to go about potentially changing this page to a modal.