Illustration in a circle

[ell0ell0]

Hola folks. I've started just this past few days playing with illustration inside a circle to brighten up our careers pages a bit. This is a slightly new useage, but our Isocon's didn't seem descriptive or friendly enough. Anyhow checa-check-it out.

[duelj]

[jehlers]

I think the simpler background for the gavel matches the set more than the one with the stripped background.

The 2nd DFA option also feels more inviting. I like the use of teal instead of red.

The summer intern also makes more sense sitting behind a desk.

All in all its looking good!

[nataliafitzgerald]

Feedback on specific illustrations

Brandeis Honors Program The 2nd option with the simpler background for the gavel illustration looks good.

CFPB Summer Internship Could you try some solutions to this one that do not rely on people? I could see issues with this one from a diversity perspective. Additionally, the other programs (and the larger percentage of our illustrations) are object-based so it seems like there could be a number of potential solutions for this one that do not rely on people.

Director's Financial Analyst Program I prefer the 2nd option for this one. In the spirit of our illustration guidelines, the shadows behind the bars would only show up if this were in the top-facing view. In this front-facing view there would be no shadows.

Presidential Management Fellows Although the flag is quite small in the 1st option, it does helps to identify this as the White House so I prefer including it. On account of the small size, can you simplify the flag illustration so that it renders better on screen? Maybe we lose some of the stripes? Or, if we simplify the flag to remove the curves (as mentioned below) it will render better here.

Recent graduates This illustration looks great. Versions 1 and 2 are the same, yes?

Who should apply I feel slightly less concerned about this one than I do about the intern because it does show a collection of people. In developing this one, were there any alternates that you tried that did not rely on people? If so, could you share them?

Why you should apply Did you try a non-waving flag as you were exploring this illustration? If not, could you give it a try and share? With the level of detail of the stripes, the waving starts to create some visual stress and perhaps more detail than is needed for an illustration at this scale.

[nataliafitzgerald]

From a Brand 2.0 perspective, we are discussing a number of brand-specific issues here:

1. The addition of a level (similar to the isocon level) where illustrations live in circles.

As a group we have discussed that adding illustration to tier 2 adds a level of flexibility and it marries well with the top level illustrations (found in hero graphics). Pending questions are where this lives in the hierarchy (is it on the same level as an isocon and just an alternative to the isocon?). If yes, how do we define when we use an isocon and when we use a circle illustration?

2. The use of illustrations of people

People have been part of our illustration library for some time but we have been very careful and have even avoided using them in most cases because they portray something very specific. Where there has been an object-based solution that works just as well, we have used objects. We have tended towards objects illustrations because they serve more as archetypes and can speak to a larger audience in a universal way.

As we move forward, how do we start to define when people are the right solution and when they are not? Looking back on completed projects, I believe we have only used the people illustration in the HMDA video. In this video we were telling a story about a specific character so it only made sense to use an illustration of a person.

[mebates]

Hey @nataliafitzgerald, thanks for the two points in the last comment. I'm less interested in the illustration-specific feedback on this thread, and more interested in these two questions.

For your first point, do we have those 'levels' articulated somewhere? I know we've articulated them as a group in meetings. I'm asking because I wonder if these just simply qualify at the level of 'illustration' and don't need to be considered anything else. From the Design Manual:

Illustrations are an important tool for introducing the subject matter of a page, event, or topic. Illustrations are vector-based graphics that support primary headers and text. They function as the brand’s top-level illustration style with detail and clarity. Illustration is universally relatable and accessible to all audiences. The content of an illustration should always be politically and socially neutral.

The second point is also worth discussion. I do think we should limit the use of people so our site doesn't look like a bunch of cartoon characters. But, I think the limited use on these two pages is appropriate. Very curious to hear others' thoughts!

[ell0ell0]

@nataliafitzgerald all those little tweaks make sense, so we'll jump on them.

We've been brainstorming a bit and the best we can think up for internships would relate to coffee fetching, a coffee carrier with 4 to go cups (which is pretty inappropriate), or like a messy desk with papers and coffee cups (not really sure that visually reads as intern even with a word prompt). We could use a bit of help if anyone has an idea.

Objects in place of people I think works when a person/people/group isn't the focus, but they're symbolic of some larger institution, such as soldiers, firemen, the president, doctors, or they already have a symbolic concept associated with them. When their is no larger institution associated with an individual/group such as women, low income workers, parents, elderly, etc, it's probably not a good idea to use objects.

[elizbond]

I've been looking through some infographics on internships and I'm seeing a lot of books, briefcases. and resume illustrations. Also, there is a lot to do with chat bubbles, like the dialogue minicons we thought through a couple of months ago. If you think about it conceptually, it makes a lot of sense. Your'e learning by doing, through conversations with your coworkers, your superiors, etc.

[duelj]

Here are some updates to the illustrations including some object based attempts to the internship. I do agree with some of Lee's thoughts on using people rather than objects to symbolize some groups of people with out stereotyping them by the objects we use.

[nataliafitzgerald]

Thanks for the updates, @duelj. The DFAP data bars, White House and American flag look good. I like the simplified version of the flag.

For CFPB Summer internship, I'm confident that with a bit more exploration we can land on an object representation that will work. @duelj - the options that you sent are going in a good direction. Can we move to simplify the level of detail to come closer to the other circle illustrations? What makes the most sense is to reduce the number of objects. Perhaps just the mug on the desktop? A briefcase (or a workbag - like the one the person is wearing in the original illustration)? A stack of books? One book?

Thinking more globally about illustrations in circles, I'm thinking that for the tier 2 illustration level (illustrations in circles) it would make sense to limit ourselves to one object. And, in tier 1 - that is where we bring different objects together to create a composition/still life. In this way we are creating real hierarchy (and then tier 2 is not the same as tier 1 only smaller in scale).

