Valucons for CFPB mission

[ell0ell0]

Hi all, we're creating new isocons for our mission. The existing icons can be found here. We need to update them to fit our new style.

Here's where we're thinking of going with them.

[nataliafitzgerald]

_Educate_ This approach is working.

_Enforce_ For "Enforce," I know we've gone back and forth with the gavel versus the scale. I guess the question is which approach aligns best with our mission.

Here's the "Enforce" text: We supervise banks, credit unions, and other financial companies, and we enforce federal consumer financial laws. What I take from this text is that we supervise and we enforce. Something about the scale feels kind of passive to me but maybe that speaks to our impartiality? Do we have any subject matter experts that could weigh in? There was a time where CEE had a definite opinion on this so perhaps we can reach out to James Hupp.

_Study_ For "Study" I am preferring the second option but the paper is too visually complicated. Can you explore some simplification of the content on the paper?

Also, make sure the general layout is matching what we've used before. These seem to be slightly mismatched.

_Valucons_ If we go with the isocon approach to the mission (which I feel is the right approach), we will need to revisit the valucons and create isometric versions of those. Do you have the bandwidth to add this to your exploration?

[ReedOKelly]

+1 on Natalia's comments on Educate and Study. for Enforce, I vote gavel, possibly a policeman's badge.

[himedlooff]

I like the first Study illustration because it clearly visualizes our data-driven approach. The magnifying glass on paper seems very old and dated, like we're the gang from Scooby Doo walking around sniffing up clues.

[Dnpizarro]

I'm adding an image of the older isocons for general comparison.

It seems like we're all onboard with educate. For Enforce I would echo @nataliafitzgerald sentiments...are we trying to embody fairness (scale) or a supervisor/prosecutor (gavel). For Study, I like the idea of the magnifying glass, but the magnifying part could use some refinement. I was curious as to why we don't use the isometric bar graph we currently have (image below)? The one you're using feels flat and stands out when next to the other two. Maybe there is a way to incorporate the magnifying glass with the below isocon. About the paper version, maybe @himedlooff has a point.

[duelj]

@Dnpizarro we have tried that version as well but the vertical lines make it feel very busy with the magnifying glass so we tried another route. There were also other iterations of the current graph shown as well as a more book based option, however the graph above we felt was the strongest.

Here are some of the other working options:

[ell0ell0]

So the french fry bar chart I didn't pick cause there's nothing to really zoom in and inspect. It'd be a larger cube, the circle bits at the peaks and dips of the fever chart imply a sort of data point being inspected.

@nataliafitzgerald I'll definitely try simplifying the content on the paper, but can you clarify what you mean about the "general layout mismatch"?

[himedlooff]

What about a blindfolded abe lincoln with crossed gavels?

[duelj]

+1 its subtle but, you can't miss the message.

[mebates]

I like the magnifying glass + chart combo. I prefer the french fry version because I keep seeing a comb in the other one (does anyone else see this? the vertical lines are like metal teeth to a comb?). I would make the final french fry shorter so it looks like we're zooming in on the second to last, tallest fry.

[elizbond]

+1 to the comb, but to me it's a fancy hair pick.

[nataliafitzgerald]

I also see the comb and continue to be in favor of the blocks (i.e. french fries). With that being said, there's something that feels a little jarring/dizzing to me about the totally sideways angle of the magnifying glass on the charts/tables.

Zooming out on this set, we have one object for "Educate" and one for "Enforce". The "Study option has two objects. Maybe we can simplify this to just the magnifying glass? We could add the dollar sign in the middle to give it more detail (if needed).

Alternately, if we stick with the two object approach we can still look at the magnifying glass with the paper under it and very simply indicate data.

[duelj]

Here are some alternate attempts at study given some of the feedback from @mebates and @nataliafitzgerald. The top row vs. bottom row is the level at which we are "magnifying" things in the lens, my preference is exaggerating it so that what is visible in the lens is more simple but I wanted to show a style with less scale increase as well. I just feel that it gets really complex inside the lens very quickly and makes the whole isocon seem much heavier.

[mebates]

I agree with you re: exaggeration.

[stephanieosan]

I also agree that more magnification tends to work better.

I think the magnification glass reads better when it's down (looking at paper), but I think the "data" reads better in the bar graph form, rather than the line and dot graphs on paper.

[Dnpizarro]

+1 on the exaggeration.

[klocraft]

I agree with @stephanieosan about the data reading better in bar graph form, but the magnifying glass reading better looking at paper. Would the image become too busy if you combined the two by using a bar graph on the paper, rather than a line graph?

