Research new visual style

[anitadesigns]

Overview

The Design team is working on improving our visual styles, which include the color system, typography, icons, and illustrations. We assessed our visual styles and adjusted it to address 1) accessibility 2) appropriateness for our users 3) complimentary to our voice. With the adjustment, the design would like to test the new changes.

Please consider previous testing which addressed:

• IUT 1: Illustrations were not age inclusive
• IUT 2: Colors (slide 10-12)

Action Items

COLOR and TYPOGRAPHY

• Develop a research plan for color and typography
• Conduct generative research with findings and recommendations by @saraisabelcf
• Analyze
• Share with team - shared at UXR meeting and All Teams in April 2024

Resources/ Notes

IUT 2 Results (slides 10-12)

Main Issue: #1226

• Standardize color system and Usage #1228
• [Design System] Adjust and Finalize Typography  #983

[sylvia-nam]

Content finished its Voice and Tone exercise and landed on these three terms which it shared during the collab meeting on 3/15/24, see: #618 (comment)

VOICE and TONE

1. Supportive - warmth and intention (vs empowering and helpful), supportive helps them grow which is empowering, like teacher or mentor rooting you on
2. Straightforward - less technical language is more approachable, good for UX writing in general, ease of use, accessibility - for reading levels of users, and ESL, telling the user what they need to know without burdening them
3. Trustworthy - (vs secure, which lacked warmth), applies to both site and process, has warmth, reliable

[github-actions]

Hey @saraisabelcf! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[saraisabelcf]

Conducted desk research on color theory and typography (see issue #1263) and found that color blue and sans serif fonts enhance user trust and accessibility on websites. Will present findings at the all teams meeting on Friday 04/05/24.

[saraisabelcf]

Link to the slide deck:

https://docs.google.com/presentation/d/1NtmEOO7AbcHypaEkxXqvOrUYfisrkE3ly2-Js-J8G38/edit?usp=sharing

[github-actions]

Hey @saraisabelcf! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[github-actions]

Hey @saraisabelcf! Thanks again for taking this issue.

Time for an update! Please comment the following update:
**Progress:** What's the status of the project? What have you done and what still needs to be done?
**Estimated Time to Completion (ETC):** When do you estimate to be finished?
**Blockers:** Anything preventing you from finishing?

Thanks again!

[anitadesigns]

Hey @saraisabelcf and @sylvia-nam ! I came across this issue and noticed that action items were added to this for illustrations and icons. Would you mind clarifying that a bit more? Is it to conduct background research on illustrations and icons or test our current illustrations and icons? Would love to know more so I can provide more info on what Design has been working on in terms of illustrations/icons and our goals for our visual style!

[sylvia-nam]

1. Updated the link to Sara's slide deck in original issue.
2. Sara's research write-up here.

[sylvia-nam]

@anitadesigns -- this is a good reminder for me to add a comment with explanation or justification when revising, amending, adding to the original issue.

From my recollection (it's been a while and the revision history says that I made the changes in mid-March, so I will need to wait for Sara to chime in): the revisions were a way to break out the research tasks based on @saraisabelcf's findings and related conversations between UXR, Design during meetings. The original issue addressed all 4 (color, typography, illustrations, icons) but the task items only addressed the first 2, so broke out the other 2 into identical (but separate) tasks.

Feel free to amend with a note to Sara on if: 1) this research is still part of the request, 2) if yes, updates from Design, 3) if no, then close?

[anitadesigns]

@sylvia-nam thanks for clarifying this! I did some more memory digging on my side of things and realized I created this issue for UXR to test all visual style updates design implements as we work on our Design system.; however, what we may overlooked was updating/or closing this issue as our approach changed. Instead of testing ALL visual elements (color system, typography, icons, illustrations) at once, we have started to lean toward breaking down the testing. For example, as of recent, we have been focusing on the color system and created #1226 (main issue for color system) which included UXR's tasks #1263 and #1341. Both of which are also reflected in this issue's action items.

Considering that Design still wishes to test the rest of our visual style elements (icons, illustrations, typography) and that we don't quite have an issue created for that, I'm thinking we can amend this issue to be UXR's based issue to test those elements once Design completes those adjustments. Let me know what you think! I'm also happy to share more about Design's work and plan on our Design system.

If it helps, we have an Epic for our design system that is still being built out, but can give somewhat of an idea of all the different elements Design has been working on when we have had down time #750

[sylvia-nam]

@anitadesigns thanks for this! One thing that I am not clear on is if you still want UX research on illustrations? Or are you saying that Design will keep the illustrations as is, and is requesting UXR testing only?

[anitadesigns]

@anitadesigns thanks for this! One thing that I am not clear on is if you still want UX research on illustrations. Or are you saying that Design will keep the illustrations as is, and is requesting UXR testing only?

@sylvia-nam the latter! Design will keep the current illustration style but they need testing to ensure they are age-inclusive, match the content of their respective page, and align with our tone and voice. Before we move on to testing, however, there is one illustration the Design Team is updating (#1192)to match the same illustration style as the rest of the illustrations on our site. This is also the same for some of the icons we have as well: #1191 . Therefore, there would be a dependency before UXR can test the illustrations and icons.

That being said, UXR can decide the best approach to testing the rest of the visual elements on our site. Would UXR like to group them into one set of tests or break them into separate rounds of testing?

[sylvia-nam]

1. Reference this issue for testing of visual style: Test the new color system #1341
2. Removed action items from main issue on researching illustrations and icons

[sylvia-nam]

@anitadesigns same message as the other -- my understanding is that the dependency is inverted here and that the relationship of the dependency is in the other direction. This issue is done and so feeds into the progress #1228 and #983.