About / Comparative Analysis / Organization Detail Page UI/UX Liz

ag2463 commented 12 months ago

Overview

This (template) page provides provides information about each of the organizations in the comparative analysis, including what resources are available on their sites.

Latest Design

Figma Link

Resources

Comparative Analysis Results Spreadsheet

ermbrown commented 9 months ago

8/15 Notes

Resources/Instructions:

Presented Type & Length, Overview, & Shareability templates
Continue to work on wiki icon
Need to consider different sizes of the icons
Create more mockups with general devices; not high-end devices
Keep star and warning icons next to desciptions
Redesign chips using material designs
Material
Keep Shareability 7 design

Action Items:

[x] Type & Length: Update wiki logo
[x] Overview: Additional mockups
[x] Shareability: Use chips in designs

ermbrown commented 8 months ago

8/22 Notes

Resources/Instructions:

Presented Type & Length, Overview, & Shareability templates
Continue to work on presentation of document files
Use the graphics discussed as an example; EX Person holding files
Continue to look at other icons for file types on the summary page
Need to consider accessibility when selecting colors of the chips
Need more extensive user testing in the future

Action Items:

[x] Locate file types within our Figma pages
[x] Shareability: Find graphics to place the file types

ermbrown commented 8 months ago

8/29 Notes

Resources/Instructions:

Presented Type & Length & Shareability templates
Graphics with the people selecting boxes with file types better than the puzzle images
Continue to Look for additional graphics for the Shareability section
Continue to look at other icons for file types on the summary page
Search icon libraries: material icons, font awesome, auto icon
Create a list of icons
Continue to work on other sections on the Comparative Analysis page: Overviews and Outside Resource Links

Action Items:

[x] Find additional graphics for the Shareability section
[x] Shareability: Find graphics to place the file types
[x] Select and share icons from several libraries
[x] Create a list of icons
[x] Create mockups of the Overviews and Outside Resource Links sections

ermbrown commented 8 months ago

9/12 Notes

Resources/Instructions:

Presented Type & Length, Easy to Follow, Outside Resource Links, & Shareability templates
Type & Length: could gray out or add check mark to identify use of file type
Icon library data: use excel to chart icon libraries
Use Easy to Follow 2 & 3
Use Easy to Follow : possibility of graying out the X and using color for the check mark
Continue to work on Shareability section
Outside Resource Links: update graphic, find images that show outside links

Action Items:

[x] Icon libraries: use excel to chart icons in libararies
[x] Shareability: continue to work on section.
[x] Outside Resource Links: update graphic
[x] Start History and Status section

ermbrown commented 8 months ago

9/19 Notes

Resources/Instructions:

Presented Type & Length, Easy to Follow, Outside Resource Links, & Shareability templates
Presented Icon List, History & Status, Easy to Follow, Outside Resource Links, & Shareability templates
Icon library: Selected Auto Fonts
Shareability: 3 different options, work on alignment
Outside Resource Links: add correct icon to image; use screenshot as example
History & Status: choose 2nd option, revise image, image very similar to other section
Chips: continuous updates (green), 1+ (yellow), longer than 1 year 1+ 2+ 3+ (red)

Action Items:

[x] Outside Resource Links: add correct icon to image; use screenshot as example
[x] Shareability: update image options and alignment
[x] History & Status: create chips
[x] Templates & Case Studies

ermbrown commented 7 months ago

9/27 Notes

Resources/Instructions:

Images are too busy; continue to work on designs keeping the design systems in mind
Outside Resource Link: too busy; try with just the external link
The excel document wording for 39F needs revised
Chips: need to update wording and add italicized line below
Case Studies: add image of person making a presentation
Case Studies: change title to Case Study
History & Status: use excel data to show multiple examples of the timeline
History & Status: use the timeline from example 2 & 3

Action Items:

[x] Need to review design systems
[x] Meet with Trina to discuss design systems
[x] Outside Resource Link: update image
[x] Chips: update wording and add italicized line below
[x] Case Study: update title & image
[x] History & Status: use the timeline from example 2 & 3
[x] History & Status: use excel data to show multiple examples of the timeline

ermbrown commented 7 months ago

10/3 Notes

Resources/Instructions:

Shared and discussed the design systems: images, font awesome icons, flaticon icons
Images: pikisuperstar and freepik
Will continue to define the elements of the design systems and add them to our Figma page
Credits: link, artist, title, location where image is used
Compilation credits: https://github.com/hackforla/website/issues/4607
History & Status: update image
Finalize pages: Type & Length, Shareability, Outside Resource Links, and Case Studies
Credits for images and icons within all sections
History & Status: update image
Finalize pages: Type & Length, Shareability, Outside Resource Links, and Case Studies

Action Items:

[x] History & Status: update image
[x] Sections: Type & Length, Shareability, Outside Resource Links, and Case Studies
[x] Credits for images and icons
[x] Excel document using the images
[x] Credits for compilation images

ermbrown commented 7 months ago

10/10 Notes

Resources/Instructions:

Shared and discussed the design systems: images and icons
Type & Length: add icons from Evan's pages to image
History & Status: Continue to work on finalizing images
Work with design team to finalize images

Action Items:

[x] Type & Length: update image with icons from Evan's pages
[x] History & Status: continue to work on finalizing images
[x] Work with design team to finalize images
[x] Update spreadsheets for original and composite images

ermbrown commented 6 months ago

10/17 Notes

Resources/Instructions:

Type & Length 2 is better
PDF: replace lines with block that says PDF
Document Icon: 1 or 2 as base; modify to fit other document types
User Testing: Use icons in future user testing.
Questions: What image would represent ‘resource not update’? Ask without providing icons. If needed, show icons and ask which one would fit the right information.
Continue to update images, icons, and composite images

Action Items:

[x] Type & Length: update image/icon
[x] Document icons: PDF, Last Updated 3+
[x] Design Systems: Continue to update images, icons, and composite images

ermbrown commented 6 months ago

10/24 Notes

Resources/Instructions:

Discussed and shared icons
Last updated: use the clock without lines; try different variations 2/3
Decide on width for design systems

Action Items:

[ ] Iterate on the “last updated” icon
[ ] Decide on width for design systems

ermbrown commented 2 months ago

Issue complete. We may need to update the pages once the design system is in place, but it's good for now.

hackforla / BOP