[duelj]

@elizbond I think there are some interesting ideas in the learning through doing and communicating as represented through speech bubbles but I feel there are a few areas of concern with getting the meaning across:

• Speech bubbles typically come from people, not having them in small sized icons is one thing, but i think it will be hard to sell this concept through the speech bubbles alone.
• Our documents and speech bubbles have abstract content on them which will make it hard to convey any sort of specifics to a dialogue in the speech bubbles.

[duelj]

Here are some options of the internship object approach simplified as @nataliafitzgerald asked for. I didn't do the "intern bag" as I think that connection is a bit weak between intern and shoulder bag. I could see the briefcase but wanted to try a couple options without and would rather use that if people strongly that these are not working.

[mebates]

To me these last ones look like anything 'student' related. Any way to get some CFPB branding in there? I liked the one showing the computer screen, like you were interacting with complaints. Conceptually, it's the same as Director's Financial Analyst ... the illustration is showing the work you'll be doing. Tough nut to crack though, thanks for the persistence @duelj!

[duelj]

@mebates I like that idea of having more branding or something specific included as well. Tried a couple simplified options using the computer to show something more CFPB specific.

[nataliafitzgerald]

I would still like to see us push in the direction of the simple, single object based approach so that the circle illustrations really stand apart from their tier 1 counterparts. If tier 2 are more like objects as symbols and then tier 1 (the hero level) are collections of objects that build a still life / composition. With this approach, the two tiers start to make more sense as part of a system. This system also makes sense with regards to scale and sizing - as you move from tier 2 to tier 1 the level of detail increases and the number of objects increases.

Instead of working in the actual logo for this representation, we can bring in the brand through the use of color. Here are some examples:

I like the idea of the pencil because it does mean more than just students. A sharp pencil means getting to work to solve a problem. It means developing ideas and solutions. It means hands on work. It also does tie back to students which makes it even more appropriate here since this internship is a student internship.

The mug doesn't have as much meaning, other than being an object that people associate with working.

The books could also work - colored CFPB green and mid-tone/tint.

[stephanieosan]

Branding / Green tones I think the point of bringing the cfpb brand onto the computer screen was to represent cfpb-related work being done. I don't think we need to make the internship illustration green-only (wouldn't fit with the rest of the suite). And if we changed the entire suite to green-only, that might make it feel too industry-facing. I think these illustrations successfully take fuller advantage of our color palette, which is something we probably want to push in consumer-facing applications.

Tiers of illustrations While I think it's useful for us to start discussing illustration tiers, I don't think we're going to resolve it through this example alone. So, I've created a new issue to discuss and provide examples across different pages: https://github.com/cfpb/design-manual/issues/237 We should also talk about what the goal of creating different levels of illustrations are / what the distinctions between different levels are. I think that will help us figure out what guidelines to create around them. To me the big difference so far in how we use illustrations is: a) times when we use a single, large, complex illustration in the hero of a page, on the cover of a print piece, or as a large infographic (a la AJ) and b) scenarios where we use multiple, smaller illustrations throughout a single page.

Reminder: these illustrations need to be wrapped up today. So, my final comments are intended to push this conversation toward a speedy conclusion :D

For the purposes of these illustrations, it seems like the limiting factor is that these are relatively small illustrations, and we just need to find the right balance of detail.

I think depicting only one object has worked well for certain cases, like the flag, the gavel, and the recent grads hat, but trying to illustrate a concept like internships is less straightforward, and it seems like the pencil or the mug by itself aren't specific enough to be successful.

Overall, I think this suite of illustrations is working really well. From this discussion, it sounds like everything here is good to go as-is, with the exception of the internship illustration. Personally, my favorite is this one on the left. Maybe eliminating of a few of the details (like the browser chrome and the red/yellow/green buttons) would be enough to bring it to a similar level of simplicity as the rest of the illustrations.

Any other thoughts on how we can finalize the internship illustration, given that we're at the deadline and don't have more time for exploration, just for final polish/refinement? @nataliafitzgerald @mebates @duelj @ell0ell0

[duelj]

Here are two internship options: one addresses the suggestions @stephanieosan made, and the other is an idea Lee had if we were still to use people for this type of illustration. The person version has a nice specificity to it showing the internship as bridging the gap between being a student and moving into the professional world (something to consider at least).

[mebates]

I like the scene on the left too. More specific than the solitary pencil or coffee cup. My only suggestion would be to zoom in just a bit more to make the cup and screen bigger, cropping some of the left side.

[nataliafitzgerald]

+1 on @stephanieosan's comment about the level of detail - and keeping it balanced across the board between different circle illustrations.

In the spirit of pushing this through to completion today (and with an understanding that standards will be better defined and may not ultimately all align with all of the illustrations contained in this set, let's I'm all for working to close out the internship illustration.

Additional thoughts on internship illustration: Removing the highlight from the screen will help. We can reduce detail even further by simplifying the graphic on the computer screen. After hearing @stephanieosan thoughts on why the logo on the screen works and in the push for greater simplification, I'm warming up to that solution. So to wrap this one up let's either simplify the screen graphic or use the logo.

I'm still very interested in continuing the discussion on how we style/approach tier 2 illustrations in circles versus tier 1 illustrations in heroes. We can continue this discussion in issue #237.

[duelj]

Here is the version we will plan to move forward with which addresses the feedback from @mebates and @nataliafitzgerald to zoom in a bit and simplify. Cropping in so that both the left and right of the screen were clipped made the composition feel very odd and created closed/distracting negative spaces. This cropping aims to fill out more of the circle and balance the composition. For the simplification the screen without the logo felt like it fit our illustration style better and more clearly conveyed computer content.