Iconography: Transfer Over Tokens & Update Guidelines

[qluuu]

Platform Oppia Web | Oppia Android

Describe the request Filling in tokens for Iconography in the design system template. Drawing from the existing Oppia design system files from on-boarding files and Project 2, combine, refine and update Iconography guidelines. This will be used as a starting point to further analyze and solve deeper design system issues.

Context for the request This is a new initiative to update, improve, and maintain Oppia's design system to meet UX designer needs.

What is the broader user journey that this feature fits into? This issue lies in the designer's journey of struggling or wasting time finding the correct asset efficiently.

What is the current user experience like (where is the user located before they encounter this feature)? Feel free to add screenshots. Designer can reference and grab assets from:

• Project 2
• On-boarding Figma Design Guide (Web)
• On-boarding Figma Design Guide (Android)
• Look at the current products (web/mobile)
• Or, grab from other projects that may have a solution.
  • Julia's Project

Update and ensure documentation fits the usecase of select icons.

Link to Oppia Design Systems Template Oppia Design Systems Figma File

Information about deadlines/priorities This can be tackled at the usual priority.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• [ ] UX Design approved (Android mocks should include dark mode)
• [ ] UX Writing approved
• [ ] Design Systems Team approved
• [ ] Product approved

For a design project to be completed, it needs approval from UXD, UXW, DS and PM. Please tag the following reviewers when your project is ready (at least one reviewer for each of the 4 bullet points below):

• UXD: N/A (for design style guide projects)
• UXW: @stepmalt
• Design systems: @qluuu / @celestinetales
• PM: @seanlip

[tydesignit]

Completed moving previous icon/iconography assets from previous design systems/onboarding.

[tydesignit]

Will ask for feedback on how to iterate on this page. Added a milestone to continue cross-referencing with previous projects to ensure validity and efficacy.

• Efficacy in this context means, whether the iconography could improve from more dynamic icons. For example, the icons are tied to components that save designers time.

[qluuu]

Deassigned Tyler since he is not working on this. Assigning this project to @S4v8n , who will be taking over this project.