Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

Create a list of icons in need of reworking or adding post-project #579

Open
jimmynotjim opened this issue Jan 22, 2018 · 13 comments
Open

Comments

@jimmynotjim
Copy link
Contributor

Document the work we had to set aside for this project that can be tackled by us or the next team that picks this up.

@designlanguage
Copy link
Member

designlanguage commented Jan 24, 2018

Name Symbol In circle Notes
Debt screen shot 2018-01-22 at 6 02 38 pm screen shot 2018-01-22 at 6 02 44 pm This will need a new concept after MVP is complete.
Mortgage screen shot 2018-01-22 at 6 02 51 pm screen shot 2018-01-22 at 6 02 56 pm We should avoid using text if possible, but this concept needs it. We'll revisit this after MVP.
Share screen shot 2018-01-23 at 1 40 23 pm screen shot 2018-01-23 at 1 40 28 pm Create a more universal share symbol.

@Scotchester
Copy link
Contributor

To clarify what I said in our meeting this morning: I don't think there is a more universal sharing symbol, unfortunately. I would just look to add the Apple style as an alternate version.

@designlanguage
Copy link
Member

designlanguage commented Feb 14, 2018

@Dnpizarro and I have come up with some alternatives to a couple minicons, and we want to see if these will work for folks, or if there are reasons for keeping the existing ones.

Name Current symbol Proposed replacement Notes
Mortgage screen shot 2018-02-14 at 11 35 09 am screen shot 2018-02-14 at 11 33 46 am We're trying to remove text from our icons. Is a sold sign a good indication of a mortgage? Should it be a document with a house instead?
Prepaid card screen shot 2018-02-14 at 11 34 53 am screen shot 2018-02-14 at 11 34 42 am Trying to resemble the actual object rather than show the concept of it.
Filter None screen shot 2018-02-14 at 11 47 11 am Some have asked for a filter icon. Would this one work for most people?

@Scotchester
Copy link
Contributor

  • Love the house with the icon.
  • My initial thought about the prepaid card icon was "Why does it have a cloud over it?" :) But then Jimmy explained it to me.
  • What would you think about putting the third slider of the filter icon in a slightly different position from the top slider? Perhaps right in the middle? That might collide with the middle slider, though.

@nataliafitzgerald
Copy link
Contributor

nataliafitzgerald commented Feb 14, 2018

@designlanguage @Dnpizarro

  • I also prefer the house with the icon to the sold sign. Definitely speaks more to a mortgage. Is the document a little on the tall side though?
  • I too saw the cloud on the prepaid card. In looking at some photos of prepaid cards the top loop is a lot less wide than the larger loop. So maybe that could be adjusted? Or do we even need the top loop? Would it still look like a hang tag without it?
  • I think I'd have to see the filter icon in context. Where do you think it will live? Would it work with just 2 rows, rather than 3 (or did you do 3 to make it fill more of a square area)?

@caheberer
Copy link
Member

  • What if we tried a version with the house in the for sale sign? I understand that is less representative of the mortgage itself, but we have a lot of minicons involving pieces of paper with something in them, but maybe that's not a bad thing? Just letting ya know my first thoughts.

  • I agree with @nataliafitzgerald I think the "cloud" could lose the top portion and still read as a tag.

  • I'm on the same page with @nataliafitzgerald and seeing the use in context might be helpful. The filter looks pretty different in scale than the other icons, but once again I don't know if that's a bad thing.

@designlanguage
Copy link
Member

designlanguage commented Feb 22, 2018

Here are other new icons, along with revisions to old ones, grouped by their category. Would appreciate feedback on these. @caheberer - There are two types/scales of icons mentioned in the documentation. The larger-scale ones tend to be navigational elements.

