Design System (Audit-Logos, Icons, Images)

[jnaito777]

We need to update the Design System to design more efficiently. When I’m designing, I refer to the design system color, font, button, and components. Some of the items are not the latest so I need to back and forth website and design system.

Action Items

• Audit logos, icons, images on Food Oasis website (both food seeker and admin side)
• Document existing logos, icons, images (existing style guide)
• Create written documentation of the audit
• Review with design team
• Remove redundant/out-of-use/non-accessible logos, icons, or images
• Approval by team

Resources/Instructions

This is related to the main issue #1204

Currently, there are 2 versions of the design system.

Design System version 1
https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=0%3A1

Design System version 2
https://www.figma.com/file/D3oq9QOXl0rFkwrEUJbABs/FOLA-Design-System?node-id=0%3A1

Material UI (React library) is used Food Oasis site. This is helpful when we design.
Material UI
https://www.figma.com/community/file/912837788133317724

[staceyrebekahscott]

Updated labels, added to Project Management board, and moved to In Progress column.

[jnaito777]

Material UI icons in use per John:
https://docs.google.com/document/d/1cO8M4PjEEinmgiyqlTAULyxu7m_x80BbT1TVu41oznE/edit

In addition to these, there are a few custom svg files that we use for the Meal Program (fork) icon, Pantry (apple) icon and the Food Oasis logo.

[jnaito777]

Results from preference test

[jnaito777]

Based on the A/B test (above) and review of the design team, we will be using the check marked icons. I have included the SVGs.

For the social media icons, removing the old Facebook and Instagram icons, and replacing it with the new set.
For the you are here icon, removing the old red icon and replacing with Google's "current location" icon/You are here Icon.
For the center yourself icon, removing the cross hairs next to the search button and replacing with Google's "my location" icon/Center yourself icon.

Please let me know if you have any questions. Thank you!

[fancyham]

Rcommendations from this is being incorporated in new design being released in early 2024