[Dnpizarro]

@nataliafitzgerald any thoughts on the regular vs exaggerated magnification options that @duelj proposed?

[ell0ell0]

bump @nataliafitzgerald this is something we should probably wrap up

[Dnpizarro]

I'm going to queue this issue up for Monday's Design Manual Review meeting.

[nataliafitzgerald]

I agree with @stephanieosan and @klocraft about the data reading better in bar graph form and the magnifying glass reading better looking at paper. I think where we still need resolution is with what is shown on the paper. Have we tried the bar chart on the paper?

In terms of an earlier comment about the styling mismatch I was referring to the difference with what you see through the magnifying glass. I see now that this is related to magnification versus no magnification. I am fine with the magnification (if that is the general preference) as long as the paper content is simple enough so as to keep things on the less busy side. And, before we decide to go with magnification we should consider that we do have existing isocons combinations that use the magnifying glass that do not use this approach. Is the benefit of the magnification worth revisiting the magnifying glass/paper representations that are already out in the word?

New design approach

Existing approach

[duelj]

Looking to get this issue buttoned up as Flapjack is looking to close out this page and have it on build soon and this is an outstanding issue to wrapping up the design. Here is the collection with an updated study icon with the paper layout and a bar chart style. I tried the bars but it felt too heavy, especially with the filled in magnifying glass handle in this one. I think this representation is working, hopefully you feel the same and we can button this up!

[stephanieosan]

I like this.

[duelj]

Hey everyone, unfortunately the saga continues. After the content came back the wording for the "study" value has been changed to "empower." That being said I think that the imagery in the study icon doesn't carry over particularly well to empower, so we went back to the drawing board. The accompanying text for the empower section will read as follows:

"We create tools that let consumers take greater control of their options. We create opportunities for entrepreneurs, experts, advocates, and the financial industry to innovate in consumer-friendly ways."

Raised Fist

The raised fist was a first round of brainstorming and knowing that it might feel a bit too aggressive we were discussing ways to try and make it feel less abrasive. We talked about putting something in the hand, like a lightning bolt or money but I couldn't seem to get it to look right and I wasn't feeling like it was helping much.

Electrical Plug

Wanted to try another tact that was more object based but was having a hard time finding something that felt like the right object. The plug felt like it might be an OK fit so I wanted to give it a try to see how it might look.

Key

When we brainstormed we talked about a skeleton key to be a bit more generic but I thought having a key in action might be kinda cool since empower feels more action oriented. I looked at the key we have but it feels very car specific so I thought I would put forward this option as another object based approach.

[mebates]

Oy, this is difficult. Do we have time to add it to the Iconathon so we get lots of folks brainstorming on it? cc: @ohsk

[stephanieosan]

I was thinking the same thing. What's your deadline for resolving this, @duelj ?

[duelj]

The deadline is shortly after immersion when our team restructuring will take place. At that point I hope to be able to pass off complete icons to the FEWDs for build. I have tried a couple of options after the working session discussion the other day and wanted to share them and see how people felt about these representations. The first two are the same with minor adjustments to proportions and the latches.

Additionally, the FJ team reached out to the stakeholders to ask for some suggestions of how they imagine "empower" being visually represented and thus far have got this response:

"As far as an Empowerment logo, I’ve asked our team for their ideas but I would think that something with hands might make sense – reaching out, or in sort of a helping handshake, or something to that effect."

We have not showed them any of the icons in this issue but my gut feeling is that and isocon with hands is going to be difficult. I think our approach of trying to use objects might work better with the isometric style as organic shapes are difficult to depict. I would love to hear some of the other designers thoughts on that as well.

[doguin]

If you do end up exploring hands for representing Empowerment then an image of a forearm handshake comes to mind. The way people help each other off the ground.

[duelj]

I wanted to document some of the ideas that we have collected in one area so that they were easier to find, discuss, test, etc.

Vanessa

"As far as an Empowerment logo, I’ve asked our team for their ideas but I would think that something with hands might make sense – reaching out, or in sort of a helping handshake, or something to that effect."

FJ Team

• Brain or brain with lightbulb
• Lightbulb
• Weight/dumb bell in hand
• Tool in hand
• Key

Working session

• Forearm handshake
• Handshake
• Speedometer or other type of meter
• Toolbox
• Tools
• Cursor/mouse cursor

[nataliafitzgerald]

I fear (advise against) the hand direction as it's failed us so many times in the past.

The mouse idea could work. Is there a way to tie the financial angle back into this somehow (like we do with the book with the dollar sign for educate)?