Name (Category) Old / New Notes
upDown (Navigation) screen shot 2018-02-22 at 1 50 16 pm Used in the Auto loan worksheet representing negotiation.
leftRight (Navigation) screen shot 2018-02-22 at 1 50 20 pm
dollar (Status) screen shot 2018-02-22 at 2 01 50 pm Changed the dollar symbol to curve less at the ends. This helps it render better at smaller sizes.
error (Status) screen shot 2018-02-22 at 2 01 18 pm Changed the variable stroke weight to a consistent one to match the other symbols.
power (Status) screen shot 2018-02-22 at 1 52 22 pm From YMYG booklets.
email (Communication) screen shot 2018-02-22 at 2 02 39 pm Wider icon.
mail (Communication) screen shot 2018-02-22 at 2 02 47 pm "
fax (Communication) screen shot 2018-02-22 at 2 03 12 pm We aim to keep all icons solid black except for items that are paper or screens, so the handset changed color here.
presentation (Communication) screen shot 2018-02-22 at 1 53 18 pm Requested here for use in Word reports.
photo (Communication) screen shot 2018-02-22 at 1 53 23 pm
video (Communication) screen shot 2018-02-22 at 1 53 28 pm Requested here and approved. Used for field hearings.
book (Communication) screen shot 2018-02-22 at 1 53 33 pm Currently used in MAYG
PDF (Document) screen shot 2018-02-22 at 1 54 28 pm We sought to remove text from icons, so the document symbol can be used instead.
folder (Document) screen shot 2018-02-22 at 1 55 35 pm Requested here.
folderEmpty (Document) screen shot 2018-02-22 at 1 55 39 pm "
folderSave (Document) screen shot 2018-02-22 at 1 55 44 pm "
folderAdd (Document) screen shot 2018-02-22 at 1 55 48 pm "
folderDelete (Document) screen shot 2018-02-22 at 1 55 54 pm "
activity (Document) screen shot 2018-02-22 at 1 55 58 pm Modified from a request here.
appendix (Document) screen shot 2018-02-22 at 2 03 34 pm The extra box behind the original sheet wasn't helping convey meaning.
supplement (Document) screen shot 2018-02-22 at 2 03 38 pm "
money (Financial Products) screen shot 2018-02-22 at 2 04 29 pm Added a circle to the bill to help recognition.
prepaidCard (Financial Products) screen shot 2018-02-22 at 2 04 42 pm Kept the circle and it doesn't look like a cloud anymore.
creditPayment (Financial Products) screen shot 2018-02-22 at 2 04 48 pm The old prepaidCard symbol was sometimes used for different meanings, so maybe we should keep it.
creditRepair (Financial Products) screen shot 2018-02-22 at 2 04 54 pm Not sure if this is in an existing project. Thoughts @Dnpizarro?
paydayLoan (Financial Products) screen shot 2018-02-22 at 2 05 03 pm Paper changes to white, stopwatch to black (and position flipped to take up less real estate).
quickCash (Financial Products) screen shot 2018-02-22 at 2 05 14 pm Changed the icon to black.
mortgage (Financial Products) screen shot 2018-02-22 at 2 05 30 pm Tried a house on the sign, but it reads more as a "for sale" sign, less as mortgage.
foreclosure (Financial Products) screen shot 2018-02-22 at 2 05 36 pm Requested in the Iconathon.
college (Financial Products) screen shot 2018-02-22 at 2 05 41 pm
retirement (Financial Products) screen shot 2018-02-22 at 2 05 47 pm Replaced text with the dollar sign.
insurance (Financial Products) screen shot 2018-02-22 at 2 05 59 pm From YMYG.
HealthInsurance (Financial Products) screen shot 2018-02-22 at 2 06 04 pm From YMYG.
shareAlt (Web) screen shot 2018-02-22 at 2 06 22 pm Alternate share icon mentioned by @Scotchester
audioMute (Web) screen shot 2018-02-22 at 2 06 36 pm An "X" added after the speaker.
history (Web) screen shot 2018-02-22 at 2 07 05 pm The old history icon looks like the paydayLoan symbol, so here's a proposed replacement.
dialogue (Web) screen shot 2018-02-22 at 2 07 11 pm Made the change here to keep all icons filled in (unless paper)
speechBubble (Web) screen shot 2018-02-22 at 2 07 16 pm "
openQuote (Web) screen shot 2018-02-22 at 2 07 39 pm Matched the roundedness of the other punctuation marks.
thoughtBubble (Web) screen shot 2018-02-22 at 2 07 45 pm Used in YMYG.
date (Web) screen shot 2018-02-22 at 2 08 04 pm Removed the text from the icon.
popup (Web) screen shot 2018-02-22 at 2 08 15 pm Requested here.
filter (Web) screen shot 2018-02-22 at 2 08 21 pm Requested here. Not sure the funnel is the best metaphor here. Tried the top slider in the middle @Scotchester, but it got too close to the 2nd slider.
map (Web) screen shot 2018-02-22 at 2 08 29 pm Need to track down which existing project this was pulled from. Thoughts @Dnpizarro ?
flag (Web) screen shot 2018-02-22 at 2 08 56 pm Not sure if this is in an existing project.
policy (Web) screen shot 2018-02-22 at 2 09 02 pm Requested here to represent policy on the blog.
regulation (Web) screen shot 2018-02-22 at 2 09 09 pm Requested here to represent regulation on the blog.
toolbox (Web) screen shot 2018-02-22 at 2 09 16 pm Used in YMYG.
calculate (Web) screen shot 2018-02-22 at 2 09 24 pm Not requested, but seems like a useful addition for tools/worksheets.
agreement (Web) screen shot 2018-02-22 at 2 09 29 pm Used in YMYG.
serve (Web) screen shot 2018-02-22 at 2 09 36 pm Requested here.
servicemembers (Web) screen shot 2018-02-22 at 2 05 53 pm Straightened angle to match other icons.
compass (Web) screen shot 2018-02-22 at 2 09 42 pm Not requested, but seems like a useful addition
**zeroIcon ** (Numbers) screen shot 2018-02-22 at 2 09 50 pm Added open circles for numbers
pricetag (Expenses) screen shot 2018-02-22 at 2 10 03 pm New category, mostly from existing icons in YMYG. Open to how these are named.
gift (Expenses) screen shot 2018-02-22 at 2 10 11 pm "
childcare (Expenses) screen shot 2018-02-22 at 2 10 18 pm "
healthcareCosts (Expenses) screen shot 2018-02-22 at 2 10 22 pm "
cart (Expenses) screen shot 2018-02-22 at 2 10 28 pm "
dineOut (Expenses) screen shot 2018-02-22 at 2 10 33 pm "
furniture (Expenses) screen shot 2018-02-22 at 2 10 38 pm "
monitor (Expenses) screen shot 2018-02-22 at 2 10 43 pm "
entertainment (Expenses) screen shot 2018-02-22 at 2 11 13 pm Should a dollar sign replace the star in this ticket?
disability (Expenses) screen shot 2018-02-22 at 2 10 51 pm From existing icons in YMYG. Open to naming alternatives.
clothes (Expenses) screen shot 2018-02-22 at 2 10 56 pm "
briefcase (Expenses) screen shot 2018-02-22 at 2 11 02 pm "
travel (Expenses) screen shot 2018-02-22 at 2 11 07 pm "
equipment (Expenses) screen shot 2018-02-22 at 2 11 23 pm "
pet (Expenses) screen shot 2018-02-22 at 2 11 29 pm "
busIcon (Expenses) screen shot 2018-02-22 at 2 11 37 pm "
court (Expenses) screen shot 2018-02-22 at 2 11 41 pm "
taxes (Expenses) screen shot 2018-02-22 at 2 11 45 pm "
gambling (Expenses) screen shot 2018-02-22 at 2 11 51 pm "
flower (Expenses) screen shot 2018-02-22 at 2 11 57 pm "
spring (Expenses) screen shot 2018-02-22 at 2 12 05 pm Icon for seasonal expenses in YMYG.
summer (Expenses) screen shot 2018-02-22 at 2 12 13 pm Icon for seasonal expenses in YMYG.
fall (Expenses) screen shot 2018-02-22 at 2 12 18 pm Icon for seasonal expenses in YMYG.
winter (Expenses) screen shot 2018-02-22 at 2 12 28 pm Icon for seasonal expenses in YMYG.

