Chicago Summer of Learning: thoughts on badge design

In my initial post about the Chicago Summer of Learning (CSOL) badge system, I quickly sketched out the rough outline of it. In this post we’ll talk through the components of CSOL badge design and the rationale that led to our decisions about them. First, a quick two sentence recap of what CSOL is and what it seeks to accomplish. The Chicago Summer of Learning is the first citywide implementation of an open badge system. It includes in-school badge-issuing programs as well as out-of-school and governmental badge-issuing programs—all of them focused on combatting the summer learning drop off.

As I’ve discussed in previous posts and as I noted during this week’s Open Badges Community call, there are a number of considerations associated with design and badge design in particular. While it can be argued that content defines a good deal of the social value of a badge, visual appearance also plays a significant role.* Visual processing accounts for half of the human brain’s operational capacity so it follows that how something looks can alter how it’s perceived. With that in mind, as I imagined the visual badge system that would arise from a panoply of organizations issuing disparate badges, my years of experience in design consulting told me that a strong shape with a required set of elements would bring conceptual cohesion, reduce visual confusion, and provide a much needed sense of family, a unifying principle if you will, to the group.

A template to the rescue
With these desires in mind, we created a badge design template that was hexagonal in shape with a banner draped across it that included 2 blue stripes and 4 red stars.

The banner design referenced the iconic elements found on the City of Chicago’s flag. This template served a variety of purposes:

1. it identified each of these badges as Chicago Summer of Learning badges;
2. it created a cohesive and easily understood family of badges despite being assembled from very different organizations;
3. it provided the city with an easy way to find, reference, and display badges as a full set not only during the experience but afterwards as well;
4. it branded the badges as Chicago specific; and
5. it provided a way for issuing organizations to indicate to the public and to future funders that they had participated in the groundbreaking experience of CSOL.

Our goal with the template was to provide a Chicago flavor to the badges and indicate a family feel while allowing enough room for organizations to customize badges to suit their needs. So, how did this fly? This template arrived in a way that may have seemed like an edict to some and yet it was perceived as a gift by others. Nevertheless, with the imposition of such a strong requirement to participate in the system—and it was an absolute requirement for all entry level badges—there were additional issues for the team to work through together. Some organizations already had pre-existing badges that didn’t fit the new template; some organizations had no access to designers; and some organizations had no strong design style or branding to implement.

A badge design tool for all
Since one of our goals for the template was to ease folks’ fear of design in general—particularly those who were organizationally or financially challenged—we also developed a badge design tool. The beauty of this tool, Badge Studio, developed by Atul Varma & Jess Klein, was its adaptability. If an organization had little to no design expertise, using it one could pull together a respectable looking badge that had all of the required elements. On the other hand if an organization had experienced design staff or access to professional designers, the template could be manipulated quite easily to accommodate unusual visual elements or objects that extended beyond the hexagonal shape.

For the organizations who already had existing badges, we suggested resizing them and dropping them into the hexagonal portion of the template—or we provided them with an Illustrator template. Since all of the organizations with pre-existing badges had design staff or access to professional designers, this option worked out quite well.

Issues of branding
Since Mozilla was tasked with addressing the first two badge levels of the CSOL experience, entry level badges and city level STEAM badges, we focused solely on a family appearance. To that end, we did not develop standards for color use or typography—two important mainstays of a branding system. However, we did provide some recommendations regarding type use. That suggestion was to avoid using type unless it remained readable & legible at highly reduced sizes. We also suggested avoiding type as the sole indicator of different badge levels, e.g., beginner, intermediate, advanced.

Indeed, we shared with the badge issuing organizations that badge design is akin to logotype or mark design in that it has similar constraints. Badges need to read at both small sizes (50 x 50 pixels) and larger sizes (600 x 600 pixels). Happily, most organizations succeeded in making their own branding work comfortably with the new badge template wrapper.

As for the city level STEAM badges, they hewed to the hexagonal structure and incorporated the word Chicago in them. Using her previously designed entry level badge template as a starting point, Mozilla’s Jess Klein designed three sets of beautiful S-T-E-A-M badges. After a comprehensive review and discussion, the larger team selected the style that hearkened back to the Chicago Summer of Learning identity program.

See the lovely results above for yourself. Each badge visually references the subject area that it represents; take a moment or two to admire the layered meaning embedded in each one of these badges. They’re wonderful examples of badge designs that function as well as a group as they do independently.

As to the top level badges of the CSOL experience—the city-wide challenge learning experiences badged by Hive Chicago and the Digital Youth Network—they function in a somewhat separate aesthetic because the use of the badge design template was not a requirement for their development. Subsequently, the shapes and colors of the challenge badges issued by these organizations may appear significantly different than the entry level or city-level badges. They do not all retain the Chicago flag banner and they may be shapes other than hexagonal.

Retraining the focus
After all of this discussion of the visual design of the badges, it’s important to consider why this badge system came into being. The learning is what’s important here: the badges act as various representations of that learning. We are really pleased to see the beautiful, mixed bouquet of badges that resulted from working with a simple standard template combined with the challenge badge accents. This summer provides a test bed for not only open badges but also summer programs and the nascent tie between in school and out of school learning. We could not be more excited.

- – -

As always, I welcome your thoughts. In the next few blog posts we’ll cover the badge system hierarchy including the type of badge system CSOL represents, thoughts on assessment, team requirements, plus an examination of additional tools built for this endeavor.

So yes, much more soon.
carla [at] mozillafoundation [dot] org

notes & references
*It’s worth noting that while I strongly suggest that design play a role from the beginning of the process, obsessive concerns about the appropriateness or inappropriateness of the visual appearance of a badge can stunt or entirely inhibit development. Still, content + design = a whole that is unmatched by its individual parts.

During the July 10, 2013 Open Badges community call, I paraphrased a quote by Massimo Vignelli (1998), designer of the iconic NYC subway map and wayfinding, that I found in an intriguing book of interviews, Design Dialogues. You can find that quote below.

There are two kinds of graphic designers: One is rooted in history and semiotics and problem-solving. The other is more rooted in the liberal arts—painting, figurative arts, advertising, trends and fashion. These are really two different avenues. The first kind is more interested in looking to the nature of the problem and organizing information. That’s our kind of graphic design. To me, graphic design is the organization of information. The other kind is interested in the look and wants to change things all the time. It wants to be up-to-date, beautiful, trendy.
(M. Vignelli, 1998)

Tagged: badge design, badge pathways, badge system design, CSOL, design, learning, mozilla, openbadges, system design