Improving visuals and language on LP: Letter examples, LG sneakpeak, Making letter writing, and how it works sections

[anitadesigns]

Overview

A few participants in an internal usability test for the landing page and feedback from Bonnie found that the images were difficult to read or contained redundant information.

Letter Generator Image:

• All three images of the letter examples shared that they were all veterans
• Some of the text in the letter was black and the rest was purple.
• There were concerns that these were real letters that were being shared

These images need to be fixed on the wireframes and handed over to Dev for updates.

Letter Generator Sneak Peak image:

• Image was too blurry to see
  

Letter Generator Making letter writing less intimidating/How it works sections

• "Targeted question prompts" and "question prompts" was confusing language. Replace with plain language, keep consistent throughout.

Action Items

Letter Generator Image:

• Remove sentence about being an US Veteran from 2 out of the 3 letters
• Replace names with Jane Doe or John Doe
• Change the font color to the text on the letter to "black"
• Updates these changes in the mobile and desktop wireframes in the master section on Figma
• Hand over to Dev

Letter Generator Sneak Peak image:

• Reach out to Dev and see what is needed to improve picture quality

Letter Generator Making letter writing less intimidating/How it works sections

• "Targeted question prompts" and "question prompts" was confusing language. Replace with plain language, keep consistent throughout.

Resources/Instructions

You can find these images on the LP wireframes under the Master section in Figma

• Desktop
• Mobile

[sydneywalcoff]

Hi Design!

I dug into the site and found the issues with both images.

For the letter generator example, the issue is actually that it's a screen shot lol. If ya'll rebuild it, it would be much clearer.

For the letter examples, the rendered size (the size it's displayed on the screen) for desktop sizes is larger than the intrinsic size of the image. Basically, we are stretching the image so it gets a little blurry.

[emmathrash]

Update: Content has updated letters to all be different from one another. Design used SVG for mobile version from original desktop image, updated font color to black and inserted new content into letters. Content updated "targeted question prompts" into simpler statement. Ready to be peer reviewed.

[anitadesigns]

@emmathrash @ermbrown safe to say that we can close this issue? looks like it was handed over to Dev