I really like the way you've drawn the tools and the toolbox but they somehow feel too far removed from the subject matter at hand. We are really talking about financial empowerment so finding a way to tie in this connection (to finances) would complete the icon.

You list a lightbulb above. We may want to steer clear of that since the lightbulb is already used for one of our 3 values, innovate.

[duelj]

I don't know if we should entirely dismiss hands as stakeholders and JP brought up hands and how they envisioned empower being represented. That being said I have not successfully made an isometric handshake, and am more than open to other ideas. Just don't know if we should nix the idea of using hands for the iconothon in case someone else can sort out how to make it work. Here is another hand representation that our team had discussed.

[stephanieosan]

If we wanted to pursue this direction, what if the fingers were open so you saw the palm? Like someone was handing you a tool instead of wielding a tool.

This version still feels aggressive to me, like the hand is about to smash that wrench into the windshield of my car or something.

[ajbush]

I am trying to help @duelj make progress on this while he has been working on a video. After several conversations with designers and FJ team members here is a more current set of suggestions for the Empowerment isocon. This has been a tricky task since empowerment is an abstract concept and challenging to represent visually.

In the mockups below I have included 3 options. 1 new, 1 refined, and 1 resurfaced from an earlier round. The different empowerment isocon suggestions are featured in the 3rd column in the graphic below. I think it's important that these feel like a family together so I placed them inline with the Educate and Enforce isocons.

Just to reiterate, these will always live next to explainer content and the current text that will live next to the Empower isocon is "We create tools that let consumers take greater control of their options. We create opportunities for entrepreneurs, experts, advocates, and the financial industry to innovate in consumer-friendly ways."

Version 1 Financial toolkit that, in this context, holds the tools used to empower consumers.

Version 2 Represents tools the CFPB creates to empower consumers.

Version 3 Attempt at illustrating the abstract concept of being empowered. Used the stairs to represent how being empowered (using the CFPB's tools) can help you advance from one level to the next.

[Scotchester]

I'm liking the new toolbox! I think it's the best match for the text.

[nataliafitzgerald]

I'm liking the toolbox too! The next step may be to view it at the different sizes it could appear (based on our standards) and see how it's looking at those sizes? At the size shown above it feels like we could afford to simplify it further and loose one layer of complexity. The most detailing appears around the coin and the box latches so maybe in there?

[ajbush]

Here are updates based off of the good feedback we got from the Design working session from yesterday. Most of the updates happen to also address Natalia's feedback as well.

-We simplified the coin/medallion, handle, and latches along with editing some of the line weights. -And @duelj made a tweak with an angular shape to make this feel even more like a toolkit or toolbox that we wanted to share.

Let us know which of these are working better. We're getting close!

[nataliafitzgerald]

@ajbush - I like where you're going with the option on the right. This shape very much says toolbox to me. The new handle is working well. The simplified clasps are feeling perhaps too flat now. Is there a way to give them a bit more depth (perhaps with a thicker line weight or bringing in some of the depth from the previous version - maybe a middle ground between what we had in the last round and where we are here?).

I agree that this is getting very close. Nice work!

[ajbush]

Here's an update.

I used solid black to fill in the depth behind the latch. This creates a middle ground between the two options below:

The result is this:

[nataliafitzgerald]

@ajbush I like this approach to showing the thickness of the clasps.

One more thing I'd like us to try before wrapping this up is looking at the thickness of the coin filled in. That would help tie it closer to the way we are showing depth on the clasp. Can you post that iteration when you have a moment?

[ajbush]

Yup, here's what we discussed. I brought back in the full set to compare as well like you suggested.

[nataliafitzgerald]

I prefer v2 with the filled coin. The "Educate" and "Enforce" isocons have thickness (especially in their bases) so it is nice to work some thickness into the "Empower" isocon as well for the sake of creating a cohesive set. Nice work!

[duelj]

+1 I think its great, they feel like a nice set and now we have a lot of great illustrations to use for other upcoming things (hopefully).

[ajbush]

Cool. Here's where we are at then.

[nataliafitzgerald]

Approved. Nice work, AJ!

[nataliafitzgerald]

@ajbush - Can you go ahead and add this to the "Isocon library" illustrator document on the drive?

[mebates]

:tada: :facepunch: :tada: :facepunch: :tada: :facepunch:

[Dnpizarro]

So all that is left here is to publish to the Design Manual correct? The asset library has already been updated.

[mebates]

This was finished with @Dnpizarro's pull request on May 5.