@designlanguage
Copy link
Member

Here's an overall look at all the symbols in the new icon font. There are a couple that will need to be re-concepted in the future (payday loan and debt), but this shows how all the icons work together.

New set

screen shot 2018-02-23 at 10 13 09 am

Previous set

screen shot 2018-02-23 at 10 13 38 am

@caheberer
Copy link
Member

💥💥💥

@jimmynotjim
Copy link
Contributor Author

@designlanguage could you create a single image like those above with just the icons you and @Dnpizarro believe are in need of more work?

@caheberer
Copy link
Member

caheberer commented Apr 24, 2018

When updating a YMYG module today, I found:

  • The person / profile icon swapped out for the old prepaid card icon.
  • All numbers are replaced with "No glyph"

I'll keep reporting as I go.

@caheberer
Copy link
Member

caheberer commented Apr 24, 2018

Also, adding these to the list for new ones to be created in the future.

This is used for "adoption" in YMYG:
screen shot 2018-04-24 at 1 16 21 pm

This is used for "marriage" in YMYG: (the people are equal in this versus the smaller one in front)
screen shot 2018-04-24 at 1 33 18 pm

Snap and TANF in YMYG:
screen shot 2018-04-25 at 9 07 59 am

screen shot 2018-04-25 at 1 58 13 pm

@designlanguage
Copy link
Member

Icons that exist in our typeface, but need to be added to the Design System

Nav icons

Screen Shot 2020-01-03 at 12 46 30 PM

Communication icons

Screen Shot 2020-01-03 at 12 46 39 PM

Document icons

Screen Shot 2020-01-03 at 12 46 44 PM

Financial concepts

Screen Shot 2020-01-03 at 12 46 53 PM

Web icons

Screen Shot 2020-01-03 at 12 47 00 PM

Expense icons

Screen Shot 2020-01-03 at 12 47 04 PM

Icons that exist in our typeface, but need to replace old versions in the Design System

Document icons

Screen Shot 2020-01-03 at 12 51 25 PM

Web icons

Screen Shot 2020-01-03 at 12 51 30 PM

New concepts needed

Concept Old icon Proposed icon Notes
Debt Screen Shot 2020-01-03 at 1 29 33 PM This icon needs to be replaced with a different concept. This looks like money is increasing.
Membership Screen Shot 2020-01-03 at 1 13 19 PM From @caheberer's comment above
Repairs We could use the wrench from the credit repair icon in our typeface
Marriage screen shot 2018-04-24 at 1 33 18 pm "
SNAP Screen Shot 2020-01-03 at 1 25 18 PM "
TANF Screen Shot 2020-01-03 at 1 25 27 PM